ハリーポッター映画全シリーズをお得に視聴したい方は
スティンガー8

STINGER8の記事内の見出しタグ「h2・h3・h4」をおしゃれにデザイン

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ブログで記事を作成する時に内容を見やすくしたり読みやすくする為、見出しタグを使ってブロック分けにすることができます。

 

見出しタグはSEO対策にも効果があるので、ブログを検索エンジンに上位表示させることにも役立つ重要なタグになります。

 

「STINGER8」の見出しタグはデフォルトの状態で使用すると、シンプルすぎるデザインなのでもっとおしゃれにデザインして表示させたい!と考えている方も多いかと思います。

見出しのデザインはCSSを編集することで、自分好みにカスタマイズできるのでぜひ試してみて下さい。

 

ここでご紹介するデザインは、CSSコードをそのままコピペするだけで変更できますので、初心者の方でも簡単に使用できます。

見出し「h2・h3・h4」をおしゃれにデザイン

それでは早速、見出しデザインを変更してみましょう。

 

「STINGER8」デフォルトの見出しタグ

「STINGER8」のデフォルトの見出しタグ「h2・h3・h4」は以下のようになります。

 

 

可もなく不可もなくといった感じのデザインなので、これを子テーマのスタイルシート(style.css)を使用しておしゃれにカスタマイズしていきます。

CSSを編集するにあたって変更がブログに反映されない時は、ブラウザキャッシュの削除を行うようにしましょう。

 

見出しタグ「h2」

まずは見出しタグ「h2」のデザインから編集していきます。

すでにstyle.cssで設定されている変更する前のコードが以下のものになります。

 

 

上記のコードを子テーマにコピぺして編集することもできますが、ここでは以下のコードを使用します。

 

 

このコードを追加すると背景色をグラデーションにしたり、影をつけたりすることができるようになります。

 

 

グラデーションの色合いや影の配色などを、お好みで変更できますのでブログに合うものに調整して下さい。

 

見出しタグ「h3」

デフォルトの見出しタグ「h3」のデザインコードは以下のようになっています。

 

 

「h2」タグと同様に子テーマのstyle.cssに貼り付けて編集できますが、もう少し変化をつけたかったので以下のコードを追記しました。

 

 

「h3」タグはデフォルトでは点線だけだったので、ボーダーに変えることでインパクトのあるタグに変更できます。

 

 

普通のボーダーとは違って自分流に変化をつけてアレンジしていますので、「background」の部分をお好きなコードに変更して使用して下さい。

 

見出しタグ「h4」

変更前の見出しタグ「h4」は以下のコードになります。

 

 

「h4」タグは「h2・h3」と比べると使用されることは少ないかもしれませんが、私はたまに使用することがあるのでここでカスタマイズしておきます。

「h4」に関してはアイコン画像を左側に表示させるコードになります。

 

 

アイコンコードは「Font Awesome」で取得できるものになります。

他のアイコン画像を使用する場合は、「f00c」のアイコンコードを変更するだけで簡単に画像を変えることが可能です。

 

 

見出しタグ「h2・h3・h4」をおしゃれにデザインする方法は以上になります。

 

「STINGER8」見出しタグまとめ

ワードプレス(WordPress)の無料テンプレート「STINGER8」を導入されている方は、CSSを使って色々カスタマイズすることも多いかと思います。

 

シンプルなテンプレートなので使いやすくて便利ですし、今回ご紹介した見出しタグ以外にも色々とおしゃれにデザインすることができます。

個性を生かしたブログやサイトにしていく為にも、CSSを勉強しながら少しずつカスタマイズを進めていきましょう。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール