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で設定されている変更する前のコードが以下のものになります。

/* 中見出し */
h2 {
	background: #f3f3f3;
	color: #1a1a1a;
	font-size: 19px;
	line-height: 27px;
	margin: 20px 0;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top:2px solid #ccc;
	border-bottom:1px solid #ccc;
}

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

h2 {
    font-size: 25px;/*文字サイズ*/
    color: #6c3524;/*文字色*/
    background: linear-gradient(transparent 0%, #00ced1 50%);/*背景色とグラデーション*/
    border: none;/*既存の上下線なし*/
    box-shadow: 0px 5px 4px -2px #a0a0a0;/*影をつける*/
}

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

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

見出しタグ「h3」

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

/*小見出し*/
.post h3 {
	font-size: 18px;
	line-height: 27px;
	margin: 20px 0;
	padding: 10px 15px;
	color: #1a1a1a;
	line-height: 27px;
	background-repeat: no-repeat;
	background-position: left center;
	border-bottom: 1px #999999 dotted;
}

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

.post h3 {
    position: relative;
    font-size: 20px;/*文字サイズ*/
    color: #6c3524;/*文字色*/
    border: none;/*既存の下線なし*/
}

.post h3:after {
    content: "";
    position: absolute;/*絶対位置*/
    left: 0;
    bottom: 0;
    width: 100%;/*ボーダーの長さ*/
    height: 10px;/*ボーダーの太さ*/
    background: repeating-linear-gradient(-45deg, #00ced1, #00ced1 10px, #fff 20px);/*ライン角度とボーダー色*/
}

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

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

見出しタグ「h4」

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

.post h4 {
	padding: 10px 15px;
	margin: 20px 0;
	background-color: #f3f3f3;
	font-size: 17px;
	line-height: 26px;
}

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

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

.post h4 {
    font-size: 18px;/*文字サイズ*/
    color: #6c3524;/*文字色*/
    background-color: #fff;/*背景色*/
}

.post h4:before{
    font-family: FontAwesome;/*アイコン取得先*/
    content: "\f00c";/*アイコンコード*/
    font-size: 1.5em;/*アイコンサイズ*/
    color: #00ced1; /*アイコン色*/
    padding-right: 2px;/*アイコンと文字の間隔*/
}

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

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