私が今月おすすめする”本”

【Cocoon】見出しをカスタマイズする方法を解説|テンプレートも用意

Web制作

今回は、Wordpressの無料テーマ『Cocoon』の見出しである『h2』『h3』のデザインを変更したいと思っている人に参考になれば幸いです。

【Cocoon】見出しをカスタマイズをする方法

Cocoon子テーマをインストールする

Cocoon子テーマとは、デザインの変更やカスタマイズするさいに使います。

親テーマである『Cocoon』でプログラミングの中身をいじってしまうと修正が効かなくなった時に戻ることができません。なので、子テーマでプログラミングをいじることによって、修正が効かない場合でも子テーマを削除すれば親テーマには問題はありません。

外観➧テーマエデイターにCSSコードを追加

デザインのプログラミング言語はCSSで作られています。

見出し2(h2)と見出し3(h3)のデザインを変更します。

<例>

h2{

 padding: 1rem 2rem;
 border-top: 3px solid #000;

}

h3{

 border-bottom: 3px solid #000;

}

上記の状態だと、見出し2には上部に太線、見出し3には下部に太線が入ります。

デザイン変更後は保存を押しましょう。

親テーマ優先のデザインになるときも

中には、親テーマのデザインと子テーマで自分がやりたいデザインが重なってしまうことがあります。その場合は、親テーマの『style.css』の1598行~1634行目の中にh2とh3があります。そのh2{}h3{}ともにカッコの中身を消して保存を押してください。

また、それ以外の方法としては

h3{ border-bottom: 3px solid #000 !important; }

つまり、『!important』を入れることによって子テーマのデザインを優先します!と意味になるので入れてみてください。

【Cocoon】見出しテンプレート

下線部に太線

h2 {
  /*線の種類(実線) 太さ 色*/
  border-bottom: solid 3px black;
}

当サイトでも使っているデザインになります。シンプルなデザインにしたい方はおすすめです。

全体を線で囲む

h2 {
  color: black;/*文字色*/
  border: solid 3px black;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

まとめ

見出しのデザインはサイトのデザインにもよりますが基本的にはシンプルなものがいいです。なのであまりごちゃっとしたデザインを使わないようにしましょう。

Web制作Webデザイン・プログラミング
EDITOR
鹿丸

B-PLAYGROUND運営。
愛知県在住│フリーライター
1998年生まれ。DIYや読書、植物観賞が趣味。Podcast「植物男子のおうち時間」連載中。将来はクッキングパパになりたいと思うこの頃。

鹿丸をフォローする
スポンサーリンク



B-PLAYGROUND
タイトルとURLをコピーしました