コメチカレポート

気になることを検証したり、おすすめ作品を紹介する雑記ブログ

 

ヘッダーの余白を無くして、画像を横幅いっぱいに表示する方法【はてなブログ】

※当ブログのコードで不具合が発生した場合の責任は負いかねますので、カスタマイズは自己責任でお願いいたします。

f:id:kometika:20181023204515j:plain

 

どうも、近松おこめです。

 

 

今回は、最近ぼくを長年悩ませていた問題が解決されたのでその方法をシェアしていこうと思っております。

 

 

その問題とはズバリ、はてなブログでヘッダー画像を横幅いっぱいに表示する方法です。

 

 

はてなブログではヘッダー画像を設定すると空白ができる

f:id:kometika:20181023210824p:plain

 

f:id:kometika:20181023210550j:plain

 

はてなブログでは普通にヘッダー画像をアップロードすると、指定サイズの1024px ✖ 205pxに固定されて、画像の周りに変な空間が出来るんですよ。

 

 

別にこれでもいいんですが、なんか気になりますよね。

 

 

f:id:kometika:20181023214124j:plain

 

それに、レスポンシブ設定にしている場合はスマホで見ると画像が見切れてしまうんですよ。

 

 

今では多くの方がスマホで記事を見るのでこれは致命的ですよね?

 

 

でもヘッダー画像は使いたい…。

とはいえ、わざわざスマホ用にカスタマイズするのはめんどくさい…。

 

 

そこで、解決策となるのがヘッダー画像を横幅いっぱいに表示する方法なんです!

ヘッダー画像を横幅いっぱいに表示する方法

tukinasikotonoha.hatenablog.com

 

今回のカスタマイズはこちらの記事を参考にさせて頂きました。

 

 

この記事では画像自体をいっぱいに表示するのではなく、空白部分の背景と画像の背景を同じ色にして横幅いっぱいに表示するようなCSSにしています。

 

 

ぼくはこちらのCSSを少しいじって、画像自体を画面いっぱいに表示するようにしました。

 

f:id:kometika:20181023215455j:plain

 

 ▲PCから見た場合▲

 

 

f:id:kometika:20181023215507j:plain

 

 ▲スマホから見た場合▲

 

 

このカスタマイズを使えば、レスポンシブ設定の場合でもこのように画像がちゃんと横幅いっぱいに表示されます。

 

 

御託はいいからどうやればいいんですか?

 

 

はい、それでは気になるCSSはこちらです。

 

<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:1520px;
margin: auto;
display: block;
}
.headernew a{
display:block;
}
.headernew{
margin:0px!important;
}

</style>

<h1 class="headernew">
<a href="ブログのURL">
<img src="挿入したい画像のURL" alt="ブログ名" width="100%">
</a>
</h1>

 

 

こちらのCSSをヘッダ→タイトル下に貼り付けます。

 

 

赤文字の部分はご自身のブログに合わせて変更して下さいね。

 

 

一応画像のURLを取得する方法を説明しておくと

 

f:id:kometika:20181023212551p:plain

 

まずはてなフォトライフを開いて

 

 

f:id:kometika:20181023212558p:plain

 

 ヘッダーにしたい画像を選択して、アップロードして

 

 

f:id:kometika:20181023212815j:plain

 

マイフォトからその画像を開いて、右クリックで画像アドレスをコピーで得られます。

どのテーマでも基本的に使える…はず

f:id:kometika:20181023220817j:plain

 

というわけで、ヘッダー画像を横幅いっぱいに表示する方法でした。

 

 

今回のカスタマイズですが、一応ぼくの使っている「UnderShirt」と以前使用していた「haruni」等で試してみたところ、問題なく使えたので基本的にどのテーマでも大丈夫だと思います。

 

 

同じ問題で悩んでいた方はよかったら試してみて下さい。

 

 

それでは、今日はこの辺りで!!