こんにちは ご訪問ありがとうございます。
今回の記事では、はてなブログのヘッダー画像上部余白がchromeの検証機能で消す事が出来たので手順をまとめておきたいと思います。
参考にさせて頂いた記事はこちらです。↓ ↓ ↓
目次
操作手順
①問題が発生しているヘッダー画像上部余白付近にカーソルを持って行き、右クリックして検証を開きます。
②検証画面が開いたら左上角の↖をクリックします。
※↖の色が青色に変わり編集が可能になります。
③余白が発生している所へカーソルを移動してクリックします。
※検証画面にブログタイトルや画像に関するコードが表示されます。
④どの部分に問題が有るのか、カーソルを移動しながら確認します。
検証機能にはＣＳＳコード等を書き替えた時にどの様に画像が変化するかの確認機能が備わっていますので、問題がありそうな部分を見付けたら、コード上で数値を書き替えて確かめる事が出来ます。
検証画面上で数値等を変えてもそのままブログへの影響はありません。検証画面を消せば元に戻ります。
問題箇所発見！
余白が出来ていたのは下記の場所でした。
#container {
width: 100%;
margin-bottom: 30px;
padding-top: ３７px;
}
検証画面上で３７ｐｘを０ｐｘに変更したところ、ヘッダー画像上部の余白がなくなりました。
下記ＣＳＳコードをコピーしてデザイン→カスタマイズ→ＣＳＳへ追記
元のデーターはそのままでOKです。
#container {
width: 100%;
margin-bottom: 30px;
padding-top: 0px;
}
ＣＳＳ書き替え前後の確認
まとめ
今回はヘッダー画像の上部に出現した余白を無くすために、chromeの検証機能を勉強し何とか解決するする事が出来ました。
参考にさせて頂いた記事も含めてかなり時間を費やしましたが、検証の編集機能を何度も繰り返し操作してみることで何処が変化するのか判ってくると思います。
スポンサーリンク
