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

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

 

ここあです。

 

ブロガーの間で大人気の

WordPressテーマSTORK。

 

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

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

 

STORKは…

  • 見た目の美しさ(オシャレ)
  • 多機能でカスタマイズも簡単!
  • 書くことに専念できる!

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

 

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

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

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

 

訪問者に…

「どこも似たようなデザインだな」

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

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

 

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

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

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

 

ということで…

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

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

 

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

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

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

 

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

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

調整もすごく簡単です!

 

コピペだけ!STORK(ストーク)の見出しをカスタマイズしよう!

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

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

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

 

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

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

ストークの残念な見出し

 

 

h4の見出しに至っては単なる文字でしかありません。
それって見出しといえるのか?^^;

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

  1. 外観 → テーマの編集 → スタイルシート(style.css) に記述する方法
  2. 外観 → カスタマイズ →  追加CCS に記述する方法

 

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

後者の方が

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

 

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

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

 

まずはを選ぶ場合…

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

ダッシュボードメニュー

 

 

テーマ編集画面に移り

スタイルシート(style.css)を選択。

スタイルシート

 

 

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

スタイルシート

 

 

を選ぶ場合は…

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

ダッシュボードメニュー

 

 

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

追加CSS

 

 

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

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

dropshadow

 

 

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

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

 

STORK(ストーク)の見出しテンプレレート12選

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

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

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

 

テンプレートによっては

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

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

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

 

初期設定の切り替えは…

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

投稿・l固定ページ設定

 

シンプルな見出し

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

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

 

1)二重線の見出し

二重線の見出し

 

非常にシンプルですが

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

見出し2(h2)用のコード(コピペでOK! 初期設定:ボーダー)

.entry-content h2{
border-bottom: double 5px #FFC778 !important;
/* 線の種類(二重線)太さ 色 */
margin: 30px 0px 20px;
}

※h3を変える場合は、1行目のh2h3にしてmargin: 30px 0px 20px;の上にborder-left: none;を足してください。#FFC778にお好きなカラーコードを入れてください。5pxの数字を変えると二重線の太さが変わります。

 

 

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

ドット線の見出し

 

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

見出し2(h2)用のコード(コピペでOK! 初期設定:ボーダー)

.entry-content h2{
color: #5ab9ff !important;/* 文字の色 */
border-bottom: dotted 4px #5ab9ff !important;
/* 線の種類(点線)点線の大きさ 色 */
margin: 30px 0px 20px;
}

※h3を変える場合は、1行目のh2h3にしてmargin: 30px 0px 20px;の上にborder-left: none;を足してください。#5ab9ffにお好きなカラーコードを入れてください。4pxの数字を変えると点線の大きさが変わります。dotteddashedに変えると破線になります。solidに変えると1本の下線に変わります。

 

 

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

上下船の入った見出し

 

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

↓ 見出し2(h2)用のコード(コピペでOK! 初期設定:ボーダー)

.entry-content h2{
color: #364e96 !important;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;
/*上線 線の種類 太さ 色*/
border-bottom: solid 3px #364e96;
/*下線 線の種類 太さ 色*/
}

※h3を変える場合は、1行目のh2h3にしてborder-top: solid 3px #364e96;の上にborder-left: none;を足してください。#364e96にお好きなカラーコードを入れてください。3pxの数字を変えると線の太さが変わります。

 

 

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

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

 

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

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

.entry-content h2{
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #eaf3ff;/*背景色*/
border-bottom: solid 3px #516ab6;/*下線*/
}

※h3を変える場合は、1行目のh2h3にしてcolor: #010101;/*文字色*/の上にborder-left: none;を足してください。#010101#516ab6にお好きなカラーコードを入れてください。3pxの数字を変えると下線の太さが変わります。

 

 

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

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

 

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

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

.entry-content h2{
padding: 0.5em;/*文字周りの余白*/
color: #494949 !important;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}

※h3を変える場合は、1行目のh2h3にしてください。#494949#fffaf4#ffaf58にお好きなカラーコードを入れてください。5pxの数字を変えると線の太さが変わります。

 

 

6)立体感のある見出し

立体感のある見出し

 

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

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

.entry-content h2{
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

※h3を変える場合は、1行目のh2h3にしてください。#494949#f4f4f4#7db4e6にお好きなカラーコードを入れてください。5pxの数字を変えると線の太さが変わります。

 

 

オシャレな見出し

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

 

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

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

 

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

↓ 見出し2(h2)用のコード(コピペでOK! 初期設定:ボーダー)

.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%;
}

※h3を変える場合は、1行目と6行目のh2h3にしてposition: relative;の上に、border-left: none;を足してください。そうすることでh3の左の線を消すことができます。#cce4ff#5472cdのカラーコードを変えると色が変わります。

 

 

8)リボン風の見出し

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

リボン風の見出し

 

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

.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);
}

※h3を変える場合は、1行目と7行目のh2h3にしてください。#0a69ddのカラーコードを変えると色が変わります。

 

 

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

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

 

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

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

.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;
}

※h3を変える場合は、1行目のh2h3にしてください。#dfefffのカラーコードを変えると色が変わります。

 

 

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

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

 

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

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

.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);
}

※h3を変える場合は、1行目のh2h3にしてください。#010079のカラーコードを変えると文字の色が変わります。

 

 

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

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

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

 

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

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

 

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

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

 

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

 

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

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

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

.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: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*アイコンサイズ*/
left: 0;/*アイコンの位置*/
top: 21px;/*アイコンの位置*/
color: #5ab9ff;/*アイコン色*/
}

 

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

.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: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*アイコンサイズ*/
left: 0;/*アイコンの位置*/
top: 16px;/*アイコンの位置*/
color: #5ab9ff;/*アイコン色*/
}

/*アイコン色*//* 下線の太さや色 */のカラーコードを変えると色が変わります。下線の色を変更する場合はgrayの部分を#から始まるカラーコードをいれてください。

 

 

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

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

 

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

 

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

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

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

.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: "Font Awesome 5 Free";
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! 初期設定:シンプル)

.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: "Font Awesome 5 Free";
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の見出しはコピペだで簡単にカスタマイズできる!

 

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

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

 

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

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

 

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

いろいろありますので

 

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

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

 

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

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

 

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

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

他にもいろいろカスタマイズ方法を紹介していますので

ぜひチェックしてみてくださいね。

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

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。