【Cocoon】タイトルとキャッチフレーズの位置と間隔の調整

Cocoon Child: スタイルシート (style.css) に追加

タイトル下、キャッチフレーズ上の場合

「Cocoon設定」–［ヘッダー］–「キャッチフレーズの配置」の「ヘッダートップ（デフォルト）」のラジオボタンにチェックを入れて［変更をまとめて保存］をクリックする。

/* キャッチフレーズ位置調整 */
.tagline {
  margin-bottom: -8px; /*キャッチフレーズ下マージン*/
}
/* ヘッダーサイズカスタマイズ */
.header { 
  padding-top: 25px; /*ヘッダー上マージン*/
  padding-bottom: 0px; /*ヘッダー下マージン*/
}

タイトル上、キャッチフレーズ下の場合

「Cocoon設定」–［ヘッダー］–「キャッチフレーズの配置」の「ヘッダーボトム」のラジオボタンにチェックを入れて［変更をまとめて保存］をクリックする。

/* キャッチフレーズ位置調整 */
.tagline {
  margin-top: -28px; /*ヘッダー上マージン*/
  margin-bottom: 18px; /*キャッチフレーズ下マージン*/
}
/* ヘッダーサイズカスタマイズ */
.header { 
  padding-top: 6px; /*ヘッダー上マージン*/
  padding-bottom: 0px; /*ヘッダー下マージン*/
}

【Cocoon】ヘッダー内のキャッチフレーズ位置調整

WordPressテーマ Cocoonでの「ヘッダー内のキャッチフレーズ位置調整」についてまとめてみました。今回のカスタマイズはキャッチフレーズの下側マージン設定とヘッダーの上下マージン調整に関するカスタマイズを行いました。

サイトタイトル文字サイズ

.site-name-text {
    font-size: 30px;
}

キャッチフレーズの文字サイズ

.tagline {
    font-size: 20px;
}
@media screen and (max-width: 768px){
.tagline {
    font-size: 18px;
}
}
@media screen and (max-width: 480px){
.tagline {
    font-size: 14px;
}
}