CSS（フォント編）第２回トップページのフォント♪　『新着記事一覧』きまぐれAWA's Life/ウェブリブログ

CSS（フォント編）第２回トップページのフォント♪　『新着記事一覧』

<< 作成日時： 2008/02/17 01:42 >>

トラックバック 0 / コメント 0

今回は新着記事一覧の所に目を向けてみますね♪
この記事は『ここに書き込めばここが変わるよ』ということの確認みたいなものです。

　新着記事一覧のフォント♪　

新着記事部分の各ポンインごとで、フォントのサイズや色などのデザイン指定ができます。
今回は色のみの変更していきますので、各ポイントに文字列を追加していきます。

☆ ここの部分です

１．『/* 見出し */』　■ 赤
#contents #postlist h2{

２．『/* 一覧ヘッダセル */』　■ 緑
#contents #postlist th{

3．『/* 一覧概要表示 */』　■ 青
#contents #postlist td{

次の二つはデフォルトで記述が無かったので文字列を新規入力しました。

4．『リンクの付いているフォント』　■ 紫
適当な位置に下の文字列を追加

#contents #postlist a{
color:■;
}

5．『記事投稿日時のフォント』　■ 黄緑
以前、『記事の題名』のアイコンの変更した際に追加した文字列の部分です。
無ければ以下文字列を新規で追加します。

#contents #postlist td.date{
color:■;
}

※デザインテンプレートを選択していれば、その設定が反映されています。
フォントのサイズ・色など一度に指定しなくても全く問題ありません。
『色だけ』とかデザインの変更したい部分だけ追加していく形でいいと思います。

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

/*------------------ 新着記事 ------------------*/
#contents{
}

/* 見出し */
#contents #postlist h2{
color:■;
}

/* 一覧ヘッダセル */
#contents #postlist th{
color:■;
}

#contents #postlist a{
color:■;
}

/* 一覧データセル */
#contents #postlist td{
}

/* 一覧概要表示 */
#contents #postlist blockquote{
color:■;
}

/* 月別リンク項目 */
#contents #archives li{
}
#contents #postlist td.date{
color:■;
}

各箇所の変更のためのポイントは以上です（ん）
色分けでだいたい位置がつかめるかと思います。

☆　変更した箇所の文字色を確認♪

　リンクつきのフォント♪　

上ではリンクのついたフォントを一括で色の変更をしていますが、
これを『未訪問のリンク』『訪問済のリンク』と個々に色分けをすることもできます。
　
『未訪問のリンク』は【a:link】　■ 紫
『訪問済のリンク』は【a:visited】　■ 茶

また、マウスのポインタをリンクの上に置いたときに色を変えるのであれば、
【a:hover】という文字列を使用します。　■ 赤

『 4．リンクの付いているフォント』の文字列の替わりに下の文字列を追加します。

#contents #postlist a:link{ color:■;},
#contents #postlist a:visited{ color:■;},
#contents #postlist a:hover{ color:■;}

上のように色分けしてみました

☆　こんな感じです♪