本日、はてなブログでは、デザイン設定画面に、スマートフォン用のタイトル画像をカスタマイズできる機能を追加しました。デフォルトのスマートフォン表示で、自分のブログらしい画像をタイトル部分に設定できます。どうぞご利用ください。
スマートフォン用のタイトル画像の設定方法
スマートフォン用のタイトル画像は、デザイン設定画面の[スマートフォン]タブで設定します。「ヘッダ」を開き、「タイトル画像」の「画像をアップロード」から登録してください。
PCと同じ画像を表示する
「スマートフォン用に画像を設定する」(デフォルト)ではなく、「PCと同じ画像を表示する」をチェックすると、PC表示用にアップロードした画像(「カスタマイズ」タブの「ヘッダ」で登録します)を、スマートフォンにも表示します。
ただし、PC表示とスマートフォン表示では、タイトル画像の表示領域が異なるため、同じ画像を使っても同じように表示されるとは限りません。スマートフォン向けの画像は、別に設定することをおすすめします。
スマートフォン表示では、PCと同じ画像を表示してもトリミング位置を参照せず、画像の縦横比を変えないでタイトル領域全体に表示します(background-size: cover
)。
なお、一時的に、PC表示用のタイトル画像をスマートフォンにも表示していましたが、今回の変更によりスマートフォン表示には別の画像を使用するようになりました。設定するまで、スマートフォン表示でタイトル画像は表示されません。
スマートフォン閲覧時のデザインについて
はてなブログでは、スマートフォン向けのデザインやカスタマイズの改善も継続的に行っています。これまでには次のような機能を追加してきました。ぜひ、スマートフォンでも自分のブログらしいデザインにチャレンジしてください。
- 2014-07-03 スマートフォン用のデザイン設定に、ヘッダのロゴ色などを変更できる「アクセントカラー」を追加しました
- 2014-06-20 スマートフォンでも、記事やブログの上下にブログパーツなどを自由に表示できるようにしました
- 2014-05-28 スマートフォンで閲覧したときにも「PCのデザインを使用」するオプションを追加しました
今回の「タイトル画像」のほか、「アクセントカラー」や記事上下のブログパーツなどは、PCのデザインを使用(レスポンシブデザイン)していないときのみ有効です。