はてなブログ開発ブログ

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

スマートフォンでも、ブログのヘッダのタイトル画像を変更できるようにしました

はてなブログでは、これまでPC版*1の管理画面で提供してきたデザイン設定のうち、ブログのヘッダに表示するタイトル画像を、スマートフォンのブラウザからでも設定できるようにしました。

デフォルトのスマートフォン表示*2において、自分のブログらしい画像をタイトル部分に表示できます。どうぞご利用ください。

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

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

スマートフォンでタイトル画像を変更するには

スマートフォンのブラウザ版ダッシュボードでマイブログをタップし、ブログの管理画面を開きます。メニューに追加された「デザイン」をタップします。

スマートフォンの管理画面に「デザイン」を追加しました

スマートフォンの管理画面に「デザイン」を追加しました

デザイン設定画面が開き、タイトル画像を設定できます。デフォルトでは「スマートフォン用に画像を設定する」が選択されており、「画像をアップロード」から画像ファイルを設定できます。

スマートフォン用のタイトル画像を設定できます

スマートフォン用のタイトル画像を設定できます

※タイトル画像は、端末の画面幅によって表示サイズが変わります。横幅640px以上の画像を用意するとよいでしょう。

「PCと同じ画像を表示する」にチェックを入れると、PC版のデザインで設定した画像と同じ画像をスマートフォンでも表示します。

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

関連記事

PC版のデザイン設定画面では、「スマートフォン」ページでタイトル画像のほかアクセントカラーを設定したり、ブログ上下や記事上下にブログパーツや広告を掲載するHTMLコードを記載できます(はてなブログProのみ)。詳細は下記のヘルプを参照してください。

ブログのデザインを変更する(スマートフォン) - はてなブログ ヘルプ

とくに、PC版のデザイン設定画面でスマートフォンのタイトル画像を設定する詳細に関しては、下記の記事を参照してください。

スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました - はてなブログ開発ブログ

*1:この「PC」とは「スマートフォン」ではない環境のことで、具体的にはWindowsおよびMacを想定しています。

*2:この「デフォルト」とは、デザイン設定でレスポンシブデザインを有効にしていない場合に、はてなブログが初期状態で用意しているスマートフォン用の表示スタイルのことです。