ブログのデザインを変更する（スマートフォン）
デザイン設定画面の「スマートフォン」ページでは、デフォルトのスマートフォン表示をカスタマイズできます。
スマートフォンのデザイン設定の操作
「スマートフォン」ページには次の設定項目があり、それぞれ項目名をクリックすると設定内容が開きます。
設定項目ごとに操作方法を説明します。
変更した内容は「変更を保存する」ボタンを押すまで反映されません。
アクセントカラー
リンク色を15種類から選んで変更することができます。
ヘッダ
スマートフォン画面で見た際のタイトル画面やブログアイコンを編集できます。
ブログアイコン
ブログアイコン（PCと連動）の設定ができます。
記事
PC版と同じように、記事上下にHTMLを自由に記述できます。
記事プレビュー
「記事ページをプレビュー」をオンにすると、右画面が記事を1つだけ表示するページに変わり、変更点がわかりやすくなります。
関連記事
表示されている記事に関連する記事を自動的に表示します。
関連するとされる記事がない場合は表示されないこともあります。
パンくずリスト
「記事ページにパンくずリストを表示する」を選択すると、今開いている記事の階層構造がわかりやすくなるパンくずリストを表示できます。
フッタ
自己紹介
スマートフォン用の自己紹介を編集できます。ブログ下部に表示されます。
カスタムHTML（はてなブログPro）
スマートフォン独自の「ページャ下（前後の記事へのリンクの下）」欄と、ブログ全体の下部の「フッタ」欄にHTMLコードを自由に配置できます。
- 「カスタムHTML」にはPC版と同じHTMLを表示させることもできます。
「カスタムHTML」は有料プランである「はてなブログPro」ユーザー向けの機能です。
詳細設定
レスポンシブデザイン
「レスポンシブデザイン」をチェックすると、スマートフォンでもPCと同一のデザイン設定を使用します。
ご使用中のテーマがレスポンシブデザインに対応しているかの確認は「 現在選択中のテーマを確認する」から行えます。
ご自身でレスポンシブデザインに対応したテーマCSSを記述する場合は、CSSが適切に記述されているかお確かめください。
- テーマCSSの記述についての詳細は、ヘルプ「はてなブログテーマ制作の手引き」にある「レスポンシブデザインのテーマを作成するには」を参照してください。
テーマが正しくレスポンシブデザインに対応していないと、単にPC版の画面サイズを縮小しただけで表示されるなど、かえって見づらくなるおそれがあります。
レスポンシブデザインをオンにした場合、スマートフォンのデフォルト表示は使用しないので、「スマートフォン」タブの他の設定項目はすべて無視されます。
関連項目
関連記事（はてなブログ開発ブログ）
- 2016-05-31
スマートフォンの記事ページで、前後の記事へのリンク（ページャ）を見やすくしました
- 2016-03-31
スマートフォンの記事ページで、カテゴリーを記事下に表示できるようにしました
- 2016-03-09
スマートフォンで「レスポンシブデザイン」を有効にしているときの広告の表示について（レスポンシブデザインを利用できる公式テーマについて）
- 2014-12-01
スマートフォンのアクセントカラーやブログアイコンを、AndroidとChromeの新しいデザイン機能に対応させました
- 2014-09-02
スマートフォンで多くの記事が読まれやすくなるよう、記事下にそのブログの「注目記事」を表示するようにしました
- 2014-07-30
スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました
- 2014-07-03
スマートフォン用のデザイン設定に、ヘッダのロゴ色などを変更できる「アクセントカラー」を追加しました
- 2014-05-28
スマートフォンで閲覧したときにも「PCのデザインを使用」するオプションを追加しました【追記あり】
