ヘッダー画像とグローバルナビゲーションの間の空白を削除する方法

f:id:nanana-blog:20190605215207j:plain

こんばんは。

 

nanana-blog管理人のナナナです。

 

ブログを訪問し記事を読んでいただきありがとうございます。

 

少し前からnanana-blogのトップ画像とグローバルナビゲーションの間にある空白が

気になっていました。

f:id:nanana-blog:20190603231435j:plain

 

私の中ではヘッダー画像とグローバルナビゲーションの間には空白がなく、

くっついているイメージだったので違和感を感じていました。

普段ブログを書いていると時間がなくてなかなか調べることができないのですが、

やっと空白を消す方法が分かりました。

ヘッダー画像とグローバルナビゲーションのCSSの修正で空白を消すことができます。

本日は私が設定をしたCSSについて紹介します。

 

 
 

 

ヘッダー画像とグローバルナビゲーションの間にある空白を削除する方法

 CSSは ダッシュボード ⇒ デザイン ⇒ カスタマイズ(スパナマーク)

⇒ デザインCSSに入力します。

f:id:nanana-blog:20190603234115j:plain

 

トップ画像CSS

トップ画像の上下左右は空白を作りたくなかったので、margin、padding共に

「0px」にして空白を作らないようにしました。

 

#blog-title {
    margin: 0 auto;
    padding: 0;
}

 

ヘッダー画像の空白だけを削除すると、ヘッダー画像とグローバルナビゲーションの

間に少しだけ空白が残ってしまいます。

f:id:nanana-blog:20190603233600j:plain

 

これはグローバルナビゲーションの上部に空白があるからです。そこでこの空白を

削除します。 

 

グローバルナビゲーションCSS

 全てのmarginを0pxにしてしまうと、グローバルナビゲーションと一番上の

記事タイトルの距離が近くて窮屈なだったので、グローバルナビゲーションの下に

50pxの空白を入れました。

 

global-navはこのブログのグローバルナビゲーションのclass名になるので

コピーして使う場合は、適宜変更してください。

 

.global-nav{
   margin-top: 0;
   margin-bottom: 50px;
   padding: 0;
}

 

 

f:id:nanana-blog:20190603233629j:plain

 

この2つのCSSを適用することでヘッダー画像とグローバルメニューの間の

空白がなくなりました。

 

 

最後に

いかがだったでしょうか。

ヘッダー画像の他にもグローバルナビゲーションを設置している場合は、そちらの

空白も削除しないと、微妙に空白ができてしまいます。

トップ画像とグローバルナビゲーションがくっつきすぎだと思う場合は

グローバルナビゲーションのmargin-topの数字を変更すれば好みの空白を

作成することができます。