ディーエムガジェット

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[SEO Friendly Images] 画像のaltやtitleに文字列を自動的に追加
WordPress[Stinger3用 子テーマ]フォントを変更する方法
WordPress[Stinger3用 子テーマ]フォントを変更する方法
WordPress[Stinger3] Twitterメンション設定
WordPress[Stinger3] Twitterメンション設定
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress[Crazy Bone] 管理ページへのアクセスログを記録
WordPress[Crazy Bone] 管理ページへのアクセスログを記録
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPressテーマ「Stinger5」に子テーマを導入する方法
WordPressテーマ「Stinger5」に子テーマを導入する方法
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法