【コピペだけ！】STORK（ストーク）の見出しをオシャレにカスタマイズ！

ここあです。

ブロガーの間で大人気のWordPressテーマSTORK。

私も大好きなブロガーさんがSTORKを使っていて

あまりの可愛さから同じテーマにしました。

※現在はTHE THOR（ザ・トール）を使用しています。

STORKは…

ということから選ぶ人が続出。

しかし、STORKの利用者が増えたことで…

パッと見の印象が他のブロガーと似てしまい

せっかく有料テーマを手に入れたのに

訪問者に、「どこも似たようなデザインだな」と

思われるのは納得がいきませんよね…。

※私はデザイナーだけにその辺もちゃんとこだわりたい（笑）

記事の個性はもちろん大事！

でも、ブログのデザインでも個性を出したい！

そう思うのが人間のエゴというものです。

ということで…

STORKをあなたのこだわりに合わせて

どんどんカスタマイズしていきましょう＾＾

今回はブログの中で最も重要なポイント

h2〜h4までの見出しのカスタマイズ方法を

いろいろとご紹介致します。

細部の調整方法まで説明しますので

コピペだけでなくあなたの手でいろいろ調整してみてください。

調整もすごく簡単です！

コピペだけ！STORK（ストーク）の見出しをカスタマイズしよう！

こちらの記事にも書きましたが…

【STORK】カスタマイズ！コピペだけでオシャレにする方法まとめ

STORKで一番残念なのは見出しのデザインです。

STORKの見出しはデフォルトのデザインが…

こんな感じですよね…。(残念すぎる…)

h4の見出しに至っては単なる文字でしかありません。

それって見出しといえるのか？＾＾；

ということで、早々に見出しをカスタマイズしてしまいましょう。

見出しのデザインを変更するには

本来、HTMLとCSSの知識が必要になりますが

あなたには一切必要がありません。

今回は初心者のあなたでも

コピペだけで簡単に変更できるように

私が見出しテンプレートをいくつかご用意致しました。

なので、見出しデザインのサンプルを見て

あなたのお気に入りが見つかったら

ぜひコピペしてカスタマイズしてみてくださいね。

また、今から説明するCSSコードの記述先は2通りあります。

どちらもお好みで構いませんが

後者②の方が

ライブプレビューで調整ができるのでやりやすいです。

念のため、カスタマイズが初めてというあなたのために…

CSSコードのコピー先を画像で説明致します。

まずは①を選ぶ場合…

ダッシュボードメニューの外観 → テーマの編集から

テーマ編集画面に移り

スタイルシート（style.css）を選択。

スタイルシートの以下の部分にCSSコードを記述してください。

❷を選ぶ場合は…

ダッシュボードメニューの外観 → カスタマイズから

カスタマイズ編集画面に移動し、追加CSSを選択。

追加CSSの以下の部分にCSSコードを記述しましょう。

※私はすべてこちらに記述しています。

CSSコードの記述先が確認できたら

いよいよ見出しデザインのカスタマイズです。

STORK（ストーク）の見出しテンプレレート12選

それでは見出しのテンプレートをご紹介致しますね。

主にh2、h3としてありますが、h4にも使えます。

※h2の部分をh3やh4に変えてください。

テンプレートによっては

初期設定の表示を切り替える必要がありますので

合わせて確認してください。

※（初期設定：○○）としてある部分が見出しデザインの初期設定です。

初期設定の切り替えは…

外観 →  カスタマイズ  →  投稿・ページ設定にあります。

シンプルな見出し

まずは シンプルな見出しの紹介です。

色の変え方によってはかわいらしくもクールにもなります。

1）二重線の見出し

非常にシンプルですが

h3やh4では使いやすい見出しのデザインです。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：ボーダー）

クリックでCSSコードを表示

.entry-content h2{
border-bottom: double 5px #FFC778 !important;
margin: 30px 0px 20px;
}

2）点線+文字色を変えた見出し

点線でちょっと可愛く。色はお好みで変えましょう。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：ボーダー）

クリックでCSSコードを表示

.entry-content h2{
color: #5ab9ff !important;
border-bottom: dotted 4px #5ab9ff !important;
margin: 30px 0px 20px;
}

3）上下に線のある見出し

上下を線で囲んでちょっとクールに。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：ボーダー）

クリックでCSSコードを表示

.entry-content h2{
color: #364e96 !important;
padding: 0.5em 0;
border-top: solid 3px #364e96;
border-bottom: solid 3px #364e96;
}

4）背景色と下線のある見出し

背景色と下線の色を統一するとオシャレになります。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2{
padding: 0.5em;
color: #010101;
background: #eaf3ff;
border-bottom: solid 3px #516ab6;
}

5）左にボーダーと背景色のある見出し

デフォルトの味気ないタグよりはしっかりと目立ちます。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2{
padding: 0.5em;
color: #494949 !important;
background: #fffaf4;
border-left: solid 5px #ffaf58;
}

6）立体感のある見出し

上記を似たような形でも影が少し入るだけで印象が変わります。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2{
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}

オシャレな見出し

次はオシャレ系の見出しです。

7）途中で色の変わる下線の見出し

色の組み合わせによってはオシャレにできます。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：ボーダー）

クリックでCSSコードを表示

.entry-content h2{
border-bottom: solid 5px #cce4ff !important;
position: relative;
}
.entry-content h2:after {
position: absolute;
left: 0px;
content: " ";
display: block;
border-bottom: solid 5px #5472cd;
bottom: -5px;
width: 20%;
}

8）リボン風の見出し

私が今使ってるh2の見出しがこれです。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2{
position: relative;
padding: 12px 18px;
background: #0a69dd;
color: white;
}
.entry-content h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

9）ステッチ風のかわいい見出し

この見出しを使うと、女性らしいかわいい雰囲気に早変わり。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2.5px white;
color: #454545;
margin: 60px 10px;
padding: 0.7em;
}

10）背景がストライプの見出し

背景がストライプのポップなデザインです。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2{
color: #010079;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

アイコンフォントを使った見出し

Font Awesomeを使えば、アイコンを取り入れた

幅広い表現ができるようになります。

アイコンフォントの使い方はこちらで解説しています。

【初心者必見！】Font Awesome（Webアイコンフォント）の使い方をやさしく解説！

11）シンプルなチェックマークの見出し

私がh3の見出しで使っているデザインです。

h2用とh3用コードを分けてあるのは

検証した時に、設定を変えないとバグが出たからです。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2 {
border-left: none;
position: relative;
background-color: #fff;
color: #000;
border-bottom: solid 3px gray;
padding-left: 1.3em;
line-height: 20px;
}
.entry-content h2:before{
font-family: "fontawesome";
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 21px;
color: #5ab9ff;
}

↓ 見出し3（h3）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h3 {
border-left: none;
position: relative;
border-bottom: solid 3px gray;
padding-left: 1.3em;
line-height: 20px;
}
.entry-content h3:before{
font-family: "fontawesome";
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 16px;
color: #5ab9ff;
}

12）円のアイコンとバーを付けた見出し

円のアイコンが目をひくかわいいデザインです。

こちらのデザインを使う場合も

h2かh3の使いたい方のコードを選択してください。

↓ 見出し2（h2）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h2 {
position: relative;
background: #2222;
padding: 5px 5px 5px 50px;
left: 10px;
font-size: 20px;
color: #474747;
}
.entry-content h2:before {
font-family: "fontawesome";
content: "\f024";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
width: 40px;
text-align: center;
height: 40px;
left: -10px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

↓ 見出し3（h3）用のコード（コピペでOK! 初期設定：シンプル）

クリックでCSSコードを表示

.entry-content h3 {
position: relative;
background: #2222;
border-left: none;
padding: 5px 5px 3px 50px;
left: 10px;
font-size: 20px;
color: #474747;
}
.entry-content h3:before {
font-family: "fontawesome";
content: "\f024";
display: inline-block;
line-height: 50px;
position: absolute;
color: white;
background: #ff6363;
width: 50px;
text-align: center;
height: 50px;
left: -10px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

カスタマイズする時の注意点

お気に入りの見出しデザインは見つかりましたか？

見出しのデザインは基本的にCSSを使えば簡単に変更できます。

ただし、CSSを変更する際に気をつけて欲しいのは…

必ず半角英数字のみで編集するということ。

CSSは全角スペースや全角文字が入った瞬間に機能しなくなります。

なので、もしも、CSSを編集していて

「あれ？」と思った時は…

どこかに全角文字が入っていないか確認してみてください。

また、コードの中には

! importantという表記が混ざったものがありますが

私はどうしても変更したい場所にのみこのコードを使用しています。

この! importantというコードは見ても分かる通り

「すごく重要だから、こっちを優先してね！」というコードです。

だから、どこもかしこも! importantだらけになってしまうと

結局「どのコードが一番重要やねん！」となってしまいます…＾＾；

つまり、! importantは多用し過ぎると

SEO的にはあまりよくないんですね…。

コードは正しく書かれてこそSEOに強くなります。

なので、もしもあなたが自分で

「がんばってカスタマイズしよう！」という時は…

必要以上に! importantを多用せず、必要最低限のところで

! importantのコードを使うように気をつけてくださいね。

また、CSSコードを使用する際には

必ず直接コピペするようにしてください。

例えば、メモ系のソフトや

ワープロ系のWordなどに一度コピーしてしまうと

CSSコードが正しくコピーされず、正常に表示されなくなる可能性があります。

もしも、あなたがWindowsを使っている場合は

ワンクッション挟むのなら

TeraPadにコピーするのが一番安全です。

まとめ：STORKの見出しをもっとカスタマイズしたいあなたへ

今回、私がご紹介したコードは

サルワカ先生のページを参考に

STORKならではのバグを取り除き

私なりにバランスを取り直したCSSコードになります。

サルワカ先生のサイトには私が紹介した見出し以外にも

いろいろありますので

我こそは！と思う方はぜひ「サルワカ先生」のページを参考に

いろいろとカスタマイズしてみてくださいね。

あなたのブログがオシャレでかわいく素敵になり

さらに愛着が湧いてくれると嬉しいです。

最後までお読みいただきありがとうございました！