MuLife

MuLife

楽天とAmazonのお得情報を発信

MuLife

ヘッダー画像の余白をなくして表示する。はてなブログ

SPONSORED LINK

まずはじめに

ブログを始めばかりのペーペーの分際ですが、先輩方のスタマイズ方法を参考にカスタマイズしました。ありがとうございます。

f:id:y_MuRa:20170604193115p:plain

HTML? CCS?

何それおいしいの?状態の カスタマイズ初心者ですが、 ブログを作成してまず思ったのが、オシャレなデザインへの憧れ。といことでとりあえずヘッダー画像を変えてみようと思い、カスタマイズ初心者なりに悪戦苦闘しながら変えてみました。

f:id:y_MuRa:20170619144445p:plain

ヘッダー画像はとりあえず簡単に1400×250pxの背景に色をつけて文字を挿入しただけです。「Simple is best」ですね。windowsの標準ソフト「ペイント」で作成しました。 そのうち変更する予定ですが、予定は未定です。。。(爆)

参考サイト

tawashino.hateblo.jp

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