読者の未来に、少しでも役立つネタを配信するブログ。

STINGER 見出しデザインを変更する方法

      2016/02/20


見出しデザイン変更記事の記事内アイキャチ画像

WordPress(STINGERテーマ)を使用していて、見出しデザインを変更したい方に、読んでほしい記事です。

STINGERテーマでは、見出し(ここの場合 <h2>)がグレーの背景デザインになっていますが、明るく目にとまりやすいデザインにしたかったため、下記のようにデザインを変更しました。

見出しデザイン変更記事のビフォーアフィター画像

もし、同じように見出しデザインの変更を考えているようであれば、本記事を参考にカスタマイズを進めてみてください。

なお、カスタマイズにあたり、まだ子テーマを作成していないようであれば、先に子テーマを作成することをオススメします。

【参考】WordPress 子テーマのメリットと作成方法

スポンサーリンク

見出しデザインの選定

まず、変更したい見出しのデザインを決めます。

私の場合、デザインの知識がまったくなかったので、下記のサンプル集を参考にしました。

【参考】見出しデザインの参考にしたい CSSで作るhタグのサンプル集

サンプル集にある「見出しサンプル02」のデザインが気に入ったので、このデザインの色や線を調整し、実装していきます。

よくわかならい・・という方は、とりあえずコピペで良いので試してみてください。

「style.css」のコード変更

「style.css」の2箇所のコードを変更します。

1箇所目、2箇所目のコードは似ていますが、1箇所目が上部、2箇所目が下部にあるコードになります。

▪︎1箇所目の変更前

▪︎1箇所目の変更後

1箇所目のコード変更だけの場合、スマホ(タブレット)はデザイン変更ができているのですが、PCのデザイン変更ができていないため、2箇所目のコード変更をおこないます。

▪︎2箇所目の変更前

▪︎2箇所目の変更後

これで見出しのデザインが変わりました。

見出しデザイン変更記事の完成後画像

コード変更箇所の説明

変更前と変更後のコードをよく見ると、少ししか変更していないことがわかります。
それぞれ簡単に説明していきます。

背景色を白にするために「#FFFFFF」と指定しています。(デフォルトは灰色でしたね。)

背景色を白以外にしたい場合は、カラーコード表から好きな色のコードを記載してください。
【参考】HTML,CSS カラーコード一覧表

見出し左の横棒の太さ、色を指定しています。

横棒の太さを変えたい場合は「8px」、色を変えたい場合は「#00A8C6」を変えてください。

見出し下線の太さ、色を指定しています。

横棒の太さを変えたい場合は「1px」、色を変えたい場合は「#00A8C6」を変えてください。

デフォルトの場合、見出しの下に三角の吹き出しが残ってしまうため、「transparent」と記載します。

他のデザインも試してみたい方は、先ほどのサンプル集にあるコードを参考に、自分の好みにあったデザインに変更してみてください。

本記事は以上になります。

見出しデザインの変更だけで、ブログの雰囲気や読みやすさも変わってきますので、ぜひ色々と試してみてはいかがでしょうか。

本記事では、<h2>の見出しデザインだけの変更でしたが、同様の手順で<h3>以下の見出しデザインも変更可能です。

お付き合い頂き、ありがとうございました!

 - ブログ運営