はてなブログ開発ブログ

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

スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました

本日、はてなブログでは、デザイン設定画面に、スマートフォン用のタイトル画像をカスタマイズできる機能を追加しました。デフォルトのスマートフォン表示で、自分のブログらしい画像をタイトル部分に設定できます。どうぞご利用ください。

タイトル画像を設定したスマートフォン表示の例

タイトル画像を設定したスマートフォン表示の例

スマートフォン用のタイトル画像の設定方法

スマートフォン用のタイトル画像は、デザイン設定画面の[スマートフォン]タブで設定します。「ヘッダ」を開き、「タイトル画像」の「画像をアップロード」から登録してください。

スマートフォン表示用のタイトル画像を設定する

スマートフォン表示用のタイトル画像を設定する

PCと同じ画像を表示する

スマートフォン用に画像を設定する」(デフォルト)ではなく、「PCと同じ画像を表示する」をチェックすると、PC表示用にアップロードした画像(「カスタマイズ」タブの「ヘッダ」で登録します)を、スマートフォンにも表示します。

ただし、PC表示とスマートフォン表示では、タイトル画像の表示領域が異なるため、同じ画像を使っても同じように表示されるとは限りません。スマートフォン向けの画像は、別に設定することをおすすめします。

スマートフォン表示では、PCと同じ画像を表示してもトリミング位置を参照せず、画像の縦横比を変えないでタイトル領域全体に表示しますbackground-size: cover)。

なお、一時的に、PC表示用のタイトル画像をスマートフォンにも表示していましたが、今回の変更によりスマートフォン表示には別の画像を使用するようになりました。設定するまで、スマートフォン表示でタイトル画像は表示されません。

スマートフォン閲覧時のデザインについて

はてなブログでは、スマートフォン向けのデザインやカスタマイズの改善も継続的に行っています。これまでには次のような機能を追加してきました。ぜひ、スマートフォンでも自分のブログらしいデザインにチャレンジしてください。

今回の「タイトル画像」のほか、「アクセントカラー」や記事上下のブログパーツなどは、PCのデザインを使用(レスポンシブデザイン)していないときのみ有効です。