コクーンに見出しをカスタマイズするために知っておきたい３つのこと

Cocoon(コクーン)の見出しをカスタマイズするなら「３つだけ」知ってればいいんだよな〜

あっどうも、おおきに！おおもと(@so88qa)です

この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しのカスタマイズで使えるプロバティーを３つだけ紹介する記事です。

ぼくが初めて、CSSで調整したのが「見出し」でした。

記事の中で画像の次に目立つのが「見出し」ブログのイメージを左右する重要な部分です。

おおもと

見出しをカスタマイズしただけで、見た目が変わった！

ママ

あら、パパの個性がちゃんとでてるね

Cocoon(コクーン)の見出しは、「シンプル」なのでカスタマイズが簡単なテーマですよね！

『ちょっとCSSにチャレンジしてみようかな〜』と考えている方はこの記事を読んで参考にしていただければ幸いです。

Cocoon(コクーン)の見出し

Cocoon(コクーン)の見出しはこんな感じ

あっ、h1は文字が大きい太字(h1はタイトル)なので気にしないでください。

見出しで使うのは、「h2とh3まで」
人によっては、「h4も使うかな？」って感じです。

おおもと

h2を書いてh3、h4…頑張って詳しく書いたぞ！

ママ

細かく分けすぎていて、読むのが大変だわ

SEO的にはh2だけで十分なのでh2を中心につかって、補足の意味合いでh3を使うことをおすすめします。

Cocoon(コクーン)の見出しのカスタマイズのコツ

コクーンの見出しカスタマイズ方法は大きく分けて２つ

この２つの方法でカスタマイズの入り方が少し変わる。というよりは『２.は一度デフォルトのCSSの使わないところを消す作業』が入ります。

例えば、「h2のボックスを無くして、黒色の下線を入れたい」場合

.h2{
background:none;
border-bottom:solid #000;
}

このようにh2の背景を消すCSSを書く必要があります。

おおもと

あ〜〜〜いくらカスタマイズしても、納得できない！！！

むすめ

いつまで、カスタマイズしてるの？記事を書いたら？

初めてCSSを触る人には難しいと思うので、1.の「デフォルトを生かしたカスタマイズ」をおすすめします。

見出しのカスタマイズで覚えておきたいプロパティー

見出しをカスタマイズするために、覚えておきたいプロパティーは３種類

ママ

あら？少ないのね？

おおもと

少なくても、重要な３つだけ解説するよ

背景のプロパティー「background」

「background」「background-color」どちらかで、背景色を指定してあげるのが簡単

ぼくはの「コクーンの見出しのカスタマイズ」は、「h2をbackground」「h3をbackground-color」で背景色を指定しています。

/*CSSの記載例*/
.post h2 {
background:black;/*背景を黒く塗りつぶす*/
}

.post h2 {
background-color:blue;/*背景を青く塗りつぶす*/
}

線のプロパティー「border」

「border」の後ろに「-」と「top」「bottom」「left」「right」で上下左右に線を引くことができます。さらに

を足してあげるだけで「一本線」「二重線」「点線」に線を変更することができましす。

/*CSSの記載例*/
.post h2 {
border-bottom: solid 1px black;/*黒の一本線を引く*/
}

.post h2 {
border: double 5px blue;/*青の二重線で囲む*/
}

.post h2 {
border: dashed 1px red;/*赤の二重線で囲む*/
}

外枠のプロパティー「box-shadow」

box-shadow：右幅（マイナスなら左幅） 下幅（マイナスなら上幅） ぼかし具合 広がり具合 rgbe(○,○,○,透明度)で指定します。

shadow（シャドウ）とあるように、枠線を立体的に見せる影をつけることができる便利なプロバティー

２つの画像の一番外側に「box-shadow」を使っています。影のようにできたり、点線を挟み込んで縫い目を作ったり便利なプロバティーです。

/*CSSの記載例*/
.post h2{
background-color:blue;
box-shadow:0px 0px 4px 2px rgba(117, 117, 117, 0.56);
}/*青色の背景の周辺にグレーの影をつける*/

.post h2 {
background:black;
box-shadow: 0px 0px 0px 5px black;
border: dashed 2px red;
}/*赤色の縫い目をつける*/

まとめ：覚えるプロバティーは３つ

今回紹介した３点を抑えておくと、元の形を生かしたカスタマイズが簡単になりますね。

ママ

思ったより簡単だったね

ママ

そうね、これなら私にもできそうだわ

おおもと

万が一のためにちゃんとバックアップはとってね

最後に、当ブログのh2・h3のCSSをご紹介します。

/*メインカラムの見出し*/
.post h2 {
background:#a9eee6;
box-shadow: 0px 0px 0px 5px #a9eee6;
border: dashed 2px #f8acac;
padding: 0.7em 1em;
color: #545454;
margin-bottom:2em
}

.post h3 {
background-color:#fff;
border-color:#a9eee6;
border-left: solid 8px #f8acac;
color: #545454;
margin-bottom:2em
}

/*サイドバーの見出し*/
.sidebar h3 {
text-align:center;
background:#a9eee6;
box-shadow: 0px 0px 0px 5px #a9eee6;
border: dashed 2px #f8acac;
padding: 0.4em 0.7em;
color: #545454;
margin-bottom:2em
}

今回の記事は以上になります。