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

色を変更する方法

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

色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇色とコメントがある行の「 #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(ストーク[…]

おすすめASP

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

ポチして頂くことで、中の人の励みになります。

Amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ！

チャージするたびに、Amazonプライム会員なら最大2.5%分、通常会員なら最大2.0%分のAmazonポイントが貯まります。

＼ TRY NOW!! ／

　Amazonギフト券　公式サイト　

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

見出しとは？

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

見出しカラー設定

投稿・固定ページ設定

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

h2カスタマイズ

ステッチ上下

リボン風

ストライプ

アイコン付き

h3カスタマイズ

背景色を追加

ボーダー左 + ボーダー下

ボーダー下２色

ボーダー左２色

手書き風

h4カスタマイズ

ダイヤ

お花

アイコン付き

色を変更する方法

アイコンを変更する方法

まとめ

STORKの最新記事8件

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

STORK(ストーク)のカテゴリーリストをおしゃれにカスタマイズ！

STORK(ストーク)でワンポイント用のマークをカスタマイズ！

STORK(ストーク)のリストデザインを見やすくカスタマイズ！

STORK(ストーク)のボックスをちょこっとカスタマイズ！

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

STORK(ストーク)で画像下のスペースを消す２つの対処方法

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

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

見出しとは？

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

見出しカラー設定

投稿・固定ページ設定

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

h2カスタマイズ

ステッチ上下

リボン風

ストライプ

アイコン付き

h3カスタマイズ

背景色を追加

ボーダー左 + ボーダー下

ボーダー下 ２色

ボーダー左 ２色

手書き風

h4カスタマイズ

ダイヤ

お花

アイコン付き

色を変更する方法

アイコンを変更する方法

まとめ

STORKの最新記事8件

ボーダー下２色

ボーダー左２色