ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

スポンサーリンク

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

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

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

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

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

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

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

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

スポンサーリンク

自分のスタイルシートだとだいたい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ぐらいにしてみます。最終的にこんな感じになりました。

スポンサーリンク

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

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

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
wordpress人気テーマSTINGER3の広告を2つ並べるカスタマイズ
WordPress[Stinger3] 広告を2つ並べるカスタマイズ
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Stinger3] Twitterメンション設定
WordPress[Stinger3] Twitterメンション設定
WordPress[Better Delete Revision] 過去の不要なリビジョンを削除する方法
WordPress[Better Delete Revision] 過去の不要なリビジョンを削除する方法
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress[Stinger3] コメントスパムを減らすプラグイン
WordPress[Stinger3] コメントスパムを減らすプラグイン
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法