CSS（フォント編）第４回コンポーネント領域のフォント♪ きまぐれAWA's Life/ウェブリブログ

CSS（フォント編）第４回コンポーネント領域のフォント♪

<< 作成日時： 2008/02/22 20:06 >>

今回はコンポーネント領域のフォントのデザインの指定位置です♪

　コンポーネント領域のフォント♪　

コンポーネント領域の各ポンインごとにデザインの指定をしていきます。
今回は各ポイントでフォントの色とサイズを変えます。
デザインの指定は各ポイントのあとに文字列を追加、
無い場合には新規で文字列を入力していきます。
試しにデザインを指定してみますね。

　見出し部分
コンポーネント領域内の全ての見出し文字です。　

/* コンポーネント見出し(共通) */
#utilities h2{
font-size:120%;
color:#FF0000;
}

● 赤 size:120％

　新着記事、コメント、テーマのリンク文字
新着記事、コメント、テーマのリンク文字です。　

/* 追加　コンポーネント内リスト（リンク） */
#utilities ul a{
font-size:100%;
color:#009900;
}

● 緑 size:100％

　カレンダー
★ カレンダーの『月』部分（リンク文字） ● 青 size:130％

/*追加　年月（リンク） */
#utilities #calendar table caption a{
font-size:130%;
color:#0000FF;
}

★ カレンダーの『曜日』部分です。 ● 黄緑 size:70％

/* 曜日 */
#utilities #calendar th{
font-size:70%;
color:#00FF00;
}

★カレンダーの『日付』部分（リンク文字） ● 水色 size:100%

/* 追加　日（リンク） */
#utilities #calendar td a{
font-size:100%;
color:#00CCFF;
text-decoration:none;
}
#utilities #calendar td a:hover{color:#FF0000;}

※ 少し手を加えてみました。
『text-decoration:none;』を追加すると日付の下線がなくなります。
また、『#utilities #calendar td a:hover』を追加すると、
ポインタを置いた時に下の図のように文字の色が変わります。

　フリースペース
フリースペース（１）の文字です。　

/* ●フリースペース */
#utilities #freespace{
font-size:100%;
color:#FF33FF;
}

                                                        ● ピンク size:100％

※フリースペースで文字を表示をする場合に限ります。
  今回はフリースペース（１）での設定です。
   フリースペース（２）及び（３）は別の設定が必要になります。

※フリースペースの文字は基本表示設定（ブログ紹介編集）でもデザインの指定が出来ます。
   ここはCSS編集でデザイン指定しなくても、強調・色・大きさなど記事を書く時と同じように
   タグを使用しての入力でもオーケーです。
☆フリースペースでの文字デザインについて記事を書きました。
参照　CSS（おまけ編）ウェブリブログでパンヤの絵文字～フリースペースの活用♪

　新着記事投稿日時
新着記事投稿日時です。

/* 追加　新着記事投稿日時 */
#utilities ul {
font-size:100%;
color:#CC3399;
}

● 紫 size:100％

※新規で加える文字列の追加場所は下記を参考にしてください。
※フォントサイズは参考値です。数値はお好みで（ん）
※フォント以外のデザイン指定の記述は省略しています。

【追記】
※リンク文字については第３回リンクの付いているフォント♪ 【再編集】の設定でも指定できます。
ここでのリンク文字の変更は個別にデザインを指定したい場合だけ追加します。

　B 『トップ、月別、テーマ別ページ』　 CSS 全体Map

/*-------------- コンポーネント群 --------------*/
#utilities{
}

/* コンポーネント見出し(共通) */
#utilities h2{
font-size:■%;
color:●;
}

/* コンポーネント内リスト(共通) */
#utilities ul{
}

/* 追加　コンポーネント内リスト（リンク） */
#utilities ul a{
font-size:■%;
color:●;
}

/* ●カレンダー */
#utilities #calendar{
}

/* 年月 */
#utilities #calendar table caption{
border-bottom:1px #FFCCFF solid;
}

/*追加　年月（リンク） */
#utilities #calendar table caption a{
font-size:130%;
color:#0000FF;
}

/* 曜日 */
#utilities #calendar th{
font-size:■%;
color:●;
}

/* 追加　日（リンク） */
#utilities #calendar td a{
font-size:■%;
color:●;
text-decoration:none;
}
#utilities #calendar td a:hover{color:●;}

/* ●テーマカテゴリ */
#utilities #categories{
}

/* ●アルバム */

/* サムネイル画像 */
#utilities #albums a img{
}

/* ●フリースペース */
#utilities #freespace{
font-size:■%;
color:●;
}

/* トラックバック数／コメント数 */
.response{
}

/* 投稿日時 */
.date{
}

/* 追加　新着記事投稿日時 */
#utilities ul {
font-size:■%;
color:●;
}