VGトマのブログ一覧

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

前の第５弾までは >>11 とかで案内していましたが・・・・
実に見にくい・・・・(^^ゞ　ので　廃止します(^^ゞ

第６弾はリンクしているタイトルの設定以降をづらづら。

/* ☆ My掲示板のリンクしている投稿者名の設定です　*/
a.LinkBBSTitle{ color: #6A4D8E; text-decoration: underline;}
a.LinkBBSTitle:link{color: #384FC2;text-decoration:underline;}
a.LinkBBSTitle:visited{color: #384FC2;text-decoration:underline;}
a.LinkBBSTitle:active{}
a.LinkBBSTitle:hover{color: #FF0000;text-decoration:underline;}
a.LinkBBSHandleName{color: #6779C5;text-decoration:underline;}
a.LinkBBSHandleName:link{color: #6779C5;text-decoration:underline;}
a.LinkBBSHandleName:visited{color: #6779C5;text-decoration:underline;}
a.LinkBBSHandleName:active{}
a.LinkBBSHandleName:hover{color: #FF0000;text-decoration:underline;}

/* 未使用だと思いますが、このままで　*/
.ClTitleBlog
{margin-top: 8px;margin-bottom: 10px;text-align: center;}

/* ☆ヘッダー（みんカラメニューのすぐ下にある部分）の設定です。*/
/* ロードスター仕様のような画像もここで設定します　*/
#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 a{color: #fff;text-decoration: none;}
#Header a:link{color: #fff;text-decoration: none;}
#Header a:visited{text-decoration: none;}
#Header a:active{}
#Header a:hover{color: #fff;text-decoration: underline;}

/* ☆ページの最下段（みんカラの広告の上のところ）を#Footer で設定します */
#Footer{background: url('/styles/images/header.jpg') no-repeat;width: 750px; height: 20px}

/* ☆見出しの定義で H1 H2 H3 と有るのですが、そのスタイルの設定です */
H1{padding-right: 0px;padding-left: 0px;padding-bottom: 0px; margin: 0px;padding-top: 0px;}
H2{padding-right: 0px;padding-left: 0px;padding-bottom: 0px;margin: 0px 0 4px 0;padding-top: 0px;}
H3{padding-right: 0px;padding-left: 0px;padding-bottom: 0px; margin: 5px 0px 10px 0px;padding-top: 0px;}

/* ☆#Header から ＃Footerまでのユーザー利用部分を設定します */
#Foundation{width:750;margin: 0 auto 0 auto;text-align: left;}

/* ☆ユーザー利用部分のカレンダーやプロフィールやお友達などが有る場所のスタイルを設定します */
/* プロフィールページを除きます。 */
#BlogMenu{width: 190px;float: right;margin: 5 auto 0 auto;}

/* ☆ユーザー利用部分のスタイルを設定します */
/* プロフィールページを除きます。 */
#Content{float: left;width: 550px;margin: 5 auto 0 auto;font-size: 14px;}

/* ☆掲示板ページのユーザー利用部分のスタイルを設定します */
#BBSContent{width: 750px;margin: 5 auto 0 auto;font-size:14px;}

/* ☆プロフィールタイトル（ユーザー利用部分の一番上に出る文字）を設定します */
.BlogTitle{font-weight: bold;font-size: 24px;}

/* ☆ブログ表示部全体を設定します */
.BlogPlate{margin-top: 0px;}

/* ☆ブログのタイトル日付を設定します */
.BlogDate{color: #5170B2;font-size: 14px;font-weight: bold;
margin: 0px 0px 5px 0px;border-bottom: 1px solid #0871e3;padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:1px}

/* ☆ブログ本文内のTEXT部文を設定します */
.BlogBody{padding: 2px 0 0px;line-height: 130%;word-break:break-all;}

/* ☆ブログのタイトルを設定します */
.Title{background-position: 0px 2px 0px 0px;margin: 0px 0px 10px 0px;padding-left: 16px;font-weight: bold;font-size: 16px;background-image: url('/styles/images/point12x12.gif');vertical-align: middle;color: #404040;background-repeat: no-repeat;background-color: transparent}

/* ☆プロフィールページの目次を設定します */
.ProfileTitle{background-position: 0px 0px 0px 0px;margin: 0px 0px 9px 0px;padding-left: 16px;font-weight: bold;font-size: 14px;background-image: url('/styles/images/point12x12.gif');vertical-align: middle;color: #202020;background-repeat: no-repeat;background-color: transparent}

/* ☆ブログ本文内の文字を設定します */
.BlogText{font-size: 14px;padding-bottom: 20px;color: #000000;}

/* ☆ブログの投稿時間やコメント数トラバ数表示の文字を設定します */
.BlogPosted{padding-right: 0px;padding-left: 0px;font-size: 12px;padding-bottom: 8px;color: #333333;padding-top: 8px; text-align: right;}

/* ☆ブログのコメントとトラックバックなどのリンクを設定します　*/
/* 下の方のa.LinkTrackBack-postなどが優先されますのでわかりにくいです */
a.LinkPosted{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkPosted:link{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkPosted:visited{text-decoration: none;font-weight: bold;}
a.LinkPosted:active{font-weight: bold;}
a.LinkPosted:hover{color: #3a3b40;text-decoration: none;font-weight: bold;}

/* ☆ブログ本文中のトラックバックURLの文字を設定します　*/
.TrackBackUrl{color: #5170B2;font-size:12px;font-weight: bold;margin: 10px 0px 15px 15px;}

/* ☆ブログ本文中のトラックバックを受けた際に表示されるボックスを設定します　*/
.TrackBackBlock{border-right: lightsteelblue 1px solid;border-top: lightsteelblue 1px solid;margin-bottom: 10px;margin-left: 15px;margin-top: 10px;padding-right: 9px; padding-left: 10px;padding-top: 7px;padding-bottom: 3px; border-left: lightsteelblue 1px solid; border-bottom: lightsteelblue 1px solid;background-color: #f2f7fc;}

/* ☆ブログ本文中のトラックバックを受けた際に表示されるボックス内の文字を設定します　*/
.TrackBackBody{font-size: 12px;color: #454E5A;line-height:135%;
}

/* ☆トラックバックされた時間を設定します　*/
.TrackBackPost{color: #708ece;font-size: 10px;text-align: right;}

/* ☆トラックバックのリンク関連を設定します　*/
a.LinkTrackBack-post{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkTrackBackPost:link{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkTrackBackPost:visited{text-decoration: none;font-weight: bold;}
a.LinkTrackBackPost:active{font-weight: bold;}
a.LinkTrackBackPost:hover{color: #3a3b40;text-decoration: underline;font-weight: bold;}

とちあえず　今日はこれで終わりづら・・・・。

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

11>> a
12>> {
13>> color: #6A4D8E;
14>> text-decoration: none;
15>> }
16>> a:link
17>> {
18>> color: #384FC2;
19>> text-decoration: underline;
20>> }
21>> a:visited
22>> {
23>> text-decoration: underline;
24>> }
25>> a:active
26>> {
27>> }
28>> a:hover
29>> {
30>> color: #FF0000;
31>> text-decoration: underline;
32>> }
など、" { "と" } "の前にあるセレクタの意味を解説していきます。
改行は略してあります。
☆ 11>> a {color: #6A4D8E; text-decoration: none; }
…リンクを設定してある文字を指定します。
　ただ、下記の「link visited active hover」項目が優先されます。　
☆ 16>> a:link {color: #384FC2;text-decoration: underline;}
… リンクしている文字を指定します。ここでは、色は#384FC2で、下線を引くとなってます。
☆ 21>> a:visited {text-decoration: underline;}
… リンクしている文字でアクセス済を指定しています。
☆ 25>> a:active {}
… クリックした瞬間を指定しています。
☆ 28>> a:hover {color: #FF0000; text-decoration: underline; }
… マウスポインタが上に有る時を指定しています。

{ "と" } "の中は、その弐　テキスト　フォントに記載していますプロパティや、
その四記載内容の解説の下の方に記載した　backgroundの背景色なども指定出来ます。

33>>から37>>までのカレンダー表示の領域ですが、
☆ 33>> a.LinkCalendar{color: #708ece;text-decoration: none;font-weight: bold;}
☆ 34>> a.LinkCalendar:link{color: #708ece;text-decoration: none;font-weight: bold;}
☆ 35>> a.LinkCalendar:visited{text-decoration: none;font-weight:bold;}
☆ 36>> a.LinkCalendar:active{}
☆ 37>> a.LinkCalendar:hover{color: #3a3b40;text-decoration:underline;font-weight: bold;}
下のほうに有る a.linkCalendar～で設定される部分が優先されるので変更しません。

38>>から42>> はブログページの時に、リンクしているタイトルの設定です。
:link :visited :active :hover は>>11から>>32までの設定と同じです。
☆ 38>> a.LinkTitle{color: #6A4D8E;text-decoration: none;}
☆ 39>> a.LinkTitle:link{color: #384FC2;text-decoration: underline;}
☆ 40>> a.LinkTitle:visited{text-decoration: underline;}
☆ 41>> a.LinkTitle:active{}
☆ 42>> a.LinkTitle:hover{color: #FF0000;text-decoration: underline;}

まだまだ続きます(^^ゞ

スタイル管理のブログ カラーテーブル　テキスト　フォント　基本のスタイルシートに引き続き、
スタイルシート記載内容の解説です。

まずは、
■まさ姐■さんのブログ内コメント引用ですが(^^ゞ
「１度にたくさん弄ってしまうと不具合でた時にどこがおかしいのか判らなくなるので
ひとつずつ変更していく事をおすすめするですよ。」
無断引用失礼しますm(__)m

さてさて、基本のスタイルシートでワケのわからないコピー＆ペーストをされたと思いますが、記載されているお約束について解説します。

最初の
1>> body
2>> {
3>> padding-right: 2px;
4>> padding-left: 2px;
5>> background: #ffffff;
6>> padding-bottom: 2px;
7>> margin: 0px;
8>> padding-top: 8px;
9>> text-align: center;
10>> }
を例にします。

☆ 1>> body　
この部分は、これから定義するのはbody（表示される全体ページ）だよ。と宣言します(^^ゞ。
（このbodyの部分はセレクタと言いますが、別途解説していきます。）
宣言するのは 「2>>」に有る" { "から「10>>」の" } "の範囲です。
" { "や" } "は削除しないように注意してください。
また、
body {padding-right: 2px;padding-left: 2px;background: #ffffff;padding-bottom: 2px;margin: 0px;padding-top: 8px;text-align: center;}
などと一行にしても同じなのですが、" { "や" } "を忘れたり消しちゃったりすると、
めちゃくちゃになると思いますので、別の行にしておくと便利です(^^ゞ

☆ 3>> padding-right: 2px;
右側の間隔は 2ピクセルだよ。と伝えます。
padding-right（プロパティ）:（ここから指定） 2px（指定値）;（プロパティのはここまで）
と成ってまして、" : " と　" ; " も重要です。　
、英数字の" : " と　" ; "ですので、全角の"：" "；" では有りませんし、順番に注意してください。
不具合が出た時に一番わかりにくいです。

☆ 4>> padding-left: 2px;
左側の間隔は 2ピクセルだよ。と伝えます。

☆ 5>> background: #ffffff;
背景色は 白だよ。と伝えます。黒だと、background: #000000; となります。
★また、背景画像を使いたい時には、
background: url('http://画像の置いてある場所');
或いは、
background-image: url('http://画像の置いてある場所');　と記載します。
背景の表示方法も変えられます。
上の例では、画面サイズいっぱいに繰り返しますが、
上下左右の真ん中に一回だけの表示では、
background: url('http://画像の置いてある場所') no-repeat center;
縦に繰り返し表示し、真ん中に表示したいときは、
background: url('http://画像の置いてある場所') repeat-y center;
などになります。

☆ 6>> padding-bottom: 2px;
下部の間隔は 2ピクセルだよ。と伝えます。

☆ 7>> margin: 0px;
上下左右の間隔は0ピクセルだよ。と伝えます。

★この「margin」プロパティは、まとめて上下左右の間隔を指定する際に使用します。
上下左右を違うマージン幅にする時は、スペース（全角は駄目）で区切り指定します。
margin: 0px;　上下左右　0ピクセル
margin: 0px 5px;　上下 0ピクセル 左右 5ピクセル
margin: 0px 5px 7px;　上 0ピクセル 左右 5ピクセル 下 7ピクセル
margin: 0px 5px 7px 9px;　上 0ピクセル 右 5ピクセル 下 7ピクセル 左 9ピクセル
となりますので、ご注意ください。
「padding」も「margin」と同じように一括して指定出来るのですが、
上のように、上下左右の順番がめんどくさいです(^^ゞ

「margin」は領域の間の間隔で「padding」は領域内の間隔です。(^^ゞ(^^ゞ
「margin」はマイナスが可能ですが、「padding」は駄目です。



背景色が付いている領域と文字の位置を見て頂き、
なんとなくご理解ください(^^ゞ

☆ 8>> padding-top: 8px;
上部の間隔は 2ピクセルだよ。と伝えます。

☆ 9>> text-align: center;
文字表示の位置設定で中央揃えだよ。と伝えます。
スタイルシート　その弐　テキスト　フォント
の(G)を参照くださいませ～。

★この bodyで、背景色や背景画像などや、上記の3 4 6 7 8 9　に
変更が無い場合には
body
{
}
と全て省略したり
例えば背景を青に変更したいだけの時は、
body
{
background: #0000ff;
}
などとする事も出来ます。
また変更したいところだけを記載してもＯＫですが、
ネットスケープのバージョンによっては、
paddingとかmarginの扱いが違ったりしますので、
残しておきましょう。

★このスタイルシートの中で、ご自身でコメントなどを入れたい時は
「 / 」から次のスラッシュ「 / 」までの間に書いてください。
ただ、どこからどこまでの範囲がわかりにくくなりますので、
始まりは「 /* 」、終わりは「 */ 」などとしましょう。
例としてはこんな感じです。
/* ここにコメントなどを入れられます。改行とかもＯＫ */

いじった部分にコメントを入れておくと後からチェックしやすいので
お試しください。

スタイル管理のブログ カラーテーブル　テキスト　フォントに続き、第３弾　実践編です。

スタイル管理　クリック→　カスタマイズ1　或いは　カスタマイズ2 にチェックして
スタイル編集ボタンを押します。

表示されるテキストボックスの中で、
下記の長～い
「/* ----ここまで----*/」「/* ----ここまで----*/」
の行をコピー＆ペーストします。

これは、「スペシャル」や「カスタマイズ」を選んでいる方以外は、
みんカラで用意された「シンプル」と同じですのでご安心ください(^^ゞ

「プレビュー」と「保存する」ボタンが有りますが、
まずは「プレビュー」を押して、確認してください。
そこで、変わってない事を確認しましたら、
「保存する」ボタンを押してください。
次に「選択したスタイルに変更」ボタンを押すと、表示方法が変更されます。
（ここまでで、特にミスが無ければ何も変わらないのですが）

「保存する」ボタンを先に押してしまって、変な表示が出てしまっても
「選択したスタイルに変更」ボタンを押さなければ変わりませんし、
押してしまっても、この段階で有れば、スタイル管理の編集画面で、
「シンプル」をチェックし、「選択したスタイルに変更」ボタンを押せば
初期の状態に戻ります。

/* ----ここから----*/
/* ☆表示される全体ページをbody で設定します　*/
body
{
padding-right: 2px;
padding-left: 2px;
background: #ffffff;
padding-bottom: 2px;
margin: 0px;
padding-top: 8px;
text-align: center;
color: #000000;
}

/* ☆ a はリンクを設定してある文字を指定し、「link visited active hover」項目が優先されます。
　　　また、下記で出てくる項目が有れば、個別に指定しているのが優先されます。　*/
/* ★ a:link はリンクしている文字を指定します。
　　　a:visited はリンクしている文字でアクセス済を指定します。
　　　a:active はクリックした瞬間を指定しす。
　　　a:hover はマウスポインタが上に有る時を指定します。*/

a
{
color: #6A4D8E;
text-decoration: none;
}
a:link
{
color: #384FC2;
text-decoration: underline;
}
a:visited
{
text-decoration: underline;
}
a:active
{
}
a:hover
{
color: #FF0000;
text-decoration: underline;
}

/* ☆カレンダー表示リンクでの設定ですが、下のほうに有る a.linkCalendar～で設定される部分が優先されるので変更しません。*/
a.LinkCalendar{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkCalendar:link{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkCalendar:visited{text-decoration: none;font-weight:bold;}
a.LinkCalendar:active{}
a.LinkCalendar:hover{color: #3a3b40;text-decoration:underline;font-weight: bold;}

/* ☆ブログページのリンクしているタイトルの設定です */
a.LinkTitle{color: #6A4D8E;text-decoration: none;}
a.LinkTitle:link{color: #384FC2;text-decoration: underline;}
a.LinkTitle:visited{text-decoration: underline;}
a.LinkTitle:active{}
a.LinkTitle:hover{color: #FF0000;text-decoration: underline;}

/* ☆ My掲示板のリンクしている投稿者名の設定です　*/
a.LinkBBSTitle{ color: #6A4D8E; text-decoration: underline;}
a.LinkBBSTitle:link{color: #384FC2;text-decoration:underline;}
a.LinkBBSTitle:visited{color: #384FC2;text-decoration:underline;}
a.LinkBBSTitle:active{}
a.LinkBBSTitle:hover{color: #FF0000;text-decoration:underline;}
a.LinkBBSHandleName{color: #6779C5;text-decoration:underline;}
a.LinkBBSHandleName:link{color: #6779C5;text-decoration:underline;}
a.LinkBBSHandleName:visited{color: #6779C5;text-decoration:underline;}
a.LinkBBSHandleName:active{}
a.LinkBBSHandleName:hover{color: #FF0000;text-decoration:underline;}

/* 未使用だと思いますが、このままで　*/
.ClTitleBlog
{margin-top: 8px;margin-bottom: 10px;text-align: center;}

/* ☆ヘッダー（みんカラメニューのすぐ下にある部分）の設定です。*/
/* ロードスター仕様のような画像もここで設定します　*/
#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 a{color: #fff;text-decoration: none;}
#Header a:link{color: #fff;text-decoration: none;}
#Header a:visited{text-decoration: none;}
#Header a:active{}
#Header a:hover{color: #fff;text-decoration: underline;}

/* ☆ページの最下段（みんカラの広告の上のところ）を#Footer で設定します */
#Footer{background: url('/styles/images/header.jpg') no-repeat;width: 750px; height: 20px}

/* ☆見出しの定義で H1 H2 H3 と有るのですが、そのスタイルの設定です */
H1{padding-right: 0px;padding-left: 0px;padding-bottom: 0px; margin: 0px;padding-top: 0px;}
H2{padding-right: 0px;padding-left: 0px;padding-bottom: 0px;margin: 0px 0 4px 0;padding-top: 0px;}
H3{padding-right: 0px;padding-left: 0px;padding-bottom: 0px; margin: 5px 0px 10px 0px;padding-top: 0px;}

/* ☆#Header から ＃Footerまでのユーザー利用部分を設定します */
#Foundation{width:750;margin: 0 auto 0 auto;text-align: left;}

/* ☆ユーザー利用部分のカレンダーやプロフィールやお友達などが有る場所のスタイルを設定します */
/* プロフィールページを除きます。 */
#BlogMenu{width: 190px;float: right;margin: 5 auto 0 auto;}

/* ☆ユーザー利用部分のスタイルを設定します */
/* プロフィールページを除きます。 */
#Content{float: left;width: 550px;margin: 5 auto 0 auto;font-size: 14px;}

/* ☆掲示板ページのユーザー利用部分のスタイルを設定します */
#BBSContent{width: 750px;margin: 5 auto 0 auto;font-size:14px;}

/* ☆プロフィールタイトル（ユーザー利用部分の一番上に出る文字）を設定します */
.BlogTitle{font-weight: bold;font-size: 24px;}

/* ☆ブログ表示部全体を設定します */
.BlogPlate{margin-top: 0px;}

/* ☆ブログのタイトル日付を設定します */
.BlogDate{color: #5170B2;font-size: 14px;font-weight: bold;
margin: 0px 0px 5px 0px;border-bottom: 1px solid #0871e3;padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:1px}

/* ☆ブログ本文内のTEXT部文を設定します */
.BlogBody{padding: 2px 0 0px;line-height: 130%;word-break:break-all;}

/* ☆ブログのタイトルを設定します */
.Title{background-position: 0px 2px 0px 0px;margin: 0px 0px 10px 0px;padding-left: 16px;font-weight: bold;font-size: 16px;background-image: url('/styles/images/point12x12.gif');vertical-align: middle;color: #404040;background-repeat: no-repeat;background-color: transparent}

/* ☆プロフィールページの目次を設定します */
.ProfileTitle{background-position: 0px 0px 0px 0px;margin: 0px 0px 9px 0px;padding-left: 16px;font-weight: bold;font-size: 14px;background-image: url('/styles/images/point12x12.gif');vertical-align: middle;color: #202020;background-repeat: no-repeat;background-color: transparent}

/* ☆ブログ本文内の文字を設定します */
.BlogText{font-size: 14px;padding-bottom: 20px;color: #000000;}

/* ☆ブログの投稿時間やコメント数トラバ数表示の文字を設定します */
.BlogPosted{padding-right: 0px;padding-left: 0px;font-size: 12px;padding-bottom: 8px;color: #333333;padding-top: 8px; text-align: right;}

/* ☆ブログのコメントとトラックバックなどのリンクを設定します　*/
/* 下の方のa.LinkTrackBack-postなどが優先されますのでわかりにくいです */
a.LinkPosted{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkPosted:link{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkPosted:visited{text-decoration: none;font-weight: bold;}
a.LinkPosted:active{font-weight: bold;}
a.LinkPosted:hover{color: #3a3b40;text-decoration: none;font-weight: bold;}

/* ☆ブログ本文中のトラックバックURLの文字を設定します　*/
.TrackBackUrl{color: #5170B2;font-size:12px;font-weight: bold;margin: 10px 0px 15px 15px;}

/* ☆ブログ本文中のトラックバックを受けた際に表示されるボックスを設定します　*/
.TrackBackBlock{border-right: lightsteelblue 1px solid;border-top: lightsteelblue 1px solid;margin-bottom: 10px;margin-left: 15px;margin-top: 10px;padding-right: 9px; padding-left: 10px;padding-top: 7px;padding-bottom: 3px; border-left: lightsteelblue 1px solid; border-bottom: lightsteelblue 1px solid;background-color: #f2f7fc;}

/* ☆ブログ本文中のトラックバックを受けた際に表示されるボックス内の文字を設定します　*/
.TrackBackBody{font-size: 12px;color: #454E5A;line-height:135%;
}

/* ☆トラックバックされた時間を設定します　*/
.TrackBackPost{color: #708ece;font-size: 10px;text-align: right;}

/* ☆トラックバックのリンク関連を設定します　*/
a.LinkTrackBack-post{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkTrackBackPost:link{color: #708ece;text-decoration: none;font-weight: bold;}
a.LinkTrackBackPost:visited{text-decoration: none;font-weight: bold;}
a.LinkTrackBackPost:active{font-weight: bold;}
a.LinkTrackBackPost:hover{color: #3a3b40;text-decoration: underline;font-weight: bold;}

/* ☆カレンダーの上の枠を設定します */
.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}

/* ☆愛車紹介のプロフィールタイトルの設定です　*/
.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%;}

/* ----ここまで----*/

スタイル管理のブログ カラーテーブルに続き、第２弾です。

スタイルシートで使うプロパティで、fontとtextのメモです。
比較的使われているのを記載しますが、みんカラで使えないとか、
すでに使えないのとかも入っているかも知れません。(^^ゞ

★文字に関するプロパティで　fontプロパティは、
フォントの指定をまとめて行う時に使用します。
指定できるのは、
　　(A-1)font-style: スタイルを指定します。
　　　　　　normal 標準フォント
　　　　　　italic イタリック体フォント
　　　　　　oblique　斜体フォント
　　(A-2)font-variant: 大文字のサイズを変更出来ます。
　　　　　　normal 標準
　　　　　　small-caps　小文字のサイズで大文字での表示など。
　　(A-3)font-weight: 文字の太さを指定します。
　　　　　　normal　標準
　　　　　　bold　太字
　　　　　　lighter　一段階細く
　　　　　　bolder　一段階太く
　　(B)font-size:　　大きさを次の３つの方法で指定出来ます。
　　　　　　(1)数値と単位で指定　pxなどの単位でモニタの解像度により変化します
　　　　　　(2)％値で指定します。
　　　　　　(3)xx-small、x-small、small、medium、large、x-large、xx-largeの7段階で指定します。
　　　　　　 smaller、largerを指定すると1段階上下します。
　　(C)line-height:　　高さを次の４つの方法で指定出来ます。
　　　　　　(1)normal　ブラウザが判断します。初期値です。
　　　　　　(2)数値と単位で指定　pxなどの単位でモニタの解像度により変化します
　　　　　　(3)数値のみで指定　数値にフォントのサイズを掛けた値が行の高さとなります。
　　　　　　(4)％で指定　％値で指定します。
　　(D)font-family:　　フォントの種類で指定します。値は次の２つの方法で指定します。
　　　　　　(1)フォント名　ＭＳ ゴシックやＭＳ 明朝のようにフォント名で指定します。
　　　　　　 フォント名にスペースが含まれている場合には、(") や(')で囲みます。
　　　　　　(2)キーワードで指定　種類を表すキーワードで指定します。
　　　　　　　　ゴシック系　sans-serif　明朝系　serif 筆記体・草書体　cursive
　　　　　　　　装飾的なフォント　fantasy　等幅フォント　monospace
　　以上6つのプロパティ値です。
　　一括して font: bold medium 'ＭＳ ゴシック','ＭＳ 明朝'; } などと設定出来ますが、
　　A-B-C-Dの順に記載し、font-sizeと font-familyは 省略できません。

★文章に関するプロパティがtextです。fontとややこしいのですが・・・。
　　(E)line-height:　行の高さを指定 (C)と同じ使用法です。
　　(F)text-align:　行揃えの位置や均等割付を指定します。
　　　　　　left　左寄せ
　　　　　　right　右寄せ
　　　　　　center　中央揃え
　　　　　　justify　均等割付
　　(G)vertical-align:　縦（上下）方向の揃え位置を指定
　　　　　　数値や％での指定も出来ますが下記のコマンドが有ります。
　　　　　　baseline　ベースライン揃え
　　　　　　top　上揃え
　　　　　　middle　中央揃え
　　　　　　bottom　下揃え
　　　　　　text-top　テキストの上端揃え
　　　　　　text-bottom　テキストの下端揃え
　　　　　　super　上付き文字揃え
　　　　　　sub　下付き文字揃え　
　　(H)text-decoration:　文章への装飾です。
　　　　　　none　初期値（何も無し）
　　　　　　underline　下線
　　　　　　overline　上線
　　　　　　line-through　打消線
　　　　　　blink　点滅　
　　(I)text-indent:　一行目のインデント幅を指定　数値と単位や％で指定します（B)の(1)(2)と同じです。
　　(J)text-transform:　大文字表示・小文字表示を指定します。
　　　　　　capitalize　先頭大文字
　　　　　　lowercase　全て小文字
　　　　　　uppercase　全て大文字　
　　(K)white-space:　スペース・タブ・改行の表示の仕方を指定します。
　　　　　　normal　連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。
　　　　　　　　ボックスの大きさが指定されている時は、それに応じて自動改行します。
　　　　　　pre　連続する半角スペース・タブ・改行を、そのまま表示。
　　　　　　nowrap　連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。
　　　　　　　　ボックスの大きさが指定されていても、自動的に改行しません。
　　(L)letter-spacing:　文字の間隔を指定
　　　　　　normal　標準の間隔。 或いは、数値と単位で指定します。（B)の(1)と同じです。
　　(M)word-spacing:　単語の間隔を指定
　　　　　　normal　標準の間隔。 或いは、数値と単位で指定します。（B)の(1)と同じです。