はてなブログ｜ヘッダーの画像を広げていい感じに表示させる方法

はてなブログを始めた時からずっと、モヤモヤしている箇所がありました。

それは「ヘッダー」です。

何度も調整を繰り返し、時には意味の分からない画像を貼り付けたりしていましたがやっと自分の好きな縦幅で、しかも横幅いっぱいにヘッダー画像を貼り付けることに成功したので、その方法をご紹介していきます！

こんな人におすすめ↓↓

画像を横幅いっぱいに表示させたいけどうまくできない！

スマホで見た時とパソコンで見た時のサイズが違う！

ちょっとズレてるよ～～っ！

タイトルの文字を消したいーーー！

この記事で分かること

ヘッダーに画像を入れる時の注意点

横幅いっぱいに広げる方法

タイトルの文字を消す方法

ヘッダーの画像を準備しよう！
- フォトライフに画像をアップロードする
画像の埋め込み
- デザインCSSで画像を埋め込む
タイトルの文字を消す方法
最後に・・・

ヘッダーの画像を準備しよう！

画像のサイズは横幅１５００px・縦幅５００pxくらいのものを用意します。

「Canva」というサイトを使っている方はTwitterのヘッダーサイズで作成すればOKです。

私もCanvaでヘッダーを作成しました。

無料で自由なデザインを作成することが出来るのでおすすめです。

フォトライフに画像をアップロードする

設定で画像サイズをオリジナルサイズに変更する

画像をアップロードする前にマイフォトの設定で画像サイズを変更しておきましょう。

この作業はとても重要です。

f:id:m_m_motti:20190815234314p:plain

画像をアップロードする

アップロードの方法はダッシュボードの右上にある「Hatena」からマイフォトに移動します。

スマホの場合は下の方に隠れていますので探してみて下さい。

マイフォトを開いたら、アップロードで画像をアップロードします。

画像をオリジナルサイズに変更していることを確認して下さい。

画像のURLをコピーする

アップロードした画像のURLを控えておきましょう。

メモなどにコピペしておけば作業がスムーズです！

画像URLの確認方法

パソコンの場合は左クリックで「画像アドレスをコピー」
スマホの場合は「マイフォト」→「フォルダを編集」→「画像を選択・ブログに貼り付ける」→「HTMLタグの中からURLを切り取る」

HTMLタグの中でどこが画像URLか分からない人へ

f:id:m_m_motti:20190815233936p:plain

<img src="ここからpngまで”

ここがその画像のURLになります。

画像の埋め込み

フォトライフに画像をアップロードし、画像のURLが分かったところで画像を埋め込んでいきます。

初心者の方やヘッダーの画像に納得いかない人がやりがちな失敗は、こちらを使っているということではないでしょうか？

f:id:m_m_motti:20190815233259p:plain

こちらで画像を埋め込んでいくと、変なところで画像が切れてしまう上にスマホで見た時には横幅も小さく切り取られてしまっています。

ヘッダーの背景色をカスタマイズし、画像の色合いも合わせている場合や白調で文字だけという方はそう違和感を感じないのかもしれませんが、私は画像を使いたい人だったのでこちらを使って何度も悩まされました。

デザインCSSで画像を埋め込む

使いにくいなら、使わなければいいだけの話です。

デザインCSSからでも画像を埋め込むことが出来ますので、そちらの方法で進めていきましょう。

使うコードはこちらです↓↓

#blog-title {
background-image: url("ここは画像のURLです！！");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;/* 中央寄せ */
height: 300px;/* 表示したい画像の高さ */
margin: 0;
padding: 0;
top: 0;
width: 100%;/* 幅100%に */
overflow-x: hidden;
}
.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}