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