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