WordPressで見出しを飾る最適解-テーマはCocoonに

WordPressで他のサイトと自分のサイトを近づける第一歩ともいえる見出しデザイン。

多くのサイトが見出しのカスタマイズ方法を解説していますが、

Classicエディターという従来のエディターでないと使いにくい方法もあり

現在最新のGutenbergエディターでも使いやすい見出しのカスタマイズ方法はなかなか見つけられない方もいると思います。

「見出しを手っ取り早くきれいにしたい」

そんな悩みへの記事です。

テーマ

「テーマはこれしかダメ！」というこだわりがある方を除いて、

テーマは”Cocoon”をおすすめします。

私も最初テーマ決めに迷いましたが、Cocoonに落ち着きました。

理由はいろいろありますが、「見出しを飾るのが楽」というのが大きかったです。

変えてしまえばあとは楽です。

Cocoonはこちらからダウンロードできます。親テーマ、子テーマ両方ダウンロードします。

※以下の2つのリンクは外部ページです。

WordPress管理画面でテーマ→新規追加→テーマのアップロードからダウンロードしたファイルを選びアップロードした後、有効化してください。

利用規約もご確認ください。

Cocoonで見出しを飾る方法はいくつかありますが、

一番手軽な方法は、管理画面の”Cocoon 設定”を使った方法です。

管理画面からCocoon 設定をクリックすると下のような画面になります。

下に表示されている”スキン一覧“のリストからお好みのデザインを選ぶことで

簡単に見出しのデザインを変更することができます。

写真アイコンをホバーするとスキンのスクリーンショットが表示されます。

変更したいスキンのラジオボックスをクリックして”変更をまとめて保存”をクリックすると変更完了です。

追加CSSを利用すると、さらに自分好みに見出しをデザインできます。

管理画面で”外観”→”カスタマイズ”→”追加CSS”の順にクリックすると、

下のような画面が表示されると思います。

左のテキストボックス内にある、”.article h〇”で始まるコードのカッコ{}内にコードを入力して、公開ボタンをクリックすることで反映できます。

例としてこのサイトで使っているCSSです。

テキストの末尾に貼り付けると反映されると思います。

h2見出し用(記事の中で一番大きい見出し)

.article h2 {
padding:2%;
background: #f2f2f2;
border-left:6px solid #2B4B65;
}

h3見出し用(記事の中で二番目に大きい見出し)

.article h3 {
padding:1%;
border: solid #f2f2f2;
border-left:6px solid #e2367b;
}

テーマの宣伝になってしまいましたがお好みの見出しにデザインできましたでしょうか？

私の場合はこの方法で見出しの問題を乗り切ったので、この記事がお役に立てれば幸いです。

最後までお疲れさまでした。

質問などあればコメント欄にお寄せいただければ、分かる範囲でですが答えさせていただきます。