ブログのデザインを変更する(スマートフォン)

デザイン設定画面の「スマートフォン」ページでは、デフォルトのスマートフォン表示をカスタマイズできます。

スマートフォンのデザイン設定の操作

「スマートフォン」ページには次の設定項目があり、それぞれ項目名をクリックすると設定内容が開きます。
設定項目ごとに操作方法を説明します。

変更した内容は「変更を保存する」ボタンを押すまで反映されません。

アクセントカラー

ヘッダのロゴ色やリンク色を、15種類から選んで変更することができます。

ヘッダ

スマートフォン画面で見た際のタイトル画面やブログアイコンを編集できます。

ブログアイコン

ブログアイコン(PCと連動)の設定ができます。

ヘッダ画像

ヘッダ画像の設定ができます。PCと同じ画像を表示するか、スマートフォンだけに専用の画像をアップロードするか選べます。

画像の推奨サイズは、「ヘッダ画像の推奨サイズ」をご覧ください。

タイトル下(はてなブログPro)

タイトル下」では、PC版と同じようにタイトルの下にHTMLを自由に記述できます。

「タイトル下」は有料プランである「はてなブログPro」ユーザー向けの機能です。

記事

PC版と同じように、記事上下にHTMLを自由に記述できます。

記事プレビュー

記事ページをプレビュー」をオンにすると、右画面が記事を1つだけ表示するページに変わり、変更点がわかりやすくなります。

カテゴリー

記事に設定したカテゴリーの表示位置を選べます。

関連記事

表示されている記事に関連する記事を自動的に表示します。

関連するとされる記事がない場合は表示されないこともあります。
記事上下

記事上下にHTMLを自由に記述できます。

パンくずリスト

記事ページにパンくずリストを表示する」を選択すると、今開いている記事の階層構造がわかりやすくなるパンくずリストを表示できます。

フッタ

自己紹介

スマートフォン用の自己紹介を編集できます。ブログ下部に表示されます。

カスタムHTML(はてなブログPro)

スマートフォン独自の「ページャ下(前後の記事へのリンクの下)」欄と、ブログ全体の下部の「フッタ」欄にHTMLコードを自由に配置できます。

  • 「カスタムHTML」にはPC版と同じHTMLを表示させることもできます。
「カスタムHTML」は有料プランである「はてなブログPro」ユーザー向けの機能です。

詳細設定

レスポンシブデザイン

レスポンシブデザイン」をチェックすると、スマートフォンでもPCと同一のデザイン設定を使用します。
ご使用中のテーマがレスポンシブデザインに対応しているかの確認は「 現在選択中のテーマを確認する」から行えます。
ご自身でレスポンシブデザインに対応したテーマCSSを記述する場合は、CSSが適切に記述されているかお確かめください。

テーマが正しくレスポンシブデザインに対応していないと、単にPC版の画面サイズを縮小しただけで表示されるなど、かえって見づらくなるおそれがあります。
レスポンシブデザインをオンにした場合、スマートフォンのデフォルト表示は使用しないので、「スマートフォン」タブの他の設定項目はすべて無視されます。

関連項目

関連記事(はてなブログ開発ブログ)