STORK(ストーク)の見出し設定！ h2h3h4のカスタマイズ

こんにちは！見出しをカスタマイズしてみたネイネイ(@NEYNEYx2)です。

今回は、WordPressテーマのSTORK(ストーク)の見出し設定をする仕方と、h2 h3 h4のカスタマイズをまとめてみました。

見出しの設定にお悩みなら、一読してみてはいかがでしょうか。

おすすめASP

A8.net：定番の最大手
もしもアフィリエイト：独自の報酬制度が魅力的
バリューコマース：定番・独自案件が豊富
afb（アフィビー）：美容系の案件に強い
アクセストレード：通信系・転職系に強い

1 見出しとは？
2 STORK(ストーク)の見出し設定
- 2.1 見出しカラー設定
- 2.2 投稿・固定ページ設定
3 STORK(ストーク)の見出しをカスタマイズ
4 まとめ

見出しとは？

見出しは、ビジュアルエディタでは「段落」ボタンで挿入し、テキストエディタでは「<h2>」と入力し、h1からh6まであります。

見出しを使用する目的は、記事を読みやすくするため、検索エンジンがサイトを巡回しやすくするためにSEOの面からも見出しは大切な存在です。

STORK(ストーク)のデフォルトの見出しは、下記のようになっています。

「見出し<h1> 」は、1つの記事に1個とするルールがあるので、STORK(ストーク)では記事タイトルに「見出し<h1> 」がすでに使用されているので、記事内で使用できる見出しは、h2からh6になります。

また、見出しを使用する場合には、小さい数字から大きい数字になるように順番を守って使用しなければいけません。

下記に「良い例」と「悪い例」をのせます。

○ 良い例

<h1>記事タイトル</h1>

× 悪い例

<h1>記事タイトル</h1>

良い例で、＜h3＞が２連続になっていますが、同じ数字が連続するのはOKになっています。ただし、悪い例のように<h2>の後に<h4>がくるのはNGで、<h2>の後には<h3>を使用するのがルールとなっています。

STORK(ストーク)の見出し設定

STORK(ストーク)の見出し設定をWordPressの管理画面から簡単に変更することができますので、その方法を説明していきます。

見出しカラー設定

STORK(ストーク)の見出し設定の仕方を説明していきます。

「外観/カスタマイズ」を選択します。
項目の中から「サイトカラー設定」を選択します。
スクロールバーを下にスライドすると、「記事ページ見出し(H2)背景」があるので、選択しカラーを変更します。
先ほどの下に「記事ページ見出し(H2)文字色」があるので、選択してカラーを変更します。

投稿・固定ページ設定

「見出し h2」のデザインをWordPressの管理画面から変更する方法を説明していきます。

変更可能な「見出し h2」のパターンは、下記の３つになります。

それでは、実際に「見出し h2」デザインを設定していきます。

「外観/カスタマイズ」を選択します。
「投稿・固定ページ設定」を選択します。
見出しデザインを「シンプル(デフォルト)」「ボーダー」「吹き出し風」の３つの中から選びます。

簡単に変更できましたね。ただ、「これでは物足りない！」と思ったのなら、次に説明するCSSのカスタマイズもぜひお試しください。

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

ここでは、見出しデザインを独自にカスタマイズしていきます。お好みのデザインをCSSにコピぺすることで、カスタマイズできるようにしています。

CSSにコピペしていきますので、下記のどちらかお好みな方で編集ください。

子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
追加CSSを編集する。(外観/CSS編集から変更できます)

子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。

STORK(ストーク)をインストールしたら「子テーマ」を入れよう！

こんにちは！ HTML＆CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導入です。今回は、「子テーマ」を導入する仕方[…]

まず、見出しデザインをCSSでカスタマイズをおこなう前に、「外観/カスタマイズ/投稿・固定ページ設定」から下記のように見出しデザインを「シンプル(デフォルト)」に設定してください。

h2カスタマイズ

ステッチ上下

上下に点線を入れたデザインになります。

コードを表示

CSS

/* 上下ステッチ */
.entry-content h2{
  background: #d5e7ff; /* 背景色 */
  box-shadow: 0px 0px 0px 4px #d5e7ff;  /* 背景色と同じカラーを指定 */
  color: #3e3e3e; /* 文字色 */
  border-top: 2px dashed #ffffff; /* ボーダー上の色 */
  border-bottom: 2px dashed #ffffff; /* ボーダー下の色 */
  border-radius: 0;
  padding: 0.8em 1.1em;
}

リボン風

リボン風のかわいらしい見出しデザインになります。

コードを表示

CSS

/* リボン風 */
.entry-content h2{
  background: #ffe9ea; /* 背景色 */
  box-shadow: 0px 0px 0px 4px #ffe9ea;  /* 背景色と同じ色を指定 */
  color: #3e3e3e; /* 文字色 */
  border-top: 2px dashed #ffffff; /* ボーダー上の色 */
  border-bottom: 2px dashed #ffffff; /* ボーダー下の色 */
  border-radius: 0;
  padding: 0.6em 1.1em;
  margin-bottom: 1.75em;
}
.entry-content h2::before {
  position: absolute;
  content: '';
  top: 111.5%;
  left: 0;
  border-bottom: solid 15px transparent;
  border-right: solid 25px #e6e6e6;
}
@media screen and (max-width: 480px) {
.entry-content h2::before {
  position: absolute;
  left: -1%;
}
}

ストライプ

背景がストライプのデザインになります。

コードを表示

CSS

/* ストライプ */
.entry-content h2{
  background: -webkit-repeating-linear-gradient(45deg, #338fff, #338fff 5px, #66abff 5px, #66abff 10px); /* 背景色 */
  background: repeating-linear-gradient(45deg, #338fff, #338fff 5px, #66abff 5px, #66abff 10px); /* 背景色と同じ色を指定 */
  color: #fff; /* 文字色 */
  border: 1px solid #6993ff; /* ボーダー色 */
  border-radius: 5px;
  padding: 0.8em 1.1em;
}

アイコン付き

先頭にアイコンを追加した見出しデザインになります。

コードを表示

CSS

/* アイコン付き */
.entry-content h2{
  background: #a2ed7f; /* 背景色 */
  color: #ffffff; /* 文字色 */
}
.entry-content h2:before{
  margin-right:15px;
  font-family:"FontAwesome";
  font-size: 1.2em;
  content:"\f06c"; /* アイコンを指定 */
  color: #ffffff; /* アイコン色 */
}

h3カスタマイズ

背景色を追加

ほんのりと背景色をつける見出しデザインになります。

コードを表示

CSS

/* 背景色を追加 */
.entry-content h3 {
  background: #fafafa; /* 背景色 */
}

ボーダー左 + ボーダー下

ちょっと太くしたボーダー左と、細いボーダー下をつける見出しデザインになります。

コードを表示

CSS

/* ボーダー左+ボーダー下 */
.entry-content h3 {
  border-left: 12px solid #ffcd6e;  /* ボーダー左の色 */
  border-bottom: 2px solid #ffcd6e;  /* ボーダー下の色 */
}

ボーダー下２色

ボーダーを左側と右側の２つのカラーを使用した見出しデザインになります。

コードを表示

CSS

/* ボーダー下 ２色 */
.entry-content h3 {
  position: relative;
  border-bottom: 4px solid #ffe9ea; /* ボーダー下 右側の色 */
  border-left: transparent;
}
.entry-content h3:after{
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #ff8d9c; /* ボーダー下 左側の色 */
}

ボーダー左２色

ボーダー左に２つのカラーを使用した見出しデザインになります。

コードを表示

CSS

/* ボーダー左 ２色 */
.entry-content h3 {
  position: relative;
  border-left: 8px solid #ff8d9c; /* ボーダー左 右側の色 */
}
.entry-content h3:after{
  position: absolute;
  bottom: 0px;
  left: -8px;
  z-index: 2;
  content: '';
  width: 4px;
  height: 100%;
  background-color: #ffe9ea; /* ボーダー左 左側の色 */
}

手書き風

手書きで書いたような見出しデザインになります。

コードを表示

CSS

/* 手書き風 */
.entry-content h3{
  border: 3px solid #a2ed7f; /* ボーダー色 */
  box-shadow: 0px 0px 7px 1px #a2ed7f;  /* 影の色 */
  border-radius: 4em .9em 3em .9em / .9em 3em .9em 4em;
}

h4カスタマイズ

ダイヤ

先頭にダイヤのマークがある見出しデザインになります。

コードを表示

CSS

/* ダイヤ */
.entry-content h4:before{
  content: '◆'; /* 記号文字を指定 */
  color: #6da4ff; /* マークの色 */
  margin-right:10px;
}

お花

お花がかわいらしい見出しデザインになります。

コードを表示

CSS

/* お花 */
.entry-content h4{
    position: relative;
}
.entry-content h4:before{
  content: '＊*'; /* 記号文字を指定 */
  color: #ff8d9c; /* マークの色 */
  text-shadow: #ff8d9c 1px 0 10px; /* 影の色 */
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  top: 0px;
  left: 0px;
  -webkit-transform: rotate(45deg);
  margin-right:10px;
}

アイコン付き

先頭にアイコンを追加した見出しデザインになります。

コードを表示

CSS

/* アイコン付き */
.entry-content h4:before{
  font-family:"FontAwesome";
  content:"\f14a"; /* アイコンを指定 */
  color: #ffcd6e; /* アイコン色 */
  margin-right:10px;
}