【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

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

どうも、ブログ運営者のポチ(@sunrise_033)です。

うさぎ
「はてなブログ」でヘッダー部分にタイトル画像を設定してみるとなんか位置や大きさなどが合わないよぉ。

こんな悩みに答えます。

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

ヘッダー画面は、

f:id:sanrisesansan:20200703012940p:plain

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

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
目次

タイトル画像の設定手順

この記事では、筆者が使用しているテーマ「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になります。

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

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

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

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

・レスポンシブ画面を正常に表示させる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」で画像を作り貼り付けています。

まとめ

はてなブログのヘッダータイトル画像、サイズや位置の修正方法を見ていきました。

設定手順はとても簡単で慣れればすぐにできますので、ぜひ設定してみてください。

NEXT→ヘッダー設定が終わったらトップページをカスタマイズ

最後まで読んでいただき、ありがとうございます。

あわせて読みたい
はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

 

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

↓「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

カスタマイズ性の高いテンプレートやSEO対策機能で、プロフェッショナルなブログを作り、ブログの魅力と集客力を高めましょう!

\ サーバーやインストール不要、2年版でお得!

\ はてなPROで出来るカスタマイズまとめ

コメント

コメントする

目次