Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
どうも、ケイジです!
今回は賢威7でヘッダー画像を設定した際に上下の余白が出来てしまった場合、その余白の幅を調整する方法を説明していきたいと思います。
ヘッダー画像に枠などがある場合は調整が必要
ヘッダー画像を設定した後で上下がなぜかけっこうな余白ができてしまう場合があります。これは人によって余白の多い、少ないという感覚は違うかもしれませんのでこれから説明していく方法で調整してみてください。
僕のサイトは枠がなく、ヘッダー画像と背景色が同じ白色なので正直余白の調整をしなくてもあまり不自然ではないのですが、あえてこの記事のためにヘッダー画像に枠をつけた画像を用意して設定してみましたので実際にやり方をみてください。
賢威7でヘッダー画像の余白を調整する方法
ダッシュボード→外観→テーマ編集→base.css
ダッシュボード→外観→テーマ編集→base.css内にヘッダーという部分があります。その中に上記画像の赤枠で囲んでいるpaddingという部分があると思うので、こちらの数値を調整するとヘッダー画像の上下の余白を大きくしたり小さくしたりできます。
※余白を完全になくしたい場合はこちらの数字をどちらも0にしてください。
ヘッダー画像の余白調整の前と後の変化
ヘッダー画像余白変更前
ヘッダー画像余白変更後
分かりにくいかもなので、サイト上部からグローバルメニューまでをオレンジの枠で囲み、赤い枠がヘッダー画像となっています。見比べてみると余白が狭くなっているのがわかりますね。これは先程の60px、40pxをそれぞれ小さくしたためです。
ヘッダー画像の余白調整はこの方法でできますので余白が気になる方はやってみてください。まだヘッダー画像の設定自体が分からない方は下記記事を参考にヘッダーを画像にする方法をご参照ください。
まとめ
ヘッダー画像次第ですが余白があると不自然に空きすぎるイメージを持つ人もけっこういることかと思います。サイトを作っているとこういう細かな部分も自分自身気になってくるものですし、実際に訪問者も違和感を感じるかもしれません。賢威7でヘッダー画像の余白を取るにはこの方法でできますので参考にしてください。
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
いつも拝見しています。
こちらはただいま賢威を使ってブログ構築しています。
様々なデザイン性の高いテーマが多い時代に、賢威のデザインの低さに正直心折れそうです・・・(笑)
「賢威7」のカスタムについてまとめられているこのページにたどり着き、「自己紹介」を拝見したあと、ただただ、お礼を伝えたくてメッセージしました。
優良コンテンツのご提供ありがとうございます。
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
石川さんおはようございます!
確かに賢威のデザイン性の低さは近年、
他のテンプレートのデザインで良くなっているものが増えたので一層目立っている気がします(^-^;笑
たくさん褒めていただきありがとうございますm(_ _)m
またご訪問お待ちしております!