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

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

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

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

見出しとは？

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

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

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

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

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

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

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

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

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

見出しカラー設定

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

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

投稿・固定ページ設定

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

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

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

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

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

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

ここでは、見出しデザインを独自にカスタマイズしていきます。お好みのデザインを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;
}

色を変更する方法

これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。

色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇色とコメントがある行の「 #d5e7ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、コチラ（↓）のサイトがおすすめです。

配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

アイコンを変更する方法

アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。

Font Awesome

The world’s most popular and easiest to use icon set just go…

アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”\f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。

まとめ

どうですか？　うまく設定することができましたか。

見出しデザインを変えるれば、どんどん愛着あるサイトになっていきますよね。

それでは、まったです。　(‘◇’)ゞ

コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。

関連記事

【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ

こんにちは！ カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめましたので、ご紹介いたします。 STORK(ストーク[…]