CSS（フォント編）第５回記事ページのフォント♪ 『タイトル～記事題名』きまぐれAWA's Life/ウェブリブログ

CSS（フォント編）第５回記事ページのフォント♪ 『タイトル～記事題名』

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

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

【追記】（08/06/05）
ブログ管理のタイトルデザイン設定画面からタイトル文字の位置変更が出来るようになりました。
お手軽・簡単に変更したい場合はこちらから
CSS（スタイル編）　簡単♪　タイトル画像を簡単に変更する♪ ～タイトルデザイン設定

もう少し手を加えたい場合には下記の記事をご覧ください。

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

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

フォントのサイズと配置の指定場所は『/* タイトルテキスト */』　
#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{

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

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

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

『/* 追加トラックバック数／コメント数 */』　● 桃
#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:●;
}