「コピペOK!」はてなブログのヘッダー画像を自分で設置する簡単な手順を解説する

はてなブログでは、ヘッダー画像を設置する機能がデフォルトで準備されています。

ただ、自分で自由にカスタマイズしたいのであれば自分で設定した方が楽な場合もあります。

今回簡単な方法を紹介するので、これをもとにカスタマイズしてみて下さい。

始めに注意点です。

この記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご注意ください。

PLAIN - テーマ ストア

ヘッダー画像の設置方法

ヘッダー画像設置は、デザイン設定の部分から行います。

f:id:oyomiyo:20180909220240p:plain

赤枠の部分に以下のコードをコピペしてください。

CSS

<div class="header-01">
    <img src="ココに画像のURL"/>
</div>

<style type="text/css">

#blog-title {
    display: none; /*元々のヘッダーを非表示に*/
}

.header-01 {
    position: relative;
    line-height: 0;
    width: 100%;
}

.header-01 img {
    width: 100%;
}

</style>

当たり前ではありますが、上のコードには画像のURLが含まれていないのでまだ何も表示されないはずです。

今回私は以下の画像を準備したのでこれを使おうと思います。

f:id:oyomiyo:20180908160910j:plain

この画像のURLを先程のコードの所定の位置に追加した場合このようになります。

CSS

<div class="header-01">
    <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180908/20180908160910.jpg"/>
</div>

赤表示の部分が私の画像のURLです。

これを含む全てのコードをヘッダーのタイトル下の部分にコピペしてください。

f:id:oyomiyo:20180909193938p:plain

画像が表示されているのが分かるかと思います。

この方法ですると、画像が全面表示(横幅100%)で表示されます。画面の横幅が小さくなっても画像は縦横比を守ったまま縮小されるので、周りに余白が入ることはありません。

PC表示でもスマホ表示でも全く同じ画像を表示したいのであればこの方法がお勧めです。

スマホ表示で画像が小さすぎる場合

縦横比を維持するのはいいけど、スマホ表示で画像が小さくなりすぎるという問題もあるでしょう。

その場合は最小の横幅の値を設定してあげると、それ以上画像が小さくなることはないので安心です。

CSS

<div class="header-01">
    <img src="ココに画像のURL"/>
</div>

<style type="text/css">

#blog-title {
    display: none; /*元々のヘッダーを非表示に*/
}

.header-01 {
    position: relative;
    line-height: 0;
    width: 100%;
}

.header-01 img {
    width: 100%;
    min-width: 400px; /*横幅の最小値*/
    height: auto; /*縦横比を維持する*/
}

</style>

仮に400pxと設定していますが、皆さんの画像に合わせて調節してみて下さい。

例えば、最小値を400pxに設定して、スマホ自体の横幅が320pxだったときは、横幅400pxの画像の320px分だけが表示されるといった具合になります。

もちろん縦横比は維持したままです。

参考までに、一般的なスマホの画面幅を載せておきます。

320px スマホ縦最小
375px iPhone6/6s/7/8/X縦
412px Nexus6縦
414px iPhone6/6s/7 Plus縦
600px Nexus7縦

こうすることで、画像が極端に小さくなるのを避けることができるでしょう。

特にPC表示で横長の画像を使った場合は、スマホ表示にすると一気に小さくなってしまう事があります。

PC表示とスマホ表示を分けて設定することもできますが、レスポンシブ表示の場合はこの方法を使うのもひとつの手だと思います。

 

今日は以上!!必要があれば追記します。

ではまた。