10分ブログ

1記事10分で書くブログ

はてなブログでのブログヘッダー画像の取り回しにくさ

メインブログのブログヘッダー画像を作りました。

が、画像を作って設定してオシマイではなかったので、やったことをメモしておきたいと思います。

まずは素材の準備。今回はフリー素材から自分のイメージにあっているものを選択しました。

次に素材の加工。Photo Editorという名前そのままのAndroidアプリを使って、光量やコントラストを調整したり、モノトーン加工したりします。


ここまでは簡単なんです。面倒なのはここから。

パソコン向けとスマホ向け画面での見え方の違いを考慮して、タイトル画像の縦幅横幅を決めていき、加工済の画像を切り取って、パソコン向けとスマホ向けにサイズに異なる画像を作っていきます。


まずはパソコン向けのものについて。

本当は画面幅いっぱいに画像を表示したかったんですが、画像サイズが大きくなるのと素材的に横幅を広げ過ぎると見栄えが良くなかったので断念。

そのため、メインコンテンツの表示幅にあわせて1112ピクセルに横幅を調整、縦幅は他のブログを参考に200ピクセルへ。(ここで決めをミスるとあとが大変・・・)

それにあわせて、加工済の画像を切り取ったりリサイズしたりして、レイアウトがいい感じ&サイズぴったりの画像を作ります。


次にスマホ向け。

ぼくはCONTENTSというレスポンシブデザインのテーマを使っているため、画面の横幅によってPC表示とスマホ表示が切り替わります。

CONTENTSの場合は画面幅768ピクセル未満はスマホ向け扱いのレイアウトになる(ブレイクポイントと呼びます)ため、スマホ向け画像はパソコン向けと同じ縦横比で横幅を768ピクセルに指定したものを用意します。

パソコン向けのものと同じ画像を縮小表示させてもいいんですが、データ量が大きくなるので別の小さいサイズのものを準備しておきます。表示する画像の切り替えは、CSSのbackground-imageで別URLを読み込ませるのでOK。

ただし、スマホの場合はタイトル画像の縦幅が大きすぎるのはUI的にイケてないと感じたので、縦幅をCSSで調整します。


最後にブログタイトルと説明の装飾やフォントサイズや位置などの調整。

今回はモノトーンの背景に白文字を使いたかったため、CSSのtext-shadowプロパティを使って影をつけることで可読性を確保しました。

位置調整も、PC向けとスマホ向けでいい感じに見えるpadding-topが異なるので、調整していきます。


パソコン向けとスマホ向けで別々のスタイルを指定する機能を使っていればこういう面倒は(たぶん)ないんだと思います。ヘッダー画像を指定するところで画像をアップロードしてオシマイなんだと思います。

しかしそれでやると画像の横幅がコンテンツの横幅とあってなくてカッコよくなかったり、レスポンシブテーマだとスマホ表示がいい感じにならなかったり、entry-content?に変なクラス名がついて全体の表示が崩れたり、いいことがありませんでした。

そのため、ゴリゴリゼロベースでCSSをコーディングすることに。面倒だったけど、勉強になりました。

あ、10分以上たっちゃった・・・

(約1400文字)