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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

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

スポンサーリンク

CSS

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

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

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

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

2017.03.02

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

H4

/*————————————–
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つで変更できる機能があります。

[外観]→[カスタマイズ]→[投稿・固定ページ設定]に進み、見出しデザインをシンプル(デフォルト)に変更しておきましょう。

Setting

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

別のスタイルを使う場合

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

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

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

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

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

ちなみに

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

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

 

STORK(ストーク)の残念な見出し

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

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

h2タグ
H2

h3タグ
H3

 h4タグ
H4

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

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

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

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

 

見出しの大切さ

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

文章の読みやすさ

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

Midashi

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

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

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を使うのはルール違反となります。

Ex
ルールに従ってないからといってペナルティがあるわけでもないし、即時SEOに影響が出ることはないよ。でも今後もし厳格化されたら・・・という時に備えてキチンとルール通りにやっておくのは◎!

スポンサーリンク

まとめ

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

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サービス開始から半年たらずで100件以上のオーダーをいただいています。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!