【Cocoonテーマ】キャッチフレーズの上の隙間を調整する方法

わいひらさんの Cocoonテーマ、無料なのに使いやすくてすごくいいですね。
今回はヘッダー最上部（キャッチフレーズの上）の隙間と、フッター最下部の隙間を広めにカスタマイズしてみました。

カスタマイズ前は(個人的に)ちょっと狭かった

さて、どこが気になったかというと…
キャッチフレーズ上のここです。

なんか狭い！…ような気がする！
ということで広くすることに決めました。

ちなみに一番下はこんなかんじ。

こちらはそんなに気になりませんでした。
皆さんはどうですか？

※上の２点の画像はCocoon配布サイトのキャプチャです。

Cocoon設定では思ってたんと違う結果に

わざわざCSSをいじらなくても Cocoon設定でなんとかなるんじゃないの？ と思ったでしょ。ならなかったんですよねー。

Cocoon設定には「ヘッダー」項目があって、ヘッダーの高さを指定することができます。
が、そこに大きい数値を設定するとヘッダー全体が縦長になって、ヘッダー内にあるキャッチフレーズとブログタイトルが中央に表示されるので、キャッチフレーズ上だけじゃなくタイトル下まで広くなってしまうのです。

今回調整したいのはキャッチフレーズ上だけなので、CSSでなんとかすることにしました。

なお、フッターの高さを調整する設定項目は今のところないようです。

隙間を広くしてゆったりした雰囲気に

カスタマイズはとっても簡単です。

/* キャッチフレーズ上部の隙間 */
.tagline{
  padding-top:10px;
}

個人的には最低でも10pxは欲しいところです。

ぜひ、margin ではなく padding にしてください。
margin で設定していた場合、キャッチフレーズ部分の背景色なんかが指定されたスキンを使用すると見た目が崩れるかもしれません。

フッター下を調整する場合は次のコードを挿入してください。

/* フッター下部の隙間 */
.footer-bottom{
  padding-bottom: 18px; /* デフォルト:18px */
}

アイキャッチを自作している方にはこちらのプチカスタマイズもおすすめです。