この記事では、スマートフォン用のブログのデザインを変更する方法と設定できる項目についてご案内します。
「はてなブログMedia」では、「レスポンシブデザイン」をオンにすることを推奨しています。
デザインの変更方法
管理画面 > [デザイン] > [スマートフォン]では、デフォルトのスマートフォン表示を変更できます。
変更した内容は「変更を保存する」ボタンを押すまで反映されません。
設定できる項目
設定できる項目は以下です。
1. アクセントカラー
「はてなブログMedia」ではご利用いただけません。設定や変更をしないようお願いします。
2. デザインテーマ
スマートフォンのテーマを変更できます。テーマの種類は「ノーマル（デフォルト）」と「メディア」の２種類あります。
3. ヘッダ
スマートフォン画面で見た際のブログアイコンやヘッダ画像を編集できます。
ブログアイコン
「はてなブログMedia」ではご利用いただけません。設定や変更をしないようお願いします。
ヘッダ画像
ヘッダ画像の設定や変更ができます。
タイトル下
「タイトル下」では、PC版と同じようにタイトルの下に表示するHTMLを自由に記述できます。
4. トップページヘッダ
トップページの上部にモジュールを追加することによって「プロフィール」や「最新記事」などを表示できます。
5. フッタモジュール
トップページと記事ページの下部にモジュールを追加することによって「プロフィール」や「最新記事」などを表示できます。
6. フッタ
自己紹介
スマートフォン用の自己紹介を編集できます。ブログ下部に表示されます。
カスタムHTML
スマートフォン独自の「ページャ下（前後の記事へのリンクの下）」欄と、ブログ全体の下部の「フッタ」欄にHTMLコードを自由に配置できます。「カスタムHTML」にはPC版と同じHTMLを表示させることもできます。
フッタ
スマートフォン用のフッタのHTMLを設定できます。デフォルトではPCと同じHTMLを表示する設定になっています。
7.記事ページをプレビュー
「記事ページをプレビュー」をオンにすると、右画面に記事が1つ表示でき、変更点がわかりやすくなります。
8. 記事上（日付上）
記事ページの上部にモジュールを追加することによって「プロフィール」や「最新記事」などを表示できます。
9. 記事
PC版と同じように、記事上下にHTMLを自由に記述できます。
カテゴリー
記事に設定したカテゴリーの表示位置を選べます。詳細は「記事にカテゴリーを設定する」をご確認ください。
記事上下のカスタマイズ
記事上下にHTMLを自由に記述できます。詳細は「ブログパーツなどを設定する(サイドバー編)」をご確認ください。
パンくずリスト
パンくずリストを設定する場合は、「記事ページにパンくずリストを表示する」にチェックをいれてください。
記事の概要
「記事の概要」を設定すると、記事一覧ページ（/archive/archive/categoryに表示する記事）の記事のタイトル下に記事の概要を表示できます。
10. 記事本文末尾
記事ページの本文末尾にモジュールを追加することによって「プロフィール」や「最新記事」などを表示できます。
11. 記事下（ソーシャルパーツ下）
記事ページのソーシャルパーツの下部にモジュールを追加することによって「プロフィール」や「最新記事」などを表示できます。
12. 詳細設定
レスポンシブデザインの設定ができます。
レスポンシブデザイン
「レスポンシブデザイン」をチェックすると、スマートフォンでもPCと同一のデザインを設定できます。 レスポンシブデザインをオンにした場合、スマートフォンのデフォルト表示は使用しないため、「スマートフォン」タブの他の設定項目はすべて非表示になります。
レスポンシブデザインの注意点
- ご自身でレスポンシブデザインに対応したテーマCSSを記述する場合は、CSSが適切に記述されているかお確かめください。
- テーマCSSの記述についての詳細は、ヘルプ「はてなブログテーマ制作の手引き」にある「レスポンシブデザインのテーマを作成するには」を参照してください。
- テーマが正しくレスポンシブデザインに対応していないと、単にPC版の画面サイズを縮小しただけで表示されるなど、かえって見づらくなるおそれがあります。