あさくまろん

はてなブログで「メニューバー」とヘッダー画像の間の〚余白〛を消す簡単な方法

f:id:asakumamasaru:20170708132205p:plain

はてなブログで「メニューバー」とヘッダー画像の間の〚余白〛を消す簡単な方法っていう話。

ごきげんよう。
メガダンサーのアサクママサルですぜ!!

はてなブログのヘッダー画像下の余白、気になってませんか?

ボクは、はてなブログに来て「1ヶ月ほどの間」ずっと気になってました!!!

というわけで、はてなブログで「メニューバー」とヘッダー画像の間の〚余白〛を消す簡単な方法をご紹介しますね。



メニューバーの「CSS」に「マージントップ」をゼロにして追加する

ほとんどのはてなブロガーさんは、「メニューバー」を使われてることと思いますので、その前提でお話しします。

「デザイン」→「カスタマイズ」→「デザインCSS」に行きます。「メニュー」に関する「CSS」にたどり着いたら、

#menu {
 margin-top: 0px;/*トップ画像との余白*/
 }

「マージントップ」をゼロに指定して、追加するだけ、、、。超簡単です!!!!!!!!

beforeの画像がこちらです。

f:id:asakumamasaru:20170708133220p:plain

「メニューバー」とヘッダー画像の「隙間」が気になります、、、。


afterの画像がこちら。

f:id:asakumamasaru:20170708133244p:plain

「メニューバー」とヘッダー画像の「隙間」がなくなってます!!


アレヤコレヤと悩んでいたのは、何だったんだ!!!! こんな基本的なCSSで実装できるなんて、、、。

と思われた方、心配しないでください。

ボクも悩んでました!!!!!!




まとめ

ボクは、「CSS」と「HTML」の知識を多少独学で身につけていたんですが。まだまだわからないことだらけです!!!

悩みながら、もっともっと試行錯誤してブログを書いていきますよ!!!


トップへ戻る