はてなブログをスマホから利用されている方も多いと思いますが、デフォルトデザインのままでは、ブログオーナーの個性や好みを反映させることができません。
この記事では、はてなブログのスマホ版デザインを反映して、さらにカスタマイズする方法を詳しく解説します。
【比較】デフォルトとカスタマイズ
見た目
まずは、はてなブログのデフォルトデザインと、カスタマイズした状態を比較してみます。
| デフォルト | カスタマイズ |
|---|---|
 |
 |
印象がガラリと変わりますよね。
特徴
| デフォルト | カスタマイズ |
|---|---|
| 最低限の基本的なレイアウトが設定されている。 | 独自のレイアウトやデザインを設定できる。 |
| 設定の必要がなく、誰でもすぐに使える。 | 個性や独自のイメージを反映させられる。 |
| サイドバーなど一部のコンテンツが表示されないため、スマホではアクセスできないページや表示されない部分が出てくる可能性がある。 | イメージするデザインを反映させるためにはカスタム方法を知る必要がある（デザインテンプレートを使用する場合は不要！）。 |
スマホ版デザインの変更方法
パソコンから変更する
STEP1.デザインを選択する
はてなブログのマイページ（ダッシュボード）の左側にあるメニュー欄から『デザイン』を選択する。（赤丸部分）
STEP2.を選択する
表示されたページの左上部にあるマーク（赤丸部分）を選択する。
STEP3.レスポンシブデザインを選択
ページ下にスクロールして『詳細設定』を選択し、『レスポンシブデザイン』の項目にチェックを入れる。
画面左上部にある『変更を保存する』を押して、設定完了。
スマホから変更する
STEP1.PC版サイトにチェック
STEP2.レシポンシブデザインにチェック
スマホ画面なので操作が大変かもしれませんが、画面を拡大しながら操作するとやりやすいです。
レスポンシブデザインについて
レスポンシブデザインとは、異なるデバイス（スマホやPC）や画面サイズに応じて、自動的にレイアウトやコンテンツが最適化されるデザインを指します。
はてなブログでの注意点
 |
デザインテーマの説明欄にレスポンシブデザインに対応していませんと表記されているデザインをレスポンシブデザインに設定するとPC版デザインを“そのまま”縮小した状態でスマホに表示されます。
文字などが小さくなってしまうので、デザインを選ぶ際は「レスポンシブデザイン対応」と書いてあるもの選ぶようにしましょう。
デフォルトデザインでは限られたオプションしかありませんが、カスタムデザインにチャレンジすることで、自分自身やブランドのイメージを反映したデザインを作り上げることができますよ。ご不明な点がありましたらお気軽にコメントくださいね。
