きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(フォント編) 第5回 記事ページのフォント♪ 『タイトル 〜 記事題名』

<<   作成日時 : 2008/02/24 10:14   >>

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

記事ページのフォントの変更ポイントです♪
今回は記事タイトルから 記事題名周辺の変更をします。





 記事タイトルのフォントから♪ 

記事タイトルのデザイン指定の場所は『記事ページ』の『タイトル(小)』部分です。
トップページタイトルのフォントと同じようにデザインの指定をします。

フォントのサイズと配置の指定場所は『/* タイトルテキスト */』 
#subbanner h1{の後に下の文字列を追加

font-size:■%;
position:relative; top:▲px; left:◆px;


フォントの色は新規で次の文字列を追加します。

/* 追加 タイトルテキストの色 */
#subbanner h1 a{
color:●;
}


※フォント以外のデザイン指定の記述は省略しています。


 C 『 記事ページ 』   CSS 全体Map 

/*---------------- タイトル(小) ----------------*/
#subbanner{
background-color:#FFEEEE;
/* 包含要素を相対位置指定できるようにします */
}

/* タイトル領域内のアンカー */
#subbanner a{
}

/* タイトルテキスト */
#subbanner h1{
font-size:■%;
position:relative; top:▲px; left:◆px;

/* タイトル領域内での位置を指定します */
}
/* 追加 タイトルテキストの色 */
#subbanner h1 a{
color:●;
}




お好みでデザイン変更を(ん)
画像
 

※上の図三枚目のように タイトルのフォントを非表示にすることも出来ます。
文字を表示したくない場合は下のように文字列を追加します。

/* タイトルテキスト */
#banner h1{
display:none;
/* タイトル領域内での位置を指定します */
}









 記事題名の部分のフォント♪ 

ここのデザイン指定の場所は『記事ページ』の『記事ヘッダ』部分です

『/* 記事タイトル */』 ● 赤
#blog-head h2{

『/* 追加 トラックバック数/コメント数 (リンク) */』 ● 緑
#blog-head .response a{
color:#CCCC33;
}


『/* 投稿日時 */』 ● 青
#blog-head .date{

『/* 投稿日時左右のナビゲーション */』  ● 紫
#blog-head .date a{

※フォント以外のデザイン指定の記述は省略しています。


【追記】
※『/* 追加 トラックバック数/コメント数 (リンク) */』については
第 3回 リンクの付いているフォント♪ 【再編集】の設定でも指定できます。
個別にデザインを指定したい場合だけ追加します。

※ トラックバック数とコメント数の間の【 / 】
トラックバック数とコメント数はリンク文字のデザイン指定で変更できますが、【 / 】は変化しません。
【 / 】は下の文字列の後にデザイン指定します。 

『/* 追加 トラックバック数/コメント数 */』  
#blog-head .response{


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

/*----------------- 記事ヘッダ -----------------*/
#blog-head{
}

/* 記事タイトル */
#blog-head h2{
color:●;
}

/* トラックバック数/コメント数 */
#blog-head .response{
color:●;
}

/* 追加 トラックバック数/コメント数 (リンク) */
#blog-head .response a{
color:●;
}


/* 投稿日時 */
#blog-head .date{
color:●;
}

/* 投稿日時左右のナビゲーション */
#blog-head .date a{
color:●;
}




各箇所の変更のためのポイントは以上です(ん)


※上の画像は【 / 】のデザイン指定をする前の画像です。
画像編集が出来次第、画像を差し替えます。




次回は記事ページの関連テーマ周辺に移ります。

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


|ω・)ノシ See you♪

|彡 サッ




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


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(0件)

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

トラックバック用URL help


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

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

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

* ぱにゃステ *

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

CSS(フォント編) 第5回 記事ページのフォント♪ 『タイトル 〜 記事題名』 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる