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

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

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

Advertisement

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

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

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

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

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

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

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

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

Advertisement

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

/*記事タイトル*/

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

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

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

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

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

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

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

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

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

すでに良い感じです。

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

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

.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ぐらいにしてみます。最終的にこんな感じになりました。

Advertisement

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

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

WORDPRESSカテゴリの最新記事