どうも、ケイジです!
今回は賢威7でヘッダー画像を設定した際に上下の余白が出来てしまった場合、その余白の幅を調整する方法を説明していきたいと思います。

ヘッダー画像に枠などがある場合は調整が必要

賢威7でヘッダー画像の余白を調整する方法メイン

ヘッダー画像を設定した後で上下がなぜかけっこうな余白ができてしまう場合があります。これは人によって余白の多い、少ないという感覚は違うかもしれませんのでこれから説明していく方法で調整してみてください。

僕のサイトは枠がなく、ヘッダー画像と背景色が同じ白色なので正直余白の調整をしなくてもあまり不自然ではないのですが、あえてこの記事のためにヘッダー画像に枠をつけた画像を用意して設定してみましたので実際にやり方をみてください。

 

 

賢威7でヘッダー画像の余白を調整する方法

ダッシュボード→外観→テーマ編集→base.css

賢威7でヘッダーの余白を調整する方法3

ダッシュボード→外観→テーマ編集→base.css内にヘッダーという部分があります。その中に上記画像の赤枠で囲んでいるpaddingという部分があると思うので、こちらの数値を調整するとヘッダー画像の上下の余白を大きくしたり小さくしたりできます。

※余白を完全になくしたい場合はこちらの数字をどちらも0にしてください。

ヘッダー画像の余白調整の前と後の変化

ヘッダー画像余白変更前

賢威7でヘッダー画像の余白を調整する方法1

ヘッダー画像余白変更後

賢威7でヘッダーの余白を調整する方法2

分かりにくいかもなので、サイト上部からグローバルメニューまでをオレンジの枠で囲み、赤い枠がヘッダー画像となっています。見比べてみると余白が狭くなっているのがわかりますね。これは先程の60px、40pxをそれぞれ小さくしたためです。

ヘッダー画像の余白調整はこの方法でできますので余白が気になる方はやってみてください。まだヘッダー画像の設定自体が分からない方は下記記事を参考にヘッダーを画像にする方法をご参照ください。

賢威7でヘッダーを画像に変更するカスタマイズ方法

 

 

まとめ

ヘッダー画像次第ですが余白があると不自然に空きすぎるイメージを持つ人もけっこういることかと思います。サイトを作っているとこういう細かな部分も自分自身気になってくるものですし、実際に訪問者も違和感を感じるかもしれません。賢威7でヘッダー画像の余白を取るにはこの方法でできますので参考にしてください。

 

賢威7カスタマイズ一覧まとめ記事へ