はてなブログでは、スマートフォン表示のタイトル画像をカスタマイズする際、アップロードする画像に合わせてヘッダ領域をリサイズできるようにしました。縦横どちらかに長い画像でも、画像全体を表示することができます。
デフォルトのスマートフォン表示では、自分のブログにふさわしいタイトル画像をアップロードし、ブログのヘッダ部分をカスタマイズすることができます。タイトル画像の表示領域はデフォルトで固定サイズのため、ヘッダの領域に合わせてちょうど収まるようにトリミングして表示します(CSSのbackground-size: cover;
の動作)。
新しく用意した「画像の高さに合わせる」を選択すると、縦に短い画像をアップロードしたときにはヘッダ領域の高さも合わせて短くなり、縦に長い画像ではヘッダ領域も高くなります(アップロードした画像の横幅がヘッダ領域の横幅になるようリサイズし、高さはそれに合わせて調整されます)。
※画像が長過ぎる場合にはリサイズします。
ブログのタイトルをあしらったロゴなどをタイトル画像に設定するときに、これまではヘッダ領域のサイズに合わない部分が切り取られていましたが、高さを合わせることでロゴ全体をスマートフォンでも表示させることができます。どうぞご利用ください。
スマートフォンのタイトル画像を高さに合わせて表示するには
スマートフォンのタイトル画像は、デザイン設定画面のスマートフォンページで設定できます。「ヘッダ」を開き、「画像をアップロード」します。新しく追加した「サイズ設定」で「画像の高さに合わせる」を選択すると、タイトルを表示するヘッダ領域をアップロードした画像に合わせます。タイトル画像は、スマートフォンのデザイン設定画面からも設定できます。
また、タイトルロゴを使用するならば、表示設定として「画像だけ表示」を選択するとよいでしょう。
スマートフォンのタイトル画像の設定方法の詳細については、過去のリリース告知も参照してください。
- 2014-07-30
スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました
- 2015-11-06
スマートフォンでも、ブログのヘッダのタイトル画像を変更できるようにしました