ファンブログの記事タイトルの配色を変更してみよう！

ファンブログカスタマイズ：ボックス編投稿日：2012年08月14日 23:28

記事タイトルの属性には、枠線（border）、背景（background）、内側の隙間（padding）、外側の隙間（margin）というファンブログの背景色を変更してみよう！の冒頭で説明しました「ボックスモデル」の基本的な属性が入っていますので、カスタマイズをしていくことで「ボックスモデル」の仕組みが理解しやすくなると思います。

全ての属性について解説していきますと非常に長い記事になってしまいますので、今回はスタイルを変更しないで簡単に行える、背景、枠線、文字の配色の変更方法を解説します。枠線（border）、内側の隙間（padding）、外側の隙間（margin）につきましては次回の記事に分けて解説していきます。

今回も「スタイルシート」の記述を変更しますので、作業の前にバックアップをとっておくことを推奨します。

? CSSやHTMLファイルのバックアップの方法

「スタイルの編集」を選択して「スタイルシートの編集」画面を開いて、 /* 記事タイトル部分 */ という記述を探してください。上の方に記述されていますので、少しスクロールすればすぐ見つかります。

/* 記事タイトル部分 */
#entries h2.entryTitle {
	border: none; border-left: 5 
px solid # 9d4d0b 
;
	background: # F4A460 
; 
padding: 6px;
	margin: 10px 0 0;
}
#entries h2.entryTitle a { color: # 6b3407 
; 
}
#entries h2.entryTitle a:hover { color: # 6b3407 
; 
}

記事タイトルの背景色を変更する

#entries h2.entryTitle の background: #F4A460 ; のカラーコードを好みの色のコードに変更して「プレビュー」を押して確認してください。変更した色で問題なければ「保存」を押して作業は終了です。

記事タイトルの枠線の太さや色を変更する

シンプル系スキンの記事タイトルの左側にあります縦棒は、太さ5PXの太い枠線（border）を記事タイトルのボックスの左側だけに表示したものなんです。 border-left: 5 px solid # 9d4d0b ; の 5 px の数字が枠線の太さ、 solid が線種（実線）、 # 9d4d0b が枠線色になり、それぞれを変更することで枠線の太さや色を変更することができます。

記事タイトルの文字色を変更する

#entries h2.entryTitle a と #entries h2.entryTitle a:hover の color: #6b3407 ; のカラーコードを好みの色のコードに変更します。 a:hover はマウスが上に乗っている状態の記事タイトルの設定で、初期値は同じ文字色で表示されるように同じカラーコードが指定されていますが、別のカラーコードを指定して a:hover 時の文字色を変更することもできます。

記事タイトルのフォントサイズを変更する

記事タイトルには見出しを示す「h2」要素が指定されていますので、フォントサイズは「h2」要素のパーセンテージで変更します。「スタイルの編集」を選択して「スタイルシートの編集」画面を開き、「Ctrl」+「F」を押し、開いた検索画面に　見出し　と入力して /* 見出しの初期設定 */ を検索します。

/* 見出しの初期設定 */
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
	margin: 0.5em 0;
}
h1 {
	font-size: 150%;
} h2 {
	font-size: 130 
%;
} 
h3 {
	font-size: 115%;
}

記事タイトルのフォントサイズを変更するには h2 { font-size: 130 %; } のパーセンテージを変更します。
ちなみに、「h1」はブログタイトル、「h3」はトラックバックタイトル、コメントタイトル等に使用されています。

a:hover 時の記事タイトルの下線を消す

記事タイトルの下線の記述は、 /* 記事タイトル部分 */ とは別の場所に記述されています。スタイルシートを開いたら、 /* 記事表示部分 */ という記述を探してください。最後の方に記述されていますので、後ろから戻ってスクロールすればすぐ見つかります。

#entries h2.entryTitle a {
	text-decoration:none;
}
#entries h2.entryTitle a:hover { text-decoration: underline 
; 
}

この記述の最後の方にあります #entries h2.entryTitle a:hover { text-decoration: underline ; } の underline を none に変更しますと、下線は表示されないようになります。

ワンポイント：トラックバックタイトルとコメントタイトルの配色を変更する

記事タイトルの配色を変更しましたら、トラックバックタイトルとコメントタイトルの配色も変更しておきましょう。
「スタイルの編集」を選択して「スタイルシートの編集」画面を開いて、 /* トラックバック / コメントヘッダー */ という記述を探してください。 /* 記事タイトル部分 */ のすぐに記述されていますので、少しスクロールすればすぐ見つかります。

/* トラックバック / コメント ヘッダー */
h3#trackbackTitle ,
h3#commentTitle ,
h3#commentPosts { border: 1 
px solid # f8c59a 
;　/* 枠線の太さ・線種・色 */
	background:# f8c59a 
;　　　　 /* 背景色 */
	color:# 6b3407 
;　　　　　　　/* 文字色 */ 
　
}