WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ

2014/02/112018/09/05

[adsense]

記事タイトルをカスタマイズ

前回「WordPressテーマ「Stinger3」の画像の周りに線を入れる方法」で画像に囲み線を入れる方法を紹介しました。今回は「Stinger3」の記事タイトル部分のフォントにシャドウを付けフォントサイズも少し大きくして、タイトル文字を見やすくするカスタマイズの備忘録を残したいと思います。前回と同様で簡単に見た目がよくなるカスタマイズなので是非トライしてみてください。今回もOSXローカル環境にwordpressをインストールする方法で構築したローカル環境のWordPressでカスタマイズをします。

タイトルにボーダーライン、シャドウを付ける

現状の記事タイトルはこのような感じ。

完成するとこんな感じになります。

では、編集していきます。まずスタイルシート(style.css)を開きます。
例：ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)自分は編集にTransmit4を使っています。

[adsense]

自分のスタイルシートだとだいたい２５７行目ぐらいにある「記事タイトル」と書いてある部分下、「margin-bottom:20」の下に

/*記事タイトル*/

.entry-title {
	font-size: 30px;
	line-height: 35px;
	color: #333;
	margin-bottom: 20px;
}

「border-bottom: 3px solid #eee;」を足します。これはタイトル下にボーダーラインを表示させる為の設定です。
これを追加するとこのようになります。

次に先程足した「border-bottom: 3px solid #eee;」の下にもう一行「text-shadow: 1px 1px 1px #bbb;」を足します。
この部分「1px 1px 1px #bbb;」の詳細は

となっていて、左右はプラスの値で右方向に指定して、マイナスの値で左方向へ。上下はプラスの値で下方向、マイナスの値で上方向へ指定出来る様になっています。最終的に下記ような表記になっていれば問題ありません。

.entry-title {
	font-size: 30px;
	line-height: 35px;
	color: #333;
	margin-bottom: 20px;
   	border-bottom: 3px solid #eee;
	text-shadow: 1px 1px 1px #bbb;
}

完成するとこんな感じになります。

すでに良い感じです。

タイトルのフォントを大きく

最後にもう少しだけフォントのサイズを大きくしてタイトルのインパクトを強くします。先程のスタイルシートの、

.entry-title {
	font-size: 30px;
	line-height: 35px;
	color: #333;
	margin-bottom: 20px;
   	border-bottom: 3px solid #eee;
	text-shadow: 1px 1px 1px #bbb;
}

の部分の二行目「font-size: 30px;」の数字を35ぐらいにしてみます。最終的にこんな感じになりました。

[adsense]

どうでしょうか？タイトルの主張が強くなり自然と目がそちらに向きやすくなったと思います。細かなサイズはお好みで色々と変更してみてください。読んで頂いてありがとうございました。