先月あたりからはてなブログのテーマを「minimalism」に変えた。見た目はシンプルだし、カスタマイズもしやすい。でもスマホからサイトを見たら、ヘッダーが切れてるじゃん！これはどうやって解消したらいいんだろう。ヘッダー画像は文字だけなんだけど、一行から二行にしてもまだ切れてる。どうしたらいいんだろう。
という方の為の記事となります。
僕自身も上記の状態だったので、解決方法をご紹介したいと思います。
1.まず初めに
ヘッダー画像に使用としている画像のサイズを確認します。公式が発表しているヘッダー画像推奨サイズは1,000*200ピクセル。
もしもこれよりも小さければ拡大されて使用されますし、大きければどこを切り抜いて表示させるのかを選ぶ必要が出てきます。
したがってこの1,000*200ピクセルに画像をリサイズしましょう。
2.ヘッダー画像に設定する
デザイン→スパナマーク（カスタマイズ）→ヘッダ
ここでさきほどリサイズした画像をアップロードします。サイズが間違っていなければ、切り抜く場所や拡大されるような画面にはならないはず。
3.デザインCSSに以下をコピペ
これを画像の「デザインCSS」にコピペして、保存、更新。
これだけです。あとは動作確認のためにスマホからサイトを閲覧してみましょう。
4.引用させていただいたサイト様
これまでの内容はこの記事に基づいたものです。
非常に簡単な操作だけで済んだので、大変助かりました。
5.最後に
今回ははてなブログのテーマ「minimalism」のヘッダー画像カスタマイズについて書いてみました。めちゃくちゃ簡単な操作だけでスマホからの見た目が良くなり、モバイルフレンドリーなサイトとなるはずなので、困っている方がいればすべきかと。
kenkenは…
今現在はシンプルなデザインのテーマを使っていますが、また変えることがあれば、いよいよ自分でいじれるように勉強しようかなと思っています。
