WordPressテーマ STINGERのフォントサイズや見出しをオリジナルに変更する方法

STINGERはSEOに強くカスタマイズに優れた素晴らしいWordPressテーマです。

そのため利用している人も多く、見た目が似通ってしまいがちです。

今回はフォントと見出しをオリジナルのものに変更する設定方法を紹介します。

このブログはWordPressテーマ STINGERを使っているのですが、使い始めてから4ヶ月ほど、ほぼデフォルトの設定で使ってきました。

〈素敵なWordPressテーマ スティンガーはこちら〉

必要な物は、揃っている。STINGER3

〈関連記事〉
ブログのWordPressテーマにStingerを導入したらナニコレすんごくステキ！無料でいいの？

最近このブログも記事数が100を超えてきたので、そろそろ見た目にもこだわりたいと思い、まずはフォントと見出しを変更してみます。

1.STINGERのフォントを変更する

STINGERはiPhoneやスマホ、Macで表示するとキレイですが、Windowsだとテキストフォントがいまひとつです。

そして文字サイズも15pxなので、できればもう少し大きくしたいところ。
そこで次のように変更してみます。

フォントのスタイルを変更

1-1.まずはテキストフォント

フォントをよみやすい文字に変えると印象がガラッとかわります。
Macやスマホで表示すると、デフォルトでもけっこうきれいなのですが、Windowsだと文字のフォントがやや気になるので、ちょっとだけ変えてみます。

WordPressの「外観」→「テーマ編集」→「スタイルシート (style.css)」を開いたら、一番下にこれ↓を追記します。

* {
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
}

これで、MacでもWindowsでも、ヒラギノ、メイリオのフォントになり、ちょっと読みやすくなります。

1-2.次はテキストサイズを大きめに

STINGERはもともと記事のテキストサイズは15pxなので、ほんの気持ち大きくします。
先ほどの「1-1.」で追記したあとに、さらに下↓を追記します。

p {
font-size: 17px;
line-height: 30px;
}

文字のサイズをちょっとだけ（15px→17px）大きくしたので、行間も27px→30pxに変更しています。
※ここはお好みです。

ここまでで、style.cssはこのような感じになっています。

これで、見た目はこんな具合に変わっているはずです。

＜Macの見た目＞

＜Windowsの見た目＞

Windowsでは特に見やすさがアップしています。

2.STINGERのhタグ（見出し）を変更する

STINGERのhタグ（見出しは）とてもシンプルで使いやすいです。
そのため多くのSTINGERを使ったブログで、同じ見出しを見かけるので、少しだけ変更を加えていきます。

変更する場所は先ほどフォントを変えた場所と同じ、WordPressの「外観」→「テーマ編集」→「スタイルシート (style.css)」の中です。

2-1.「h2タグ」を変更する

h2タグはデフォルトだとこんな感じです。

左にラインのあるシンプルな見出しです。

そしてこれが今回変更したh2タグです。

さっそく変更方法を。

h2タグの変更はこんな具合

「スタイルシート (style.css)」の中を「h2 {」で検索すれば見つかると思います。

＜デフォルトの「h2タグ」のCSSコード＞

h2 {
     font-size: 24px;
     padding-top: 5px;
     padding-right: 10px;
     padding-bottom: 5px;
     padding-left: 35px;
     border-left-width: 5px;
     border-left-style: solid;
     border-left-color: #1a1a1a;
     color: #333;
     line-height: 30px;
     margin-top: 20px;
     margin-right: 0px;
     margin-bottom: 20px;
     margin-left: -40px;
}

この↑デフォルトのコードを次のように↓書き換えます。
＜変更後の「h2」タグのCSSコード＞

h2 {
     font-size: 24px;
     padding-top: 5px;
     padding-right: 10px;
     padding-bottom: 5px;
     padding-left: 45px;
     border-left-width: 5px;
     border-left-style: solid;
     border-left-color: #2f4f4f;
     line-height: 30px;
     padding: 15px;
     width: 100%;
     margin-top: 20px;
     margin-right: 0px;
     margin-bottom: 40px;
     margin-left: -45px;
     background: #3cb371;
     color: #ffffff;
}

主な変更点は

• 17行目で背景の緑色（mediumseagreen
  #3cb371）を指定しているところ。
• 9行目で左の縦ラインの色を深緑（darkslategray
  #2f4f4f）に変更しているところ。
• 文字色を、18行目で白（color: #ffffff;）に変更しているところ。

といった点です。

2-2.「h3タグ」を変更する

「h3タグ」はデフォルトではこんな感じです。

このシンプルなチェックボックスはとても汎用性が高いので、多くのSTINGERブログで使われています。

ぼくもこのチェックボックスのイラストが好きなので、このまま使うことにして、少しだけ手を加えてみます。

h3タグの変更はこんな具合

「スタイルシート (style.css)」の中を「h3 {」で検索すれば見つかると思います。

＜デフォルトの「h3タグ」のCSSコード＞

.kizi h3 {
     font-size: 20px;
     margin-bottom: 30px;
     margin-top: 10px;
     padding-top: 15px;
     padding-right: 10px;
     padding-bottom: 15px;
     padding-left: 60px;
     color: #000000;
     line-height: 30px;
     background-image: url(images/cah3-bk.png);
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 0px;
     border-bottom-width: 1px;
     border-bottom-style: dotted;
     border-bottom-color: #999999;
}

これ↑をこのように↓書き換えます。
＜変更後の「h3タグ」のCSSコード＞

.kizi h3 {
     font-size: 20px;
     margin-bottom: 30px;
     margin-top: 10px;
     padding-top: 15px;
     padding-right: 10px;
     padding-bottom: 15px;
     padding-left: 45px;
     color: #000000;
     line-height: 30px;
     background-image: url(images/cah3-bk.png);
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 0px;
     border-left: 10px solid #66cdaa;
     border-bottom-width: 2px;
     border-bottom-style: solid;
     border-bottom-color: #66cdaa;
}

主な変更点は

• 17行目で点線だった下線を実線に変更しているところ。
• 16行目で太さを1px→2pxに変更しているところ。
• 15行目で左の縦ラインを加えて、下線と合わせて明るい緑（mediumaquamarine
  #66cdaa）に指定しているところ。

といった点です。

ここまでで、だいぶ見た目が変わった感じになったと思います。

ちなみに色の変更はこちらのサイトを参考にすると、設定したいカラーナンバーがすぐに見つかります。

原色大辞典 http://www.colordic.org/

ここまではPC（デスクトップ）版の設定です
この設定はPCやタブレットでの表示にだけ対応するものです。
iPhoneやスマホ用の変更は、「smart.css」から変更することになりますので、また次の機会に紹介します。

おわりに

CSSの編集はちょっと勇気がいりますが、しっかりバックアップを取って行えば少しくらい失敗してもいつでも戻すことが出来ます。
オリジナルの見た目にこだわったブログにしたいですね！

たくろーど（@tkroad）でした。(・ω<)

＜関連する記事＞

Webサイトのブログアイコン「ファビコン」をオリジナルのものに設定する方法@スティンガー

ブログのWordPressテーマにStingerを導入したらナニコレすんごくステキ！無料でいいの？