きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(フォント編)第2回 トップページのフォント♪ 『新着記事一覧』

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

ブログ気持玉 0 / トラックバック 0 / コメント 5

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




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

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




1.『/* 見出し */』 ■ 赤
#contents #postlist h2{

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

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

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

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:■;}




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








今回は新着記事一覧の部分のフォントでした。
次回はコンポーネント領域に移ります。



それでは、今回はこのくらいで(わら)


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(5件)

内 容 ニックネーム/日時
突然お邪魔します。
ブログを編集するのに、何度もこちらのブログをよく参考にさせてもらっています。(@ぺこ)
新着記事のところのフォントの変更についてなんですが、『リンクの付いてるフォント』の中の、「ちょっとイメチェン♪」の部分だけ、色や文字のサイズを変える(大きくしたい)、、、なんて事はできないでしょうか?
ずっと変えたいな、と思っていたのですが、方法が分かりませんでした。
もしやり方があったら、教えて下さい。(@かなし)
このコメント欄で聞いてしまって、ご迷惑だったらごめんなさい。
えんぴつ
2011/12/10 20:24
えんぴつさんいらっしゃいませ(にや)
コメントはどこに書いてもらってもOKです(ん)
お気軽にご質問ください(oゝω・)b^☆NE!

さて、ご質問の「ちょっとイメチェン♪」の部分ですね。
新着記事に表示される記事タイトルのトコロのデザイン指定ですが、
ここだけ決め打ちで指定するのは出来ません。
そこでちょっと工夫して『他の領域も含めて大きく記事タイトル部分以外を小さくする』という指定の仕方をしてみます。
以下の文字列を『新着記事 』の辺りにコピーして新規で書き込んで見てください。

/* 一覧データセル【記事一覧セル全体のリンク文字】*/
#contents #postlist td a{
font-size:110%;
font-weight:bold;
}

/* 一覧概要表示 【記事本文部分のリンク文字『…続きを見る』】*/
#contents #postlist blockquote a{
font-size:100%;
font-weight:normal;
}
/* レスポンス 【リンク文字『ブログ気持玉数/トラックバック数/コメント数』】*/
#contents #postlist .response a{
font-size:100%;
font-weight:normal;
}

ここまでです(oゝω・)b
mairis
2011/12/11 20:00
補足説明を書いておきますね(ん)
「#contents #postlist td a」で新着記事セル全体の文字を「font-size:110%;」で大きくしています。
「font-weight:bold;」は太字にする指定になりますが要らなければ書きこまなくてもOKです。
それから「#contents #postlist .response a」と「#contents #postlist .response a」でその他のリンク文字のサイズを元に戻す指定をします。」
「font-weight:normal;」は太字を元に戻す指定になりますが太字にしなかった場合は書きこまなくてOKです。

これで記事タイトル部分だけ文字サイズが大きくなります。
ここでは「%」で文字サイズの指定をしましたが、「px」で直接大きさを指定しても構いません。
ちなみに現在うちのブログの新着記事のところは同じような指定がしてあって、タイトル文字だけ太字になってます。
mairis
2011/12/11 20:01
さっそく教えてくださって、ありがとうございます。
自分のブログで試したところ、うまくいきました。(@うる)
本当にとても詳しいんですね!感動です。
また好みの状態にもっていくことができて、とても嬉しいです。
本当にありがとうございました。(@わぁ)
えんぴつ
2011/12/11 21:54
>えんぴつさん
お疲れさまでしたヾ(@⌒ー⌒@)ノ
うまくいって良かったです♪
ここのスタイル指定はどうするんだろ〜な〜っと思いつつスッカリ放置していたトコロでして、おかげさまで指定のしかたも思いついてスッキリしました。
そんなわけでこちらこそありがとーございましたデス(わら)
また何かありましたらお気軽にコメント下さいね〜(ういんく)
mairis
2011/12/12 08:35

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(フォント編)第2回 トップページのフォント♪ 『新着記事一覧』 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる