はてなブログカスタマイズ┃スマホから見た時のデザインを変更する方法（レスポンシブデザインの設定）

はてなブログをスマホから利用されている方も多いと思いますが、デフォルトデザインのままではデザインのカスタマイズを反映させることができません。

この記事でわかること

• スマホ版のはてなブログにもデザインを反映させる方法（脱デフォルト）。
• デフォルトデザインとの見た目や性能の違いを比較。

比較│デフォルトとカスタマイズ

デフォルトとデザインを反映させた状態（カスタマイズを含む）の見た目や機能の違いを比較してみましょう。

見た目の違い

デフォルト	レスポンシブ反映＆ カスタマイズ済

カスタマイズした点
（現在のデザインとは異なります）

• トップにブログタイトルの画像を配置。
• メニューボタンとボトムメニューの設置。
• 記事一覧の細かな装飾。

　

機能や特徴の比較

デフォルトのまま	レスポンシブ反映
最低限の基本的なレイアウトが設定されている。	レイアウトやデザインを独自に設定できる。
設定の必要がなく、誰でもすぐに使える。	好みのイメージを自由に反映できる。
サイドバーなど一部のコンテンツが表示されないため、スマホではアクセスできないページ／表示されない箇所がある。	デザインをこだわるにはコードの仕組みなどを知る必要がある。 デザインテンプレートを使用する場合は不要！

　

スマホ版デザインの変更方法

パソコンから変更する

はてなブログのマイページ（ダッシュボード）の左側にあるメニュー欄から
「 デザイン 」を選択する（赤丸部分）。

表示されたページの左上部にある
を選択する（赤丸部分）。

ページ下にスクロールして
「 詳細設定 」を選択してレスポンシブデザインの項目にチェックを入れる。
画面左上部にある「変更を保存する」を押して、設定完了。

　

スマホから変更する

スマホのブラウザをPCモードにしてから操作します（ここではAndroid／Chromeで説明します）。

• ブラウザの︙をタップしてPC版サイトにチェックを入れる。

• 画面表示が切り替わったら「パソコンで変更する」の手順と同じように進める。

操作画面が小さくて少し大変かもしれませんが、画面を拡大しながら作業するとやりやすいですよ。

レスポンシブデザインについて

レスポンシブデザインとは、閲覧するデバイス（スマホやPC）の画面サイズに応じて、自動的にレイアウトやコンテンツが最適化されるデザインのことです。

はてなブログでの注意点

テーマの中にはレスポンシブデザイン非対応のデザインもあります。

説明欄にレスポンシブデザインに対応していませんと表記されているデザインを設定するとPC版デザインを“そのまま”縮小した状態でスマホに表示されます。

文字を含む全てのデザインが小さく表示さてしまうので、デザインを選ぶ際は「レスポンシブデザイン対応」と書いてあるもの選ぶようにしましょう。

もくもく

デザインをカスタマイズすることで自分のイメージを反映したブログを作ることができるね。

yunico

デフォルトに戻すのは簡単だし、一度試してみるといいかもね。

ご不明点がありましたらお気軽にお問い合わせくださいね。