VGトマのブログ一覧

お雛様の時は写真が多かったですね。

１月から預かっていたS2000が、先週持ち主に無事引き取られました。

ただ今、写真の車を預かって（お借りして）おります。
チャイルドシートを取り付けて、革シートを痛めると申し訳ないので、ベストタイプを息子に付けましたけど、座面が低いので外が見えない為、子供には不評です(^^ゞ(^^ゞ

色んなスィッチが付いていてよくわかりましぇ～ん(^^ゞ

スタイル管理のブログ カラーテーブル
テキスト　フォント　基本のスタイルシート
記載内容の解説　セレクタの解説 セレクタ解説　ＰＡＲＴ－２　セレクタ解説　ＰＡＲＴ－３

セレクタ解説　ＰＡＲＴ－４　に引き続き、
実践編　背景とヘッダー画像です。

背景は、このブログでは背景色に薄紫、わかりにくいですが、背景画像に白い画像を使っています。
ヘッダー画像とは、ブログ　愛車紹介　おすすめスポット　My掲示板の
メニューの上に表示されている画像です。
（左側にネコ　右側にエリシオンの画像）

☆背景の設定は、基本のスタイルシートにあります、body の部分を下記のように変更しています。

body
{
padding-right: 0px;padding-left: 0px; background:RGB(225,195,255);
background-image:url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/60812/P6.jpg');
background-position:center;
background-repeat: repeat-y;
padding-bottom: 2px;
margin: 0px;
padding-top: 2px;
text-align: center;
color:#000000；
}

★「background:RGB(225,195,255);」で背景色の設定をしています。
ここではあえて、RGBの割合で記載していますが、
「background:#FFCCFF;」とか 「background:#FCF;」でもＯＫです。
色に関しては、ブログ カラーテーブルをご覧ください。

「background-image:url('https://cdn.snsimg.carview.co.jp/(略).jpg');」で背景画像を設定しています。
私の場合は、愛車紹介のフォトギャラリーに、画像をアップしました。

「background-position:center;」は、「背景の表示位置を縦横の中心にして」と指示しています。
left,center,right,top,center,bottomと位置で指定します。他にも％や数値で指定も出来ます。例えば、20% 40%; の場合、左から20％、上から40％です。

「background-repeat: repeat-y;」は「背景画像は縦方向に繰り返す」と指示しています。
他にも　repeat　縦横に背景画像を繰り返す。
repeat-x　横方向にのみ背景画像を繰り返す。
no-repeat　画像を一回だけ表示。などが指定出来ます。

また、
background-attachment:fixed;
と追加する事で、背景画像を位置固定し、スクロールしても動かなくなります。

☆ヘッダー画像の設定は、基本のスタイルシートの上から１／４あたりにあります、
/* ☆ヘッダー（みんカラメニューのすぐ下にある部分）の設定です。*/
/* ロードスター仕様のような画像もここで設定します　*/
#Header {padding-right:20px；padding-left:20px;padding-bottom:20px；padding-top: 20px；margin-top:5px;background-image:url('/styles/images/header.jpg'); margin-bottom: 0px;width: 750px;background-repeat: no-repeat;}
の部分を下記のように変更しています。
#Header
{
padding:94px 0 90px 15px;
margin-top: 2px;margin-left: 12px;
background-image: url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/60812/P1.jpg');
margin-bottom: 2px;
width: 750px;
background-repeat: no-repeat;
}

「padding:94px 0 90px 15px;」は、題名の位置指定を上 右 下 左 の順でしています。
私の場合は、背景画像の高さが210px有りますので、上 94 下 90 としています。画像高さが100px程度であれば、上30下30ぐらいで真中に題名がきますので、適当に数字を変えながらお試しください。
paddingやmarginについての詳しくは、記載内容の解説をご覧ください。

まずヘッダー画像の製作からですが、最大幅は750px程度が良いと思います。やはり、愛車紹介のフォトギャラリーに画像をアップしてます。「background-image:url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/60812/P1.jpg');」で画像の場所を指示してます。

「background-repeat: no-repeat;」で画像の繰り返しをしないと指示してます。

「width: 750px;」
この幅を指定する事で、ヘッダーの大きさを指示してます。

★「color:#000000；」にて基本で使う文字色を設定します。
背景色に薄い色を使う場合は、黒になりますので設定の必要は有りませんが、
濃い色にしますと文字色が黒では読めない・読みにくい部分が発生します。
その場合には　「color:#FFFFFF；」などと薄い色をしてしてください。

以上　お試しください。
プレビューで確認するのと、保存を忘れずに(^^ゞ

スタイル管理のブログ カラーテーブル　テキスト　フォント　基本のスタイルシート
記載内容の解説　セレクタの解説 セレクタ解説　ＰＡＲＴ－２　セレクタ解説　ＰＡＲＴ－３
に引き続き、第８弾　スタイルシートのセレクタ解説　ＰＡＲＴ－４です。

基本のスタイルシートの内容解説はこれで終了です。
引き続き具体的な変更方法も解説と考えていますが、
「こんな風にするには　どーするの？」などは、
ご質問くださいませm(__)m

また「違うぞ！」など有りましたらご指摘ください。

/* ☆愛車紹介のプロフィールタイトルの設定です　*/
.CarTitle{color: #404040;font-size: 16px;font-weight: bold;padding-left: 17px;background: url('/styles/images/point12x12.gif') no-repeat 0px 0px;}

/* ☆愛車紹介のメニューの設定です　*/
.CarMenu{color: #32456D;font-size: 12px;letter-spacing: 0px;margin: 0 0 10px 0;padding: 0px 0px 0px 5px;text-align: left;background: #DCE4F1;border-bottom: 1px solid #6F86BD;}

/* ☆愛車紹介の日付かな？？と思いましたが謎です　*/
.CarDate{color: #5170B2;font-size: 14px;font-weight: bold;border-bottom: 1px solid #0871e3;width: 98%; margin-left:0; margin-right:0; margin-top:0; margin-bottom:3px; padding-left:5px; padding-right:0px; padding-top:4px; padding-bottom:1px}

/* ☆愛車紹介のパーツレビューや整備手帳の個々のタイトルの設定です　*/
.CarSubTitle{color: #5170B2;font-size: 16px;font-weight: bold;border-bottom: 1px solid #0871e3;width: 98%; margin-left:0; margin-right:0; margin-top:0; margin-bottom:3px; padding-left:5px; padding-right:0px; padding-top:4px; padding-bottom:1px}

/*　愛車紹介のメニュー（カープロフィール　パーツレビュー　整備手帳　フォトギャラリー）欄の文字設定です　*/
.LinkCarMenuHere{color: #32456D;}

/* ☆各コメントボタンの設定ですが、ログイン状態ですと自分ではわかりません　*/
.CommentButton{border-right: #6f86bd 1px solid;border-top: #6f86bd 1px solid;font-size: 12px;background: #dce4f1;border-left: #6f86bd 1px solid;width: 130px;color: #dce4f1;border-bottom: #6f86bd 1px solid;text-align: center;}

/* ☆コメントのタイトル欄（枠）上側題名？部分の設定です　*/
.CommentTitle{padding-right: 3px;padding-left: 3px;padding-bottom: 0px;padding-top: 0px;font-weight: bold;font-size: 12px;background: #dce4f1;color: #32456d;border-right: #95A8D2 1px solid;border-top: #95A8D2 1px solid;border-left: #95A8D2 1px solid;border-bottom: #95A8D2 1px solid;}

/* ☆コメントのタイトル欄（枠）下側の時間の設定です　*/
.CommentDate{padding-right: 3px;padding-left: 3px;padding-bottom: 0px;padding-top: 1px;font-size: 12px;background: #ffffff;margin: 0px;color: #404040;border-right: #95A8D2 1px solid;border-top: #95A8D2 0px solid;border-left: #95A8D2 1px solid;border-bottom: #95A8D2 1px solid;}

/* ☆コメントの内容の設定です　*/
.CommentBody{padding-right: 2px;padding-left: 2px;font-size: 14px;padding-bottom: 2px;padding-top: 2px;word-break: break-all;}

/* ☆コメントの返信・削除ボタンの設定です（ログイン状態の自分だけ）　*/
.CommentReply{text-align: right;}

/* ☆コメントに返信していない時の幅などの設定です　*/
.CommentBig{margin-top: 10px;float: left;margin-bottom: 0px;width: 100%;}

/* ☆コメントに返信済みの幅などの設定です　*/
.CommentMini{margin-top: 10px;float: left;margin-bottom: 0px;width: 265px;}

/* ☆コメントと返信時の枠の間にある「→」の設定です　*/
.CommentArrow{margin-top: 20px;float: left;width: 20px;text-align: center;}

/* ☆ヘッダーの下にある　メニュー（ブログ 愛車紹介 おすすめスポット My掲示板）の現在の状態での設定です　*/
.TabActive{background-color: #FF639A;text-align: center;color: #FFFFFF;font-size: 12px;font-weight: bold;}

/* ☆ヘッダーの下にあるメニュー（ブログ 愛車紹介 おすすめスポット My掲示板）の現在の状態でない時の設定です　*/
.TabInactive{background-color: #DCE4F1;text-align: center;font-size: 12px;color: #FFFFFF;}

/* ☆ヘッダーの下にあるメニュー（ブログ 愛車紹介 おすすめスポット My掲示板）の下の部分の設定です　*/
.TabBottom{background-color: #95A8D2;text-align: center;height: 5px;}

/* ☆ヘッダーの下にあるメニュー（ブログ 愛車紹介 おすすめスポット My掲示板）の現在の状態で
　　　リンクしている文字等を設定します　*/
/* ★ a:link はリンクしている文字を指定します。
　　　a:visited はリンクしている文字でアクセス済を指定します。
　　　a:active はクリックした瞬間を指定しす。
　　　a:hover はマウスポインタが上に有る時を指定します。*/
a.LinkTabActive{color: #FFFFFF;text-decoration: none;font-weight: bold;}
a.LinkTabActive:link{color: #FFFFFF;text-decoration: none;font-weight: bold;}
a.LinkTabActive:visited{color: #FFFFFF;text-decoration: none;font-weight: bold;}
a.LinkTabActive:active{}
a.LinkTabActive:hover{color: #FFFFFF;text-decoration: underline;font-weight: bold;}

/* ☆ヘッダーの下にある　メニュー（ブログ 愛車紹介 おすすめスポット My掲示板）の現在の状態で無い時に
　　　リンクしている文字等を設定します　*/
/* ★をご参照ください　*/
a.LinkTabInactive{color: #425C95;text-decoration: none;font-size: 12px;}
a.LinkTabInactive:link{color: #425C95;text-decoration: none;font-size: 12px;}
a.LinkTabInactive:visited{color: #425C95;text-decoration: none;font-size: 12px;}
a.LinkTabInactive:active{font-size: 12px;}
a.LinkTabInactive:hover{color: #FF639A;text-decoration: underline;font-size: 12px;}

/* ☆区切り線（水平線）の設定なんですが、どこで使ってるか不明です　*/
.HrLine{color: #95A8D2;height: 1px;}

/* ☆ブログページの１日に複数ブログが有る時にブログの区切り線（水平線）の設定です　*/
.DiaryLine{border-bottom:1px solid #b9bfcf;margin:3px 0 5px 0;}

/* ☆カレンダーの平日・日曜・土曜のブログが記載されていない時の表示設定です　*/
.CalendarWeekday{color: #425C95;font-size: 12px;font-weight: bold;}
.CalendarSunday{color: #FF0810;font-size: 12px;font-weight: bold;}
.CalendarSaturday{color: #0000FF;font-size: 12px;font-weight: bold;}

/* ☆カレンダーの平日・日曜・土曜のブログが記載されている時の表示設定です　*/
/* hover visited等は上の★マーク部をご参照ください　*/
a.LinkCalendarWeekday{color: #425C95;font-size: 12px;font-weight: bold;}
a.LinkCalendarWeekday:hover{color: #FF0000;}
a.LinkCalendarWeekday:visited{color: #6070A0;}
a.LinkCalendarSunday{color: #F0810;font-size: 12px;font-weight: bold;}
a.LinkCalendarSunday:hover{color: #FFFFFF;}
a.LinkCalendarSunday:visited{color: #EF3860;}
a.LinkCalendarSaturday{color: #3333CC;font-size: 12px;font-weight: bold;}
a.LinkCalendarSaturday:hover{color: #FF0000;}
a.LinkCalendarSaturday:visited{color: #324CE5;}

/* ☆カレンダーの今日の背景設定です　*/
.CalendarTodayBG{background-color: #FFFFFF;}

/* ☆ブログ：写真の設定です　*/
.pict{margin:0 8px 0 0;}

/* ☆プロフィールページの自己紹介テーブルの設定です　*/
.ProfileTable{border-collapse: collapse;border-collapse: separate;border: 1px double #95A8D2;background-color: #FFF;width:100%;}
/* ☆プロフィールページの自己紹介の左の設定です　*/
.ProfileTableLeft{border: 1px double #95A8D2;text-valign:top;width:80px;background-color: #DCE4F1;font-size:14px;line-height:130%;}

/* ☆プロフィールページの自己紹介の右の設定です　*/
.ProfileTableRight{border: 1px double #95A8D2;text-valign:top;background-color: #FFF;font-size:14px;line-height:130%;}

スタイル管理のブログ カラーテーブル　テキスト　フォント
基本のスタイルシート　記載内容の解説　セレクタの解説 セレクタ解説　ＰＡＲＴ－２
に引き続き、第７弾　スタイルシートのセレクタ解説　ＰＡＲＴ－３です。

掲示板の設定と思われる部分が、動作確認出来ず時間が掛かってしまいました(^^ゞ
明日（４／７木曜）はお休みさせて頂き(^^ゞ
残りの少しは今暫くお待ちくださいませm(__)m

/* ☆カレンダーの上の枠を設定します */
.CalendarHeader{padding-right: 5px;padding-left: 5px;font-size: 12px;background: #95a8d2;padding-bottom: 5px;color: #32456d;padding-top: 5px;border-bottom: #6f86bd 1px solid;letter-spacing: 0px;text-align: center;}
/* ☆カレンダー全体を設定します */
.CalendarBody{width: 190px;text-align: center;margin-bottom: 10px;background: #95A8D2;border-bottom: 1px solid #0871e3;}
/* ☆カレンダーの曜日を設定します */
.CalendarWeek{color: #709ece;font-size: 12px;font-weight: bold;position: center;}
/* ☆カレンダー平日（月～金）を設定します */
.calendarwd{background: #c5e4ff;}

/* ☆カレンダー：テーブルを設定しますが、上のカレンダーの上の枠や全体が優先されます */
.calendard{empty-cells: show;border-left: 1px solid #c5e4ff;border-bottom: 1px solid #6F86BD;background: #fff;}

/* ☆カレンダー：テーブルの背景を設定しますが、上のカレンダーの上の枠や全体が優先されます */
.calendardbg{border-left: 1px solid #c5e4ff;border-bottom: 1px solid #c5e4ff;background: #fff;}

/* ☆カレンダーを設定しますが、上のカレンダーの上の枠や全体が優先されます */
.CalendarPlate{color: #c5e4ff;font-weight: bold;font-size: 12px;position: center;}

/* ☆PR・カレンダー・プロフィール・お友達などの枠の下側を設定します */
.MenuPlate{border-left:1px solid #95A8D2; border-right:1px solid #95A8D2; border-top:0px solid #95A8D2; border-bottom:1px solid #95A8D2; font-size: 12px;text-align: left;line-height: 125%;padding: 5px;background: #DCE4F1;word-break: break-all; margin-left:0; margin-right:0; margin-top:0; margin-bottom:15px}

/* ☆PR・カレンダー・プロフィール・お友達などの枠の上側を設定します */
.MenuTitle{padding-right: 5px;padding-left: 5px;font-weight: bold;font-size: 12px;background: #95a8d2;padding-bottom: 5px;color: #32456d;WORD-BREAK: break-all;padding-top: 5px;border-bottom: #6f86bd 1px solid;letter-spacing: 0px;text-align: center;}

/* ☆PR・カレンダー・プロフィール・お友達などの枠の文字等を設定します */
.MenuBody{margin-bottom: 5px;word-break: break-all;color: #000000;}

/* ☆PR・カレンダー・プロフィール・お友達などの枠のリンクしている文字等を設定します */
a.LinkMenu{color: #6A4D8E;text-decoration: none;}
a.LinkMenu:link{color: #384FC2;text-decoration: underline;}
a.LinkMenu:visited{text-decoration: underline;}
a.LinkMenu:active{}
a.LinkMenu:hover{color: #FF0000;text-decoration: underline;}

/* ☆リンクの枠の文字や文字の横の画像を設定します */
.LinkCtgyName{background-position: 0px 4px 0px 0px;padding-left: 10px;font-size: 12px;background-image: url('/styles/images/point6x6.gif');vertical-align: middle;text-align: absmiddle;color: #000000;background-repeat: no-repeat;background-color: transparent}

/* ☆プロフィール枠の画像を設定しますが、いじると画像が大きく表示されたりします。 */
.ProfielePhoto{text-align: center;width: 175px;border: 0px;}

/* ☆プロフィール枠のニックネームの文字設定ですが、
　　　上のほうのリンクが優先されますのでこのままで。 */
.ProfieleNickname{color: #708ece;font-size: 10px;font-weight: bold;margin: 10px 0;}

/* ☆ユーザープロフィール画面でのブログ時間の文字設定ですが、
　　　どこかが(^^ゞ優先されますのでこのままで。 */
.BlogTime{margin: 0 0 10px 0;text-align: center;}

/* ☆BBS（掲示板）の文字設定だと思うのですが、何故か反映されませんのでこのままで。 */
.BBSParent{font-size: 14px;text-align: left;margin: 0 0 0px 0;line-height: 125%;padding: 2px 0px 2px 5px;background: #EDEDED;}
.BBSChild{font-size: 14px;text-align: left;margin: 0 0 0px 0;line-height: 125%;padding: 2px 0px 2px 5px;}

/* ☆パーツレビューの金額の左側の枠内の設定です　*/
.CarPriceLeft{font-size: 12px;text-align: left;margin: 0 0 15px 0;line-height: 125%;padding: 5px 5px 5px 5px;border: solid #6F86BD;border-width: 1px 1px 0px 1px;background: #95A8D2;}

/* ☆パーツレビューの金額の右側の枠内の設定です　*/
.CarPriceRight{font-size: 12px;text-align: right;margin: 0 0 15px 0;line-height: 125%;padding: 5px 5px 5px 5px;border: solid #6F86BD;border-width: 1px 0px 0px 0px;background: #DCE4F1;}

/* ☆パーツレビュー等で関連情報URLの欄の設定です　*/
.CarLink{color: #32456D;font-size: 12px;font-weight: bold;margin: 10px 0 0 0;padding: 5px 5px 5px 5px;text-align: left;background: #DCE4F1;border: solid #6F86BD;border-width: 1px 1px 1px 1px;}

/* ☆愛車紹介ページの設定ですが、下のCarTable等の設定が優先されます　*/
.CarTable{align: left;font-size: 14px;text-align: left;margin: 0 0 15px 3px;line-height: 125%;padding: 0px 0px 10px 5px;border: solid #95A8D2;border-width: 1px 1px 1px 1px;background: #FFFFFF;width: 99%;vertical-align: middle;}

/* ☆パーツレビュー等で説明欄の設定です　*/
.CarTableDetail{font-size: 14px;text-align: left;margin: 0 0 15px 3px;line-height: 125%;padding: 0px 0px 0px 0px;border: solid #FFFFFF;border-width: 1px 1px 1px 1px;background: #FFFFFF;width: 99%;vertical-align: middle;}

/* ☆整備手帳等で「前のページに戻る　次へ >>」が出る欄の設定です　*/
.CarPage{font-size: 12px;text-align: center;margin: 0 0 10px 0px;line-height: 125%;padding: 0px 0px 0px 0px;border: solid #95A8D2;border-width: 1px 1px 1px 1px;background: #FFFFFF;width: 99%;vertical-align: middle;}

/* ☆愛車紹介　カープロフィールの登録日や型式の枠　
　　パーツレビューや整備手帳の　ページ数の枠　などを設定します　*/
.CarTableColor{background: #DCE4F1;}

/* ☆パーツレビューや整備手帳のページの文字などを設定します　*/
.CarTableColorActive{background: #FFFFFF;}

/* ☆愛車紹介の枠内の設定です　*/
.CarPlate{border-left:0px solid #95A8D2; border-right:0px solid #95A8D2; border-top:0px solid #95A8D2; border-bottom:0px solid #95A8D2; font-size: 14px;text-align: left;line-height: 125%;padding: 0px;background: #FFFFFF;color: #000000;word-break: break-all; margin-left:0; margin-right:0; margin-top:0; margin-bottom:15px}