さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなブログ】ヘッダータイトル画像、サイズや位置の修正方法

f:id:sanrisesansan:20200703161445p:plain

はてなブログ」でヘッダー部分にタイトル画像を設定したい!でもいざ設定してみるとなんか位置や大きさなどが合わないぞ?

こんな疑問に答えます。

今回は、はてなブログのヘッダーのタイトル画像の設定方法と画像サイズや位置が合わない場合の対処法を詳しくみていきたいと思います。

ヘッダー画面は、

f:id:sanrisesansan:20200703012940p:plain

この部分です。ブログタイトル画面のことです。

 


スポンサードリンク
 

タイトル画像の設定手順

今回は僕が使用しているテーマ「UnderShirt」を使って説明して行きます。「UnderShirt」はろくぜうどんさん( id:rokuzeudon )が作成したテーマで、シンプルでカスタマイズしやすいので気に入っています。

設定手順はとても簡単。慣れればすぐにできます。

手順は、

「デザイン」をクリック→「カスタマイズ(スパナマーク)」→「ヘッダ」から「タイトル画面」→「ファイルを選択」から画像をアップロード→変更を保存

これで設定することができます。

f:id:sanrisesansan:20200703141234p:plain


こんな感じです。

これではブログ名が重なってますので表示設定で「画面だけ表示」に変更します。

f:id:sanrisesansan:20200703141509p:plain


するとこんな感じで文字がなくなり画像も良い感じになりました。

f:id:sanrisesansan:20200703141732p:plain

ちなみにヘッダ画像が白などの場合は背景色」を変更すれば背景画面と色を合わせることができます。

f:id:sanrisesansan:20200703142152j:plain


こんな感じですね。

f:id:sanrisesansan:20200703144211j:plain

背景色を白に変更すれば下画像のように背景色を統一できます。

最後に「変更の保存」をしないと反映されないので忘れないようにしましょう。

ヘッダ画像が合わない場合に試したい2つの対処

ヘッダ画像が合わない場合は、

・画像サイズの高さを調整して合わせる

・画像サイズ横の余白を合わせる

この2つを調節すれば、あわせることができます。

画像サイズの高さを調整して合わせる

高さを調節するデザインCSSを貼り付けることで合わせることができます。

参考にさせていただいた記事を載せていおきますので、デザインCSSのコードはこちらからコピペしてみてください。

 

mshitech.hatenablog.com

結果、こんな感じで高さを変更することができました。

f:id:sanrisesansan:20200703144841j:plain


高さの調整は、

.header-image-only #blog-title #blog-title-inner {
height: 250px; /* 画像の高さ */
background-size: contain;
}

この 【 height: 250px;】部分を調整すれば変更できます。ちなみに画像では400pxに書き換えています。

自分の画像の大きさに合わせて調整しましょう。

画像サイズ横の余白を合わせる

横の余白を合わせたい場合は、

・タイトル画像を外す

・「ヘッダ」→「タイトル下」にHTMLコードを記述

この流れでヘッダに直接貼り付けます。

f:id:sanrisesansan:20200703145424p:plain

これが完成版です。

この設定はこちらのサイトを参考にさせていただきました。

コードはこちらからコピペしてみてください。

tukinasikotonoha.hatenablog.com

まず、タイトル画面はこの設定の場合、「上から被せる形になる」ので、見えなくなります。

f:id:sanrisesansan:20200703145530p:plain

なので「ヘッダ画像」は外しておいても良いです。

次に、「デザイン」→「カスタマイズ(スパナマーク)」→「ヘッダ」→「タイトル下」にコピペしたHTMLコードを貼り付けます。

主にこの後に書き換えは5つあります。

f:id:sanrisesansan:20200703152053p:plain

1、画像サイズの指定

2、背景のカラー指定

3、自身のサイトURL

4、画像URL

5、ブログタイトル

こんな感じで書き換えていきます。

画像サイズの指定

画像サイズは、

1000px

 

f:id:sanrisesansan:20200703154156p:plain

750px

f:id:sanrisesansan:20200703154303p:plain

500px

f:id:sanrisesansan:20200703154338p:plain


と、このようなサイズ感なのでお好みで調整してみてください。

背景のカラー指定

www.colordic.org

カラーコードなどはこちらのサイトを参考にしらべてみてください。

画像と同じ色の背景色にすれば、色を統一することができます。 

画像URLは「はてなフォトライフ」で調べる

画像URLは、「はてなフォトライフ」でしらべます。

画像がアップロードされていない場合は、

はてなフォトライフ」→「マイフォト」→「アップロード」→「旧アップローダーはこちら」→「ファイルを選択」して使いたい画像を選択→選択した時に画面右の「オリジナルサイズの画像を保存」をチェック→「アップロード」→「フォルダを編集」(アップロード後はそのまま移行)画面で画像にカーソルを合わせて「選択」をチェック→画面上にある「ブログに貼り付ける」をクリック→HTMLコードをコピペ

コピペしたコード内の

<img src=“https://〜.png” (語尾がファイル形式で終わる)

までのコードが画像URLになります。

詳しい手順はこちらの記事で紹介しています! 

www.sunrise033.com

スマホ画面のサイズが合わない時

レスポンシブ設定になっている場合はスマホ画面でタイトル画面が大きすぎてうまく表示されないことがあります。

この場合の解決策として、

・レスポンシブ画面を正常に表示させるCSSを貼る

・「400px×200px」のサイズで画像を作成する

この2つが挙げられます。それぞれ見ていきます。

レスポンシブ画面を正常に表示させるCSSを貼る

はてなブログで推薦している画像サイズ【1000px×200px】で作成した場合、スマホ画面にすると、画面よりも大きくなってしまうことがあります。

その場合、レスポンシブ画面を正常に表示させるコードを貼ります。

こちらの記事にCSSコードが載せられているので、参考にしてみてください。

https://blog-support.jp/hatenablog-header-picture/

上記に載せられているCSSコードを「デザインCSS」に貼り付けます。

f:id:sanrisesansan:20200703153337p:plain

こんな感じで貼り付けます。

貼り付けてから「変更ん保存」を忘れずにしましょう。

 

うまく反映されない場合は、デザインCSSの上あたりに貼り付けると反映されやすいので試してみてください。

「400×200px」のサイズで画像を作成する

ヘッダ画像自体を「400×200px」で作ってしまう方法です。

この方法では、PC画面は

f:id:sanrisesansan:20200703153515p:plain

こんな感じで小さくなってしまうものの、スマホ画面にした時には、

f:id:sanrisesansan:20200703153547p:plain

このようにちょうど良い感じになります。

CSSコードなどが苦手だったり、手っ取り早くヘッダを設定したい時におすすめの方法です。

画像サイズの推薦は「1000×200px」

はてなブログのタイトル画像は「1000×200」が推薦されています。

f:id:sanrisesansan:20200703153850p:plain

こちらが「1000×200px」の画像を貼り付けた状態です。

若干文字が小さめだと感じる場合は「1500×400px」で貼り付けてもいけます。

f:id:sanrisesansan:20200703153905p:plain

こんな感じです。若干、文字と枠が大きくなりました。

しかしこのサイズでは高さがヘッダ枠に収まらず、途中出切れてしまいます。

なので先ほどのCSSコードを貼り付けて高さを調節する必要があります。

*画像はCSSコードで調整後のものです。

 

ちなみに僕の場合は、「1000×200px」で画像を作り貼り付けています。

まとめ

設定手順はとても簡単で慣れればすぐにできますので、ぜひ設定してみてください。
最後まで読んでいただき、ありがとうございます。

 

この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村