Life Jam

専門知識ゼロの初心者がWordPressに挑戦中

WordPress

【STINGER PLUS+】見出し(h2、h3、h4)のデザインを変更してみた

当ブログは、WordPressの人気テーマである「STINGER PLUS+」を利用しています。

人気であるということは、それだけ利用者が多いということ。デフォルトのままだと、他のサイトとデザインが同じになってしまうので、どこかで個性を出したいところ。

そこで、記事内で使われる見出し(h2、h3、h4)のデザインを変更してみました。

少しは差別化できたかな?

スポンサーリンク

ビフォーアフター

まずはカスタマイズ前後でどのように変化したか比較してみましょう。

STINGER PLUS+見出し(デフォルト)

こちらがカスタマイズ前の見出しデザイン。

シンプルでどんなサイトでも使いやすい感じですよね。もちろんデフォルト状態でも構わないんですが、もう少しオリジナリティを出したいかな。

STINGER PLUS+見出し(変更後)

そして、こちらがカスタマイズ後の見出しデザイン。

  • h2:背景色のみでシンプル
  • h3:斜めストライプの下ボーダー
  • h4:Font Awesomeアイコンと下ボーダー
  • 色は緑色で統一

こんな感じに変更してみました。デフォルトと比較すると違いが分かりやすいと思います。

「STINGER管理」の設定変更

カスタマイズをスムーズに行うために、見出しに影響を及ぼす機能を停止しておきます。

WordPress管理画面で「STINGER管理」へ。

「H3タグにチェックマークを適応する」は外しておく

「デザイン・レイアウト関連設定」にある「オリジナルテーマカスタマイザーを使用する」のチェックを外しておきます。

「H3タグにチェックマークを適応する」は外しておく

「投稿・固定記事設定」にある「H3タグにチェックマークを適応する」のチェックも外しておきます。

見出しデザインをカスタマイズ

私が行ったカスタマイズを紹介していきます。

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。

上記のコードを追記することで、当ブログで採用している見出しと同じデザインにすることができます。

各見出しごとに解説していくので、好みに合わせてアレンジしてみてください。

h2:背景色のみでシンプル

STINGER PLUS+見出しh2(変更後)

h2は記事内で必ず使うため、パッと見て分かりやすくしました。余分な装飾はせず、シンプルに背景色のみを指定しています。

また、見出し毎に少しスペースを空けて区切りを付けたほうが読みやすいと思ったので、上部の余白を多めに取っています。

h3:斜めストライプの下ボーダー

STINGER PLUS+見出しh3(変更後)

h3は比較的使う頻度が高いので、他サイトであまり見かけない斜めストライプのボーダーを取り入れてみました。色はh2と揃えています。

疑似要素を使った際にコメント欄のタイトルにも反映されてしまったので、それを打ち消すコードも付け足しています。

h4:Font Awesomeアイコンと下ボーダー

STINGER PLUS+見出しh4(変更後)

h4は使用頻度は多くないですが、私が使用するときはリストのような使い方をするので、Webアイコンフォントの「Font Awesome」を使ってチェックアイコンを見出しの頭に付けました。

こちらも疑似要素を使った際に関連記事のタイトルに反映されてしまったので、それを打ち消すコードも記述しています。

STINGER PLUS+ならば、Font Awesomeを利用するのも簡単です。種類も豊富なので好みに合わせて変更してください。

Font Awesome, the iconic font and CSS toolkit

上記のサイトにアクセス後、上部の「Icons」をクリックし、お好きなアイコンを選択してください。

Font Awesome使い方

表示されるUnicodeをコピーし、

コード内の私が使っているUnicodeと置き換えてください。あとは、必要であれば大きさや位置を調整するだけです。

参考サイト

見出しデザインを考える際に参考にさせていただきました。ありがとうございました。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

コピペで使える!CSSでシンプルな見出しデザイン

まとめ

見出しデザインを変更することは、他サイトと差別化を図るのにうってつけだと思います。簡単なカスタマイズでも印象がガラッと変わります。

階層構造を意識して見出しをデザインすることで、閲覧者にとって読みやすい記事に仕上がるはずです。

それにオリジナリティを出したデザインにすれば、より自分のサイトに愛着が湧きますしね。

ぜひ見出しデザインを変更してみてください。

-WordPress

スポンサーリンク