気になったことはなんでも調べてメモするブログ
  1. WordPress
  2. 563 view

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

Last updated: 2019/06/05

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

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

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

ヘッダー部分のキャプチャ

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

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

フッター部分のキャプチャ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




WordPressの最近記事

  1. ブログのアイキャッチの最適サイズは?〜1200×630がおすすめな理由〜

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

  3. 【Simplicity / Cocoon】アイキャッチをセンタリングする

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP