STORK19|見出しデザインの設定とカスタマイズ例

STORK19で見出しデザインの設定はお済みでしょうか?

本記事では、STORK19をご利用の方に向けて、見出しデザインの設定方法と、カスタマイズ例をご紹介します。

STORK19|4種類の見出しデザイン

STORK19では、4種類の見出しデザインが用意されています。

  • シンプル(デフォルト)
  • ボーダー
  • 吹き出し
  • ステッチ

この中から好みのデザインを選択し、カラー変更もできます。

シンプル(デフォルト)

ボーダー

吹き出し

ステッチ

見出しデザインの設定方法

STORK19の見出しデザインとカラーの設定手順をご紹介します。

  • 見出しデザインを選ぶ
  • 見出しのカラーを決める

見出しデザインを選ぶ

まずは見出しデザインの選択です。

WordPress管理画面で、【外観】>【カスタマイズ】を開きます。

次に【投稿・固定ページ設定】をクリックします。

見出しデザインの4種類からひとつを選び【公開】をクリックします。

これで見出しデザインの選択が完了です。

見出しのカラーを決める

次に、見出しの色を変更します。

同じく【外観】>【カスタマイズ】を開き、【サイトカラー設定】をクリックします。

メインコンテンツの項目で、【見出し(H2)背景】と【見出し(H2)文字色】を好きな色に変更します。

【公開】をクリックすれば設定完了です。

見出しのカスタマイズ例(当ブログの場合)

当ブログでは、STORK19の見出しデザインを独自にカスタマイズしています。

以下のとおり、かなりシンプルなデザインにしています。

見出しを独自にカスタマイズするには、CSSの編集が必要です。

上記のような見出しにするには、4種類の見出しのうち【ボーダー】を選択し、以下のコードを【追加CSS】へコピーペーストします。

/*h2*/
.h_boader .entry-content h2:not([class*="is-style-style"]), .h_boader .homeadd_wrap h2 {
	   border-top: 0;
    border-bottom: 3px solid;
}
.h_boader .entry-content h2:not([class*="is-style-style"]):not(.has-text-color), .h_boader .homeadd_wrap h2 {
  border-color: #808080;
}
/*h3*/
.h_boader .entry-content h3:not([class*="is-style-style"]) {
  border-width: 10px;
  border-bottom: none;
  padding: 0.6em;
}
.entry-content h3:not([class*="is-style-style"]) {
  border-left: 4px solid;
}
.entry-content h3:not([class*="is-style-style"]):not(.has-text-color) {
  margin-top: 4em;
	 margin-bottom: 2em;
}

シンプルなデザインが好きな方は、ぜひ試してみてください。

まとめ:STORK19で見出しデザインを選ぼう

STORK19の見出しデザインについてご紹介しました。

見出しのデザインや色を変えるだけで、記事の印象がガラッと変わります。

ぜひ自分のサイトイメージや方針に合わせて、見出しデザインを選んでみてくださいね。

その他、STORK19のカスタマイズは以下記事にまとめていますので参考にしてみてください。

最後までご覧いただきありがとうございました。

▶︎ブログ記事の構成手順はこちら
▶︎ブログ収益化の手順はこちら