【WordPress】STINGER8でh2,h3の見出しをデザインしたり、先頭に画像を表示するカスタマイズ

stinger7やplus等では、
簡単にカスタマイズすることができたh2タグやh3タグですが、
stinger8ではそうはいきません。
色を変えるにも自分でスタイルシートをいじらなければなりません。

しかしhタグをカスタマイズするのはそんなに難しくはないんですよ！
今回はh2やh3タグの色の変更方法や、影のつけ方や、
先頭にアイコンなどの画像を表示させるカスタマイズを紹介します。

ちなみに、stinger8でのカスタマイズと書いてありますが、
基本的な考え方はすべてに共通するので、
他のテーマなどでも利用することができると思います。

h2,h3タグの色を変える
1. h2タグ
2. h3タグ
h3タグの先頭に画像を表示させる！！
コピペも良いですが・・・

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

国内シェアNo.1の高速サーバーなのでストレスフリー！
自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

h2,h3タグの色を変える

h2,h3タグを変更する場合はstyle.cssのファイルをカスタマイズします。
そのため、いつもの通り、子テーマを使用しましょう。

h2タグ

まずは「h2」タグです。

デフォルトの状態はこれです。

色を変えるにはstyle.cssに以下のコードを追記します。

h2{
   background:#38b48b;
   color:#fff;
   border:none;
}

すると色が変わります。

デフォルトの状態ではすでに「border」が上下に入っているので、
「none」にして消しました。
影をつけたい場合は「box-shadow」を追記します。

h2{
   background:#38b48b;
   color:#fff;
   border:none;
   box-shadow:0px 5px 4px -2px #a0a0a0;
}

このようになります。

背景色や文字の大きさなどはお好みのものに変更してください！

h3タグ

h3タグも基本的にはh2タグと変わりませんが、
指定の方法がストレートではありませんのでご注意ください。

デフォルトの状態はこのような感じです。

下の点線のみですね。

これではさみしいので、
上下に線を付け、色を変えてみます。

.post h3 {
   border-top: 2px #38b48b dotted;
   border-bottom: 2px #38b48b dotted;
}

こんな感じになります。

h3タグの先頭に画像を表示させる！！

この画像を表示させるのは、stingerplusでは簡単に出来て非常に便利でしたが、
stinger8では自分でやらなければなりません。

画像を用意する

とりあえず、表示させる画像を探すか、自分で作りましょう。
この記事を書いている時点では、
以下の無料素材サイトの画像を利用させていただいています。
ICOON MONO
http://icooon-mono.com/
様々なサイズの画像や自分で好きな色のものをダウンロードできるので非常に便利ですよ！

画像をFTPソフトなどでアップロードする。

画像を用意できたら、画像をアップロードするのですが、
そのアップロード先は、
themes>stinger8-childの中です。
（これは、子テーマを使用していることを前提に考えています。）
ちなみに、「style.css」等のファイルが入っている階層です。

style.cssをいじる

アップロードが完了したら、
cssをカスタマイズします。

先ほどの「.post h3」のクラスに、
以下のコードを追記します。

.post h3 {
   background:url("ここに画像のファイル名") no-repeat left center;
   border-top: 2px #38b48b dotted;
   border-bottom: 2px #38b48b dotted;
}

「ここに画像のファイル名」ところに、
先ほどアップロードした画像のファイル名を入力しましょう。

結果がこちら！

文字と画像が重なっていますね…
これを直すため、コードを以下の様に直しましょう。

.post h3 {
   background:url("saisei.png") no-repeat left center;
   padding-left:40px;
   border-top: 2px #38b48b dotted;
   border-bottom: 2px #38b48b dotted;
}

こうなります。