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

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

ここあです。

 

ブロガーの間で大人気の

WordPressテーマSTORK

 

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

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

 

STORK」は…

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

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

 

しかし、「STORK」の使用者が増えたことで…

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

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

 

訪問者に…

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

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

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

 

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

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

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

 

ということで…

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

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

 

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

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

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

 

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

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

調整もすごく簡単です!

 

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

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

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

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

 

STORK」の見出しはデフォルトが…

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

ストークの残念な見出し

 

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

それって見出しといえるのか?^^;

 

とにかく早くこれをカスタマイズしちゃいましょう。

 

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

HTML」と「CSS」の知識が必要ですが

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

 

今回は初心者のあなたでもコピペだけで変更できるように

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

 

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

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

 

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

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

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

後者の方が

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

 

念のため、「カスタマイズが初めて」という方のために…

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

 

まずはを選ぶ場合…

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

ダッシュボードメニュー

 

テーマ編集画面に移り

「スタイルシート(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)背景がストライプの見出し

私はこのデザインをh4の見出しで使っています。

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

 

↓ 見出し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」だらけになってしまうと…

結局どのコードが一番重要やねん!となりますよね。

 

つまり、多用し過ぎるとSEO的にあまりよろしくないということです。

コードは正しく書かれてこそSEOに強いのです。

 

もし、あなたが自分で「がんばってカスタマイズしよう!」って時は…

! important」のコードは多用しないように気をつけてください。

 

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

必ず直接コピーしてください。

 

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

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

正しくコピーされず、ちゃんと表示されなくなる可能性があります。

 

もしWindowsを使っている場合は

TeraPadにコピーするのが一番無難です。

 

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

今回、私がご紹介したコードはサルワカ先生のページを参考に

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

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

 

私が紹介した見出し以外にもいろいろありますので

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

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

 

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

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

 

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

 

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

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

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

 

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

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

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

 

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

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


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

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


ABOUTこの記事をかいた人

ここあ

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