ヘッダー画像を変更！スマホでのはみ出しを調整したり、余白を埋めたり。
こんにちは！りんこ＠中国駐在(@Rin_inChina)です。
タイトル文字だけだったヘッダーに、新たに画像を搭載してみました。それだけでちょっと見栄えがして、見る度に嬉しくなっちゃいます。
偉大なる先人たちの知恵をお借りしながら設定したところ、思ったよりもはるかに簡単にできましたので、そのステップを記しておきます。
ヘッダー画像を作る
Canvaという画像エディターを使って作成しました。デザインど素人のわたしでも、それっぽく見える画像が作れるので重宝しています。各記事のアイキャッチ画像も、もっぱらこちらのエディターを使用しています。
はてなブログヘッダー画像の推奨サイズは「1000×200ピクセル」ですが、スマホでの見栄えを調節した結果、「800×200ピクセル」に落ち着きました。（結局少し切り取りましたが）
私のブログを読んでいただいている方はスマホユーザーの割合が圧倒的に多いので、スマホからの見え方を重視した形です。
ヘッダー画像を設定
はてなブログの設定→デザイン→カスタマイズ→ヘッダーより画像を選択。いとも簡単に画像設定が完了です。 こちらの記事を参考にさせていただきました。
スマホでの画像はみ出しを調整
わたしのブログデザインはレスポンシブ対応の「Minimalism」を使わせて頂いております。 この場合、パソコンからヘッダー画像を設定したのみでは、スマホで見たときに画像がはみだしてしまいます。
スマホでも全画像が見えるようにサイズ調整するには、デザインCSSにコードを挿入する必要があるようです。こちらの記事がとてもわかりやすく、参考にさせて頂きました。
「メディアクエリを使って調節してみる」のCSSをお借りし、heightを調節したところ見事にはまりました。
空白を調整
さあ、スマホにサイズもバッチリ合い、それなりに形になって参りました。
あと個人的に気になるのは、画像の上下にある空白くらいです。こちらも先人たちの知恵をお借りして、調整してしまいましょう。
空白調整の方法はいろいろあるようなのですが、わたしはこちらの方の「上下の余白をなくすコード」が最もわかりやすく、参考にさせていただきました。
完成！
ヘッダー画像を変えるとますます自分のブログに愛着が沸いてまいりますね！
私のようなCSS初心者でも簡単に設定できるような優しい記事がたくさんあり、本当にはてなブログってすごいです。感謝感謝です。
順に作業を行っていけば、そんなに時間もかからず設定ができますので、迷っているみなさまはぜひともサクッとお試し下さいませ。
