Cocoon(コクーン)の見出しをカスタマイズするなら「３つだけ」知ってればいいんだよな〜、、、
あっどうも、おおきに！おおもと(@so88qa)です
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しのカスタマイズで使えるプロバティーを３つだけ紹介する記事です。
ぼくが初めて、CSSで調整したのが「見出し」でした。
記事の中で画像の次に目立つのが「見出し」ブログのイメージを左右する重要な部分です。
見出しをカスタマイズしただけで、見た目が変わった！
あら、パパの個性がちゃんとでてるね
Cocoon(コクーン)の見出しは、「シンプル」なのでカスタマイズが簡単なテーマですよね！
『ちょっとCSSにチャレンジしてみようかな〜』と考えている方はこの記事を読んで参考にしていただければ幸いです。
![HTML＆CSSとWebデザインが1冊できちんと身につく本 [ 服部雄樹 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0648/9784774190648.jpg?_ex=128x128)
Cocoon(コクーン)の見出し
Cocoon(コクーン)の見出しはこんな感じ
- ｈ２はボックスに覆われたスタイル
- h3は左側に太いラインと上下の細いライン
- h4は上下の細いライン
- h5は下の細いライン
- h6は下にもっと細いライン
あっ、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」
- 線のプロパティー「border」
- 外枠のプロパティー「box-shadow」
背景のプロパティー「background」
- background 背景全般
- background-color 背景色
「background」「background-color」どちらかで、背景色を指定してあげるのが簡単
ぼくはの「コクーンの見出しのカスタマイズ」は、「h2をbackground」「h3をbackground-color」で背景色を指定しています。
/*CSSの記載例*/
.post h2 {
background:black;/*背景を黒く塗りつぶす*/
}
.post h2 {
background-color:blue;/*背景を青く塗りつぶす*/
}
線のプロパティー「border」
- border 線で囲む
- border-bottom 下線を引く
- border-left 左側に線を引く
「border」の後ろに「-」と「top」「bottom」「left」「right」で上下左右に線を引くことができます。さらに
- solid
- double
- dashed
を足してあげるだけで「一本線」「二重線」「点線」に線を変更することができましす。
/*CSSの記載例*/
.post h2 {
border-bottom: solid 1px black;/*黒の一本線を引く*/
}
.post h2 {
border: double 5px blue;/*青の二重線で囲む*/
}
.post h2 {
border: dashed 1px red;/*赤の二重線で囲む*/
}
外枠のプロパティー「box-shadow」
- 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;
}/*赤色の縫い目をつける*/
まとめ：覚えるプロバティーは３つ
- 背景のプロバティー「background」
- 線のプロバティー「border」
- 外枠のプロバティー「box-shadow」
今回紹介した３点を抑えておくと、元の形を生かしたカスタマイズが簡単になりますね。
思ったより簡単だったね
そうね、これなら私にもできそうだわ
万が一のためにちゃんとバックアップはとってね
最後に、当ブログの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
}今回の記事は以上になります。
関連記事もみてね！それじゃ、また！！
質問などがあれば、コント覧に書き込んでください！