なっちょちーずの冷蔵庫

徒然に記事を書いてます。ゆっくりしていってね☆彡

【Innocent】はてなブログのヘッダー画像を大きく表示&スマホのヘッダーサイズの大きさも変えた話

f:id:nacho___cheese:20180507123014p:plain

はてなブログのカスタマイズ設定をパソコン・スマホともに行いました。

【今回の変更点】

PCのヘッダー画像を「1000×200」より大きく表示したい

スマホのヘッダー画像のサイズが気になる

解決できた記事です。

このブログではテーマ「Innocent」を使用しています。

この方法は一部テーマで共通設定で使えると思いますが、上手く設定ができない場合もあるので、その時はお使いのブログテーマと一緒に検索してみてください。

【スポンサーリンク】

 

新旧ヘッダーの比較

【PC版】

▼旧ヘッダー画像

f:id:nacho___cheese:20180507131222p:plain

▼新ヘッダー画像

f:id:nacho___cheese:20180507131237p:plain

旧ヘッダーは推奨されているサイズ1000×200で作成しました。

新ヘッダー束子(id:kimamalist)さんを参考に1500×400で作成しました。

こだまなおや (id:mofublog)さん漆うしる (id:UrushiUshiru)さんにいただいたファンアートを参考に当ブログ登場キャラクターの結衣と葵を可愛く描けたと思います。

ありがとうございます!

【スマホ版】

▼旧ヘッダー画像

f:id:nacho___cheese:20180507131254j:plain

▼新ヘッダー画像

f:id:nacho___cheese:20180507131304j:plain

旧ヘッダーは推奨されているサイズ350×200で作成しました。

新ヘッダー束子(id:kimamalist)さんを参考に640×310で作成しました。

スペースの都合から初めてタイトルを縦書き形式にしてみました!

tawashino.hateblo.jp

大きく表示するなら「1000×200」ではなく「1500×400」

 画像サイズ1000×200で表示する高さを変えただけでは余白ができてしまいます。

f:id:nacho___cheese:20180507135014p:plain

パソコンのヘッダー画像を大きく表示する方法

サイズ1500×400の画像をはてなフォトライフにアップロードするときに

画像サイズ「0ピクセル」「オリジナルサイズの画像を保存にチェック」と設定されていることを確認してアップロードしました。

f:id:nacho___cheese:20180507145326p:plain

f:id:nacho___cheese:20180507145344p:plain

はてなフォトライフにアップロードされた画像を右クリックして画像アドレスをコピーを選択する。

f:id:nacho___cheese:20180507145955p:plain

コピーした画像アドレスを以下CSSに挿入してデザインCSSに貼って完成です。

/* </system> */
#blog-title {
background-image: url("画像アドレスをコピーしたURL");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;/* 中央寄せ */
height: 400px;/* 表示したい画像の高さ */
margin: 0;
padding: 0;
top: 0;
width: 100%;/* 幅100%に */
overflow-x: hidden;
}

画像サイズは1500×400なので400pxにしました。

使用する画像のサイズによって変更してください。

はてなフォトライフから画像をもってくるので、はてなのタイトル画像設定は何も手をつけなくて大丈夫です。

f:id:nacho___cheese:20180507152749p:plain

【参考にしたサイト】

minimalgreen(id:minimalgreen)さん

blog.minimal-green.com

としちるさん

www.turetiru.com

漆うしる (id:UrushiUshiru)さん

www.itjigoku.com

月無ことのはid:tukinasikotonohaさん

tukinasikotonoha.hatenablog.com

束子(id:kimamalist)さん

tawashino.hateblo.jp

スマホのヘッダーを設定する方法

スマホのヘッダーは640×310で作りました。

使用感は推奨サイズの350×250あまり違いはありません

デザイン」⇒「スマートフォン」⇒「ヘッダ」⇒「画像アップロード」で設定。

1点だけ気になったのが表示画像の大きさの違い

「領域に合わせる」「画像の高さに合わせる」だと微妙に表示が異なります

領域に合わせる(デフォルト)】

f:id:nacho___cheese:20180507155223p:plain

画像の高さに合わせる

f:id:nacho___cheese:20180507155239p:plain

「領域に合わせる」だと画像が少し見切れるのに対し、「画像の高さに合わせる」だと画像が全部入るけど全体的に少し小さくなった感を感じました。

多少見切れても大きく表示される方がいいと思ったので「領域に合わせる」で設定しました。

おわりに

オリジナルヘッダー大きく設定できて完成したブログをみると達成感がありました。

作成するにあたって参考にさせていただいたブログ様には大変お世話になりました。ありがとうございました。(記事の内容に問題がある場合は速やかに対応させていただきます。)

ヘッダーを大きくしたことで上部に載せていたはてなブログ操作ボタンを外しました。

自分もよく利用しているので便利さは凄くわかっています。少し不便を感じさせてしまうかもですが、表示画像の関係上しばらくこの設定でよろしくお願いします。