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

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

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

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

項目 設定内容
アクセントカラー ヘッダのロゴ色やリンク色を、15種類から選んで変更することができます。
ヘッダ ブログアイコン(PCと連動)とタイトル画像を設定できます。また、PC版と同じように「タイトル下」にHTMLを記述できます(はてなブログPro)
記事 PC版と同じように、記事上下にHTMLを自由に記述できます(独自HTMLの指定は、はてなブログPro)
フッタ スマートフォン独自の「ページャ下」欄と、ブログ全体の下部の「フッタ」欄にHTMLコードを自由に配置できます(はてなブログPro)。「フッタ」にはPC版と同じHTMLを表示させることもできます。
詳細設定 レスポンシブデザインを設定できます。
AMPを配信しているときにAMP用CSSを設定できます(はてなブログPro)

独自HTMLを指定する(Pro機能)

「タイトル下」「記事上」「記事下」「ページャ下」「フッタ」では、スマートフォン用に独自のHTMLを指定することができます。

レスポンシブデザイン

「詳細設定」の「レスポンシブデザイン」をチェックすると、スマートフォンでもPCと同一のデザイン設定を使用します。

必ず、レスポンシブデザインに対応したテーマCSSを適切に記述 (もしくは正しく設定されたブログテーマを使用)してください。詳細は、ヘルプ「はてなブログテーマ制作の手引き」にある「レスポンシブデザインのテーマを作成するには」を参照してください。

※テーマが正しくレスポンシブデザインに対応していないと、単にPC版の画面サイズを縮小しただけで表示されるなど、かえって見づらくなるおそれがあります。

スマートフォンのデフォルト表示は使用しないので、「スマートフォン」タブの他の設定項目はすべて無視されます。

関連項目

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