アドオン不要！　FireFoxでBloggerのレスポンシブデザインを確認する方法

こんにちは、Waringo88です。

調べ物はスマホで済ませるという方も多いのではないでしょうか。

このブログはWindowsPCで書いていますが、スマホやタブレットなどいろんな画面でも見やすく（レスポンシブデザイン）なるよう心がけて作成しています。

Bloggerでは、テンプレートのモバイルバージョンが用意されているので、特にレスポンシブデザインを意識しなくてもブログを運営することができます。

管理人は、トーマスイッチさんの作成したPC・モバイル共通テンプレート「Vaster」をカスタマイズしながら使用しているため、動作確認が欠かせません。

レスポンシブデザインの確認にFirefox標準機能の開発ツールを使っていて、いろんな解像度の表示ができたり、ソースコードの修正をシュミレートできたりと、非常に使い勝手が良いのでオススメです。

Firefoxのレスポンシブビューを有効化する

Firefoxでレスポンシブデザインを確認するには、「開発ツール」の「レスポンシブデザインビュー」を使用します。有効化する方法は3通りあります。

スクリーンサイズの変更は、ビュー上部のプリセット（「○○○ × ○○○」の数字の部分）から選ぶか、右下の角をドラッグしたままスクロールして調整できます。

Bloggerのプレビューは何故かリンクがアクティブになりません。複数の記事を一気に確認する場合は、公開済のブログに対してレスポンシブビューを有効化させた方が効率が良いです。

画像やURLがはみ出し易いので、こまめにチェックして修正しておきましょう。