ブラウザに関すること

最終更新日: 2018.05.1

パソコン上でモバイルでの表示を確認する方法

こんにちは。“Wd-Labo”ディレクターのOtsukaです。

最近のWordPressテーマはモバイル対応になっているのでほとんど心配する必要がないのですが、広告のサイズなどを誤った使い方をしているとモバイルに表示されるデザインなどが崩れている場合などがあります。

特にパソコンで更新されている場合などは、確認するのにいちいちモバイルで確認するのも面倒な作業です。

今回は、パソコン上でモバイル表示を簡単に確認できる方法をお伝えいたします。

いつものように、まずはこの記事のバージョン情報からです。

スポンサーリンク

この記事のバージョン情報・・2017-10月 時点

  この記事のWordPressバージョン 4.8.2–ja
  PHPバージョン 7.1
  Windows10 バージョン1703
  Google Chrome は最新版です。バージョン: 61.0.3163.100(Official Build) (64 ビット)
当サイトではMacでの設定解説はしておりません。ご了承ください。

パソコン上でモバイルでの表示を確認する方法

ブラウザのGoogle Chromeで確認したいサイトを表示させます

▼下記はぼくの関連サイトです。

関連サイト「なじらね」

 

表示させたら、、

キーボードを操作します。

Shift キー + Ctrl キー を押しながら  C を押します。

すると、画面下にソースコードが表示されます。

これですと、サイトの表示が見づらいのでソースを右側に配置したいと思います。

ソース右上にある 「・・・」 をクリックします。(赤枠)

画面下にソースコードが表示される。

 

▼な 右サイドバーのアイコン をクリックしましょう。

右サイトバーのアイコン

 

▼サイト表示が左側に・・ソースが右側に変わりました。これで確認が楽になります。

 

▼次に・・ソース上のメニューの 四角が2つ重なったアイコン をクリックしましょう。

 

▼これで左側にモバイルでの表示が現れます。

※終了して通常のパソコンでの画面に戻す場合は、ソースコードの右上の「×」をクリックすることで戻ります。

まとめ

 

この方法で、モバイルを操作することなくパソコン上でモバイル表示を確認することが簡単にできます。

是非お試しくださいね。

 

Sponsored Link

Sponsored Link

ピックアップ記事

  1. パソコンを健康な状態に保つために「Wise Care 365 PRO V4」を導…
  2. 【ドメインキング利用者向け】ビギナーさん、FFFTPソフトで接続してみよう
  3. パソコン最適化ソフト「Wise Care(ワイズケア)365 PRO V4有料版…
  4. パソコンを起動する度に毎回のように表示される「新しいキーボードをインストールして…
  5. 一瞬でパスワードなどの文字列をコピーする方法が簡単で正確

関連記事

  1. ブラウザに関すること

    Googleホーム画面をカスタマイズする方法

    こんにちは。 “Wd-Labo” ディレクターの Otsuka です。…

Sponsored

おすすめ記事

ピックアップ記事

プラグインに関する記事

特集記事

携帯端末でお読みいただけます。

無料素材

■高品質なロゴとボタンが無料でご利用いただけます♪

 

 

【ボタンマルシェ - ButtonMarche】

 

 

【ロゴマルシェ - LogoMarche】

最近の記事

更新情報を受け取れます

follow us in feedly
  1. 便利、快適

    腱鞘炎防止マウスの「エルゴノミクスマウス」を購入|かなり症状が和らいだのでレビュ…
  2. ブラウザに関すること

    Skypeアップデート |注意しないとブラウザのホーム画面が変更されてしまうよ!…
  3. ブラウザに関すること

    Googleホーム画面をカスタマイズする方法
  4. TCDテーマ

    最新のTCDテーマランキング【2017年5月】
  5. ご質問に対する回答

    今さら聞けない。RSS(リーダー)って何?それに変わる「Feedly」がおススメ…
PAGE TOP