MuLife

MuLife

日常の調べ事を忘れないようメモ変わりに。。。

MuLife

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

まずはじめに

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

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

初投稿!!はじめましての挨拶。

はじめまして。

Muraと申します。

記録とメモ代わりに更新していこうと思います。

なんせ文章力がない為、誤字、脱字の多い読みづらい文章になるかもしれませんが悪しからず

モチベーションを上げ、飽きないように楽しく更新できればと思います。



って言ってもまだ誰もこのブログ読む人がいないので ただの独り言ですね。

宜しくお願い致します。。。