ヘッダー画像の余白をなくして表示する。はてなブログ
SPONSORED LINK
まずはじめに
ブログを始めばかりのペーペーの分際ですが、先輩方のスタマイズ方法を参考にカスタマイズしました。ありがとうございます。
HTML? CCS?
何それおいしいの?状態の カスタマイズ初心者ですが、 ブログを作成してまず思ったのが、オシャレなデザインへの憧れ。といことでとりあえずヘッダー画像を変えてみようと思い、カスタマイズ初心者なりに悪戦苦闘しながら変えてみました。
ヘッダー画像はとりあえず簡単に1400×250pxの背景に色をつけて文字を挿入しただけです。「Simple is best」ですね。windowsの標準ソフト「ペイント」で作成しました。 そのうち変更する予定ですが、予定は未定です。。。(爆)
参考サイト
www.tukinasikotonoha.com
ありがとうございました。
コードの記述場所
下記コードを
デザイン→
カスタマイズ→ヘッダ→タイトル下にコピペしてください。
<style type="text/css"> .header-image-wrapper {display:none;} #blog-title{display:none;} .headernew img{ max-width:1400px; margin: auto; display: block; } .headernew a{ display:block; background-color:#背景色; } .headernew{ margin:0px!important; } </style> <h1 class="headernew"> <!-- --> <a href="ブログトップページURL"> <img src="ヘッダー画像URL" alt="ブログタイトル" width="100%"> </a> </h1>
下記を自分のサイトの情報に書き換えてください。
背景色
ブログトップページURL
ヘッダー画像URL
ブログタイトル
max-width:1400px;となっていますが、ここもヘッダー画像サイズの横幅と同じにしました。
画像範囲
max-width:1400px;設定なのでフルHDモニタの全画面で見た場合、上の画像の点線内が画像でその周りが背景色です。因みにmax-width:1920px;にすれば全てヘッダー画像表示になりました。
最後に
ヘッダー画像の色と背景色が同じ色にならない というトラブルもありましたが、何とか上手くできました。
色を調べるのに役立つサイト www.colordic.org