【Cocoon】スマホ時のヘッダー＆フッターロゴのサイズや余白を調整

未定義
2025.04.21
記事内に広告が含まれています。

このブログ（モコモコ日和）はWordpressの無料テーマCocoonを使っています。スマホ時のヘッダー＆フッターロゴのサイズや余白を調整した時のメモです。コピペするだけで簡単！

ヘッダー＆フッターロゴのサイズや余白を調整

以下の内容を調整しました。

  • スマホで見た時のヘッダーロゴが大きい
  • 1023px以下になった時や通常時のヘッダーロゴの余白が気になる
  • Cocoon側で最初から表示されるフッターのロゴが大きい
  • フッターのロゴを小さくしたら今度は位置が気になる

追加CSSまたは、style.cssに追加するコード

モコモコ日和では子テーマのstyle.cssに追加しています。

ヘッダーロゴ用

.logo img { margin-bottom: 0.25em; }
/*1023px以下*/
@media screen and (max-width: 1023px){
.logo img { margin-bottom: 1em; }
}
/*480px以下*/
@media screen and (max-width: 480px){
.logo img { max-height: 40px; width: auto; }
}

フッターロゴ用

.footer-bottom-logo .logo-image { padding: 0 0 2em 0; max-width: 300px; }
.footer-bottom-logo img { height: 40px; width: auto; }

補足：CSSが反映されない場合の対処法

CSSを追加・変更したのに何故か反映されない場合は、ブラウザをスーパーリロード（Shift + 更新ボタンとか）するかブラウザのキャッシュをクリア。