こんばんは。
nanana-blog管理人のナナナです。
ブログを訪問し記事を読んでいただきありがとうございます。
少し前からnanana-blogのトップ画像とグローバルナビゲーションの間にある空白が
気になっていました。
私の中ではヘッダー画像とグローバルナビゲーションの間には空白がなく、
くっついているイメージだったので違和感を感じていました。
普段ブログを書いていると時間がなくてなかなか調べることができないのですが、
やっと空白を消す方法が分かりました。
ヘッダー画像とグローバルナビゲーションのCSSの修正で空白を消すことができます。
本日は私が設定をしたCSSについて紹介します。
ヘッダー画像とグローバルナビゲーションの間にある空白を削除する方法
CSSは ダッシュボード ⇒ デザイン ⇒ カスタマイズ（スパナマーク）
⇒ デザインCSSに入力します。
トップ画像CSS
トップ画像の上下左右は空白を作りたくなかったので、margin、padding共に
「0px」にして空白を作らないようにしました。
#blog-title {
margin: 0 auto;
padding: 0;
}ヘッダー画像の空白だけを削除すると、ヘッダー画像とグローバルナビゲーションの
間に少しだけ空白が残ってしまいます。
これはグローバルナビゲーションの上部に空白があるからです。そこでこの空白を
削除します。
グローバルナビゲーションCSS
全てのmarginを0pxにしてしまうと、グローバルナビゲーションと一番上の
記事タイトルの距離が近くて窮屈なだったので、グローバルナビゲーションの下に
50pxの空白を入れました。
global-navはこのブログのグローバルナビゲーションのclass名になるので
コピーして使う場合は、適宜変更してください。
.global-nav{
margin-top: 0;
margin-bottom: 50px;
padding: 0;
}
この２つのCSSを適用することでヘッダー画像とグローバルメニューの間の
空白がなくなりました。
最後に
いかがだったでしょうか。
ヘッダー画像の他にもグローバルナビゲーションを設置している場合は、そちらの
空白も削除しないと、微妙に空白ができてしまいます。
トップ画像とグローバルナビゲーションがくっつきすぎだと思う場合は
グローバルナビゲーションのmargin-topの数字を変更すれば好みの空白を
作成することができます。
