はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

スマートフォンのタイトル画像で、表示領域を画像サイズに合わせることができるようにしました

新機能 スマートフォン news

はてなブログでは、スマートフォン表示のタイトル画像をカスタマイズする際、アップロードする画像に合わせてヘッダ領域をリサイズできるようにしました。縦横どちらかに長い画像でも、画像全体を表示することができます。

デフォルトのスマートフォン表示では、自分のブログにふさわしいタイトル画像をアップロードし、ブログのヘッダ部分をカスタマイズすることができます。タイトル画像の表示領域はデフォルトで固定サイズのため、ヘッダの領域に合わせてちょうど収まるようにトリミングして表示します（CSSのbackground-size: cover;の動作）。

領域に合わせる（デフォルト）

デフォルトのタイトル画像（スマートフォン表示）

新しく用意した「画像の高さに合わせる」を選択すると、縦に短い画像をアップロードしたときにはヘッダ領域の高さも合わせて短くなり、縦に長い画像ではヘッダ領域も高くなります（アップロードした画像の横幅がヘッダ領域の横幅になるようリサイズし、高さはそれに合わせて調整されます）。

「画像の高さに合わせる」

「画像の高さに合わせる」では全体が表示される

※画像が長過ぎる場合にはリサイズします。

ブログのタイトルをあしらったロゴなどをタイトル画像に設定するときに、これまではヘッダ領域のサイズに合わない部分が切り取られていましたが、高さを合わせることでロゴ全体をスマートフォンでも表示させることができます。どうぞご利用ください。

タイトル画像に横長のロゴを使用する

タイトル画像に横長のロゴを使用できるようになった

スマートフォンのタイトル画像を高さに合わせて表示するには

スマートフォンのタイトル画像は、デザイン設定画面のスマートフォンページで設定できます。「ヘッダ」を開き、「画像をアップロード」します。新しく追加した「サイズ設定」で「画像の高さに合わせる」を選択すると、タイトルを表示するヘッダ領域をアップロードした画像に合わせます。タイトル画像は、スマートフォンのデザイン設定画面からも設定できます。

サイズ設定の「画像の高さに合わせる」

サイズ設定の「画像の高さに合わせる」

また、タイトルロゴを使用するならば、表示設定として「画像だけ表示」を選択するとよいでしょう。

スマートフォンのタイトル画像の設定方法の詳細については、過去のリリース告知も参照してください。

参考記事

blog.hatenablog.com