ロゴの余白を調整するCSSの例

ロゴの位置を調整する

「外観」>「カスタマイズ」>「テーマ設定」から「ヘッダー・フッター」に進むと、ロゴ画像の高さが調整できます。
ロゴ画像の高さだけでは調整ができない場合は、以下のようなCSSで調整してみてください。

CSSの追加

ヘッダーロゴの調整

.hdr__logo {
padding: 10px 0 0px;
}
@media screen and (max-width:639.98px) {
.hdr__logo {
padding: 0px 0 10px;
}
}

上記では、PC表示の際に上部に余白を、スマホ表示の際に下部に余白を設定しています。

CSSの記述場所について

子テーマを利用の際は「style.css」に記述しましょう。
カスタマイズの「追加CSS」に記述することも可能ですが、その場合はテーマのアップデート時にご注意ください。
※同名のフォルダでアップデートする場合、カスタマイズの内容は保持されますが念のためバックアップをお取りください。