はてなブログのカスタマイズ設定をパソコン・スマホともに行いました。
【今回の変更点】
・PCのヘッダー画像を「１０００×２００」より大きく表示したい
・スマホのヘッダー画像のサイズが気になる
が解決できた記事です。
このブログではテーマ「Innocent」を使用しています。
この方法は一部テーマで共通設定で使えると思いますが、上手く設定ができない場合もあるので、その時はお使いのブログテーマと一緒に検索してみてください。
【スポンサーリンク】
新旧ヘッダーの比較
【PC版】
▼旧ヘッダー画像
▼新ヘッダー画像
旧ヘッダーは推奨されているサイズ「1000×200」で作成しました。
新ヘッダーは束子(id:kimamalist)さんを参考に「1500×400」で作成しました。
こだまなおや (id:mofublog)さん、漆うしる (id:UrushiUshiru)さんにいただいたファンアートを参考に当ブログ登場キャラクターの結衣と葵を可愛く描けたと思います。
ありがとうございます！
【スマホ版】
▼旧ヘッダー画像
▼新ヘッダー画像
旧ヘッダーは推奨されているサイズ「350×200」で作成しました。
新ヘッダーは束子(id:kimamalist)さんを参考に「640×310」で作成しました。
スペースの都合から初めてタイトルを縦書き形式にしてみました！
大きく表示するなら「1000×200」ではなく「1500×400」
画像サイズ「1000×200」で表示する高さを変えただけでは余白ができてしまいます。
パソコンのヘッダー画像を大きく表示する方法
サイズ「1500×400」の画像をはてなフォトライフにアップロードするときに
画像サイズ「0ピクセル」「オリジナルサイズの画像を保存にチェック」と設定されていることを確認してアップロードしました。
はてなフォトライフにアップロードされた画像を右クリックして「画像アドレスをコピー」を選択する。
コピーした画像アドレスを以下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にしました。
使用する画像のサイズによって変更してください。
はてなフォトライフから画像をもってくるので、はてなのタイトル画像設定は何も手をつけなくて大丈夫です。
【参考にしたサイト】
minimalgreen(id:minimalgreen)さん
としちるさん
漆うしる (id:UrushiUshiru)さん
月無ことのは（id:tukinasikotonoha）さん
tukinasikotonoha.hatenablog.com
束子(id:kimamalist)さん
スマホのヘッダーを設定する方法
スマホのヘッダーは「640×310」で作りました。
使用感は推奨サイズの「350×250」とあまり違いはありません。
「デザイン」⇒「スマートフォン」⇒「ヘッダ」⇒「画像アップロード」で設定。
1点だけ気になったのが「表示画像の大きさの違い」
「領域に合わせる」と「画像の高さに合わせる」だと微妙に表示が異なります。
【領域に合わせる（デフォルト）】
【画像の高さに合わせる】
「領域に合わせる」だと画像が少し見切れるのに対し、「画像の高さに合わせる」だと画像が全部入るけど全体的に少し小さくなった感を感じました。
多少見切れても大きく表示される方がいいと思ったので「領域に合わせる」で設定しました。
おわりに
オリジナルヘッダーを大きく設定できて完成したブログをみると達成感がありました。
作成するにあたって参考にさせていただいたブログ様には大変お世話になりました。ありがとうございました。（記事の内容に問題がある場合は速やかに対応させていただきます。）
ヘッダーを大きくしたことで上部に載せていたはてなブログ操作ボタンを外しました。
自分もよく利用しているので便利さは凄くわかっています。少し不便を感じさせてしまうかもですが、表示画像の関係上しばらくこの設定でよろしくお願いします。
