【初心者向けブログカスタマイズ】忘れないで!!スマホサイト表示の落とし穴【レスポンシブデザインへの変更】

当ページはアフィリエイト広告を利用しています

当ブログは、はてなブログProから移行済みです。当ページは、はてなブログProのカスタム方法について解説しています。

ぱんだ

スマホでも見やすいレスポンシブデザインのテーマが流行ってるよね

えふぴ医

このブログのはてなブログ時代のテーマのNeumorphismもレスポンシブデザインだよ

ぱんだ

実はテーマを選ぶだけじゃだめで、最後までちゃんと設定しないとスマホで見たときにちゃんと表示されないよ

ポイント
  • レスポンシブデザインのテーマを選ぶだけではスマホから見たときにカスタマイズが反映されない場合がある
  • ブログ自体をレスポンシブデザインに対応させる設定を必ず行おう
目次

はじめに

はてなブログを始めたばかりで、スマホでも読んでもらいやすいようにレスポンシブデザインのテーマを選ばれる方も多いのではないでしょうか。

復習ですが、レスポンシブデザインとは、アクセスした人のデバイス(PC、スマホ、タブレット)の画面サイズに合わせて、表示が最適化されるデザインのことを指します。

最近はブログをスマホで読む人も多いこともあり、はてなブログの人気テーマの多くはレスポンシブデザインになっています。レスポンシブデザインに対応したテーマを選べばあとは勝手に見る人のデバイスによって勝手に対応してくれてるわけではありません。最後に一手順踏まないといけないのですがご存知でしょうか。この記事ではその説明をします。

えふぴ医

実は管理人がこのワナに落ちていました・・・

ブログのブログカスタマイズとして吹き出しや、蛍光ペン風マーカー、トップへ戻るボタンなど利用されてる方もおられると思います。最後の一手順を踏まないと、このようなカスタマイズが反映されない場合があります。反映されないため、ただの黒文字の文章だけの非常に読みにくいブログになってしまっていました

PCサイトでは吹き出しや下線が表示されている
スマホサイトでは文字しかない

管理人は作成時にPCサイトのプレビュー画面だけしか見ていなかったため、妻に言われるまで気づきませんでした。

みなさん、そうならないように、忘れずに最後の一手順を踏んで、スマホで見てくれる人にも見やす記事にしましょう。

ブログをレスポンシブデザイン対応にする手順

手順は簡単で、デザインからレスポンシブデザインにチェックを入れるだけです。

  1. デザインを選ぶ
  2. スマーとフォンを選ぶ
  3. 一番下までスクロールし「詳細設定」を選ぶ
  4. レスポンシブデザインにチェックをつける
  5. 「変更を保存する」をクリック

これでスマホで見たときにも同じように表示されるようになりました。

メニューバーやトップに戻るボタンもちゃんと表示されるようになっているのが確認できますよね。

まとめ

スマホさいとでもレスポンシブデザインに対応する表示にするための設定について説明させていただきました。ブログのテーマ選ぶときにはこういう説明ってしてくれないですよね・・・

手順は簡単ですし、一度設定してしまえばあとは特に何もする必要はありません。忘れずに設定してスマホで見てくれる方にも見やすいブログにしましょう。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次