STORK（ストーク）の見出しをCSSでカスタマイズしよう

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ブログを書く上で意識しないといけないのは見出しの使い方です。
見出しは文章をわかりやすく区別する役割だけじゃなく、SEO的にも大事な役目があります。

そんな見出しですが、僕が使っているブログテーマSTORK（ストーク）ではデフォルトだと小見出しh4のデザインがショボいんです。

というわけで今回は見出しのCSSカスタマイズ方法をご紹介します！

CSS

ではさっそくいってみましょう！
CSSを変更するので子テーマを用意してそっちにカスタマイズしてくださいね。

mukutto.com

子テーマを使おう！STORK（ストーク）に子テーマをインストールする方法

続きを読む>>

なぜかCSSが反映されない！って人はこっちの記事にも目を通してください。

mukutto.com

CSSの変更が反映されない時の6つの対処法、教えます！

続きを読む>>

ちなみに下のCSSを使うとこんな表示になります。

/*————————————–
H4 STYLES
————————————–*/
.entry-content h4{
position: relative;
color: #111;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.7em;
border-bottom: 2px solid #1BB4D3;
}

h4:before{
content: “”;
position: absolute;
background: #1BB4D3;
top: 0;
left: 0.4em;
height: 12px;
width: 12px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

h4:after{
content: “”;
position: absolute;
background:#1BB4D3;
top: 1.0em;
left: 0;
height: 8px;
width: 8px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}

これだけOKです。

見出しの設定を確認しよう

STORK（ストーク）の設定では、最初から用意されている見出しスタイルをボタン1つで変更できる機能があります。

CSSにちょっと手を加えるとボーダーや吹き出し風を選択していていも自由にカスタマイズも可能なのですが、今回はわかりやすくシンプル（デフォルト）状態でのカスタマイズです。

別のスタイルを使う場合

今回設定したh4のスタイルは単なる僕の好みです。

もっと違うデザインがいいなぁという人は例えばこちらのページのように見出しサンプルを紹介されているサイトを参考にCSSコードを利用してみてください。

カスタマイズを加える場合は

/*————————————–
H4 STYLES
————————————–*/
.entry-content h4{

だけ残し、その下から別のCSSコードを貼り付けてください。

ちなみに

/*————————————–
H4 STYLES
————————————–*/

の部分は単なるメモ書きなので、気になる人は消しちゃっても大丈夫です[/voice]

STORK（ストーク）の残念な見出し

ストークは最初からいろんなカスタマイズが施されてるので助かってます。
でもなぜか見出しh4は特別な飾りもなく太字になるだけという残念仕様なんですよね。

ちょっとオリジナル状態を比べてみましょう。

h2タグ

h3タグ

 h4タグ

あれ？h4タグは？ってなりますよね？

h4はなぜか装飾がなくて太文字になるだけなんです。

太字でも見出しとして使えないことはないんですが、やっぱり見た目でわかりやすいものがいいなぁと。

というわけなのでカスタマイズが必要なんですね。

見出しの大切さ

記事における見出しは色々な役割があります。

文章の読みやすさ

見出しがある文章と見出しがない文章だと見た目がこんなに違います。

見出しがあるとパラグラフがハッキリしてパッと見た時もわかりやすいですね。

見出しがなくてもなんとなく段落の形で判別できますけど、やっぱりあるほうが見た目もいいです。

SEO

SEO対策を考えた時も見出しは重要な要素の1つです。

タイトルでSEO対策（検索されそうなキーワードを盛り込むこと）をする人は多くても見出しまで気がまわってない人もいます。

h2, h3, h4のキーワードも意識して設定するようにしましょう。

見出しのルール

見出しはh1, h2, h3, h4などのタグで指定しますが、何でもかんでも使っていいわけじゃありません。

ちゃんとルールが決まってるのでそれに沿った使い方をする必要があります。

h1はタイトルで使う

h1は記事タイトルのみに使われるため、文中で使うのはそれ以外のh2, h3, h4などのタグに限定されます。

h1〜h6は重要度が違う

SEOの観点からみると、Googleはタイトルで使われるh1が一番重要だと判断します。

そこから数字が大きくなるにつれ重要度は小さくなるので、h6が一番低いということになります。

順番が決まっている

まずトップにタイトルのh1がきます。

文中で使う場合はh2を配置し、その次にh3、さらにその次にh4という具合に順番に並べる必要があります。

いきなりh3やh4を使ったり、h2の次にh4を使うのはルール違反となります。

まとめ

見出しはブログをアピールするための大切な要素の1つです。

お気に入りのデザインを登録してカッコいい見た目のブログを目指しましょう。