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

公開日: 2016年5月19日木曜日 Blogger Web windows10 アプリ ショートカットキー

こんにちは、Waringo88です。

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

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

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

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

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

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

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

  • Firefox メニューバー の 「Web 開発」サブメニューから「レスポンシブデザインビュー」を選択する
  • F12を押して開発ツールを表示させ、ツールバーの「レスポンシブデザインビュー」ボタンを押す
  • Ctrl + Shift + M キーを同時に押す (OS X では Cmd + Opt + Mキー)

レスポンシブビューのスクリーンサイズを変更する

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

Bloggerのレスポンシブデザインを確認する際に気を付けること

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

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

スポンサーリンク
スポンサーリンク
  • ?±??G???g???[?d????u?b?N?}?[?N???A