見出しのカスタマイズ失敗談―コピペだけじゃダメだった―

使用テーマはCocoon

使用テーマはCocoon

Web知識がない私のようなおばさんにも使うことができる、とても親切なテーマだと思います。

使うことはできていますが、使いこなせているか？と聞かれたら、正直使いこなせてないです(笑)

それでも、ブログとして形になっているのはCocoonのおかげです。とても助かっています。

コピペするだけ！？

今まではCocoonの設定を使って見出しの色を変えていました。カラーコードの変更だけで一瞬でテーマカラーが変えられるので本当に便利。

でも、ちょっとだけ見出しのカスタマイズにチャレンジしてみたくなりまして、いろいろ調べてみました。

簡単、コピペOK、cssに貼るだけでOK、と書かれたサイトから気に入ったものを寄せ集めてきました。

最終的に出来上がったのは、こんな感じです。

このような形になるまでに、何回か失敗をしたのでその失敗談を書きたいと思います。

最初の失敗

h1で作ってあるサイトが多かったので、それをh2～h6に変更。この程度の知識はあります。

最初の失敗は、これをパパッと貼り付けました。

h2 {
  background: #e2ffc7;/*背景色*/
  box-shadow: 0px 0px 0px 5px #e2ffc7;/*影背景色*/
  border: dashed 2px #4f9909;/*囲み線*/
  padding: 0.8em 0.5em;/*文字の上下 左右の余白*/
  color: #333333;/*文字色*/
}

貼るだけ、簡単、それを鵜呑みにして失敗したパターンです。上のコードのままではCocoonでは使えません。

変更したかった見出しは一切変わらず、なぜか本文下の変な場所に謎の枠が出来ました。失敗した！！と慌てて元に戻してしまったので失敗したところの画像は撮っていません（撮らなかったことも失敗）

２番目の失敗

もう一度調べ直したら、Cocoonの元から入っているコードをリセットしなければいけないとか何とか・・・詳しいことは理解できませんでしたが、リセットしてから新しい見出しのコードを貼るということが書いてありました。

これがリセットのコード。０にするということでしょうか。一気にやって失敗すると困るのでまずはh2だけ子テーマのスタイルシート (style.css)に書き込みました。

.article h2 {
    padding: 0;
    background: none;
}

これでh2の見出しはリセットできたから今度こそ！と再び先ほどのh2タグをcssに書き込みました。

h3以降はリセットコードを必要な個数分をコピペして、h2の部分だけをh3、h4・・・と書き換えればOKです。

h2タグは必ずリセット用のコードの下に貼り付けること！

あらら～？

なぜか見出しが変わらない。（リセットのコードに間違いはありません）

３度目の正直

リセットをしてから、コピペするだけのコードを書き込んで、あとは何がいけないの！？

h2～h6までのタグは全部準備できているのに、思うように表示されない。

もう一度検索をして調べました。今度はCocoonのカスタマイズに絞って検索。
早くから絞り込めばよかったです。

これがCocoon用に直したコード。

.article h2 {
  background: #e2ffc7;/*背景色*/
  box-shadow: 0px 0px 0px 5px #e2ffc7;/*影背景色*/
  border: dashed 2px #4f9909;/*囲み線*/
  padding: 0.8em 0.5em;/*文字の上下 左右の余白*/
  color: #333333;/*文字色*/
}

違いがわかりますか？上が最初に書き込んで失敗したもの。下が修正したもの。

h2の前、『.article 』の有無です。Cocoonのリセット用のコードでも先頭に『.article 』が付いていますよね。

それがとても大事だったんです。

すでに用意してあったコードの先頭に『.article 』を加えました。『.article（半角スペース）h2』半角スペースを忘れずに！

成功

h2タグが成功したので、ほかの見出しも変更。

子テーマのスタイルシート (style.css)に、

リセット用のコードをh2～h6まで作って貼り、その下に
『.article』を加えた新しい見出しコードを貼り、
更新。

出来ましたー！

見出しコード

これが私が使っているコードです。色や線の太さなどは調べて直しました。

#4f9909　←メインとなっている緑色
#e2ffc7　←h2とh3の背景に使っている薄い緑色
#333333　←文字色は黒に近いグレー

使用している色はこの３つだけなので、違うテーマカラーにしたい場合はこのカラーコードを変えればOK。

solid　←直線
dashed　←点線
double　←二重線
padding　←余白

こんな感じで理解し始めたら太さや見出し部分のサイズ（高さ）なども変更できるようになってきました。ただし、細かいことは相変わらず分かりません。

.article h2 {
  background: #e2ffc7;/*背景色*/
  box-shadow: 0px 0px 0px 5px #e2ffc7;/*影背景色*/
  border: dashed 2px #4f9909;/*囲み線*/
  padding: 0.8em 0.5em;/*文字の上下 左右の余白*/
  color: #333333;/*文字色*/
}
.article h3 {
  background: #e2ffc7;/*背景色*/
  padding: 0.6em 0.5em;/*文字の上下 左右の余白*/
  border-left: solid 4px #4f9909;/*左線*/
  border-bottom: dashed 2px #4f9909;/*下線*/
  color: #333333;/*文字色*/
}
.article h4 {
  padding: 0.6em 0.5em;/*文字の上下 左右の余白*/
  border-top: solid 1px #4f9909;/*上線*/
  border-bottom: solid 3px #4f9909;/*下線*/
  color: #333333;/*文字色*/
}
.article h5 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 6px #4f9909;
}
.article h6 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px #4f9909;
}

思い通りの形になると楽しいですね♪♪♪