page contents

たれいちどっとこむ

やりたいことをやりたいように、がんばらないブログ

たれいちどっとこむ

【簡単】ヘッダ画像を余白無し【カスタマイズ】

この記事を読むのに必要な時間は約3分です。

おはようございます。
たれいちです。

気付いてもらえただろうか

ブログ名の変更と上の画像ね。

あとPROに昇格しました。

 

ヘッダ画像を用意しました。

文字はWordのワードアート。

いつぞや描いたキャラクターの画像。

GIMPで組み合わせて完成。

比較的時間をかけずにできました。

 

サイズは1000×200

暗室で三角木馬にまたがるマスコットキャラクターうまとらに光が射し込んでいるヘッダー画像

 暗室で光が射し込んでいるイメージで。

 

コピペで簡単にできたので紹介。

 

参考にした所

というかそのままだけど

tukinasikotonoha.hatenablog.com

ヘッダー画像にリンクが付いているということがわかるように赤枠を付けた画像

とりあえず上をクリックすればトップページへいけるようになりました。

 

やり方は

1.画像を用意する

2.画像をアップロードする

3.下記のソースコードをコピペ

 

「デザイン」⇒「カスタマイズ」⇒「ヘッダ」⇒「タイトル下」

 <style type="text/css">

   .header-image-wrapper {display:none;}

   #blog-title{display:none;}

   .headernew img{

       max-width:1120px;

       margin: auto;

       display: block;

   }

   .headernew a{

       display:block;

       background-color:#fde6ff;

   }

   .headernew{

       margin:0px!important;

   }

 

</style>

 

<h1 class="headernew">

     <a href="ブログのトップページURL">

        <img src="ヘッダー画像のURL" alt="ブログタイトル" width="100%">

     </a>

</h1>

 

貼り付けたら

・ブログのトップページURL

・ヘッダー画像のURL

・ブログタイトル

 

この3箇所を編集しましょう。

 

背景色はここを編集

       background-color:#fde6ff;

 

これだけ!

簡単!!

 

うむ、やはり我が主役だな

まー、マスコットだからね

しかし
我がぼやけているようだが……

別にモザイクでも
良かったんだけどね

主よ、無体な仕打ちだな

(全体が映せるならなー)