副業ブログ

ブログ記事のスマホビューをPCだけで確認・修正する方法

スマホビューをPCのみで確認する方法

ブログ記事を日々更新していて、「はっ」と思うことがあります。

スマホでの見え方を確認していない!

自分はノートPCで記事を書いているので、スマホで見たときの見え方を忘れがち・・・。

現在コツコツ、既存記事をスマホでの見え方をチェックして修正中です。

 

でもわざわざスマホで確認するの面倒。

自分と同じようにスマホでの見え方を修正したいのに、スマホでチェックするのは面倒という方に、PCのみでスマホでの見え方をチェックする方法を記事にしました。

 

100円さん
100円さん
スマホで見たときのビジュアルを確認・修正したいけど、いちいちスマホでチェックするのは面倒・・・。
PCだけでもスマホでの見え方はチェックできるよ。
Mrガマグチ
Mrガマグチ
100円さん
100円さん
本当に!PCだけでチェックできるのは楽だね。
PCだけでチェック&修正できれば、作業効率もUPするから、ぜひ試してみて!
Mrガマグチ
Mrガマグチ

 

この記事で解決できる悩み

ブログのスマホでの見え方をPCのみで確認・修正したい。

 

 

Google Chromeの機能を使う

googleChromeの機能を使えばスマホビューの確認もPCのみでOK

先に、ズバリやり方を言います。

googleの機能を使えばめちゃくちゃ簡単です。

google Chromeの「開発/管理」機能を使えば、PCのみで「スマホ」「タブレット」の見え方をチェックできます。

目からウロコなので、ぜひ使ってみてください。

 

Google Chromeの機能を使えば、PCのみでスマホビューを確認できる

グーグルクロムは、今もっともおおく使われているウェブブラウザです。

でも以外と、グーグルクロムの「開発/管理」ツールを知らない方はおおいのではないでしょうか。

google Chromeの「開発/管理」機能を使えば、PCのみでスマホの見え方を確認できる「おすすめ」機能です。

身近にあるのに使わないのは損!

 

Google Chrome「開発/管理」機能の使い方

では、使い方をご紹介します。

PCでスマホビューが確認できるので、作業が楽になります。

 

step
1
右クリックをする

スマホビューをPCのみで確認する方法-03

  1. グーグルクロムで、ブログ記事を表示する。
  2. 右クリックをする。
  3. 「検証」をクリック。

参考

Chromeメニューの表示からでもOK

google Chromeの「表示」→「開発/管理」をクリックでもできます。

 

step
2
スマホビューで確認する

Dimensions:Responsiveでスマホビューをクリック

  1. 上部にある「Dimensions:Responsive」をクリック。
  2. 「iphone SE」「iphone XR」「Pixel 5」などのスマホビューをクリック。

参考

スマホが色々あるので迷った場合は、シュアがおおい「iphone SE」「iphone XR」で確認。(2022年現在)

スマホでの見え方が表示されます。

この方法で、スマホの見え方を確認していきます。

 

step
3
スマホビューは別タブで確認しながら修正する。

別タブでスマホビューを確認すると作業効率UP

スマホビュアーを確認しながら修正する場合は、ブログの管理ページを開き、別タブでスマホビューを確認すると効率的です。

 

 

まとめ

身近にあるのに、いがいと知らないグーグルクロムの使い方。

お金もかからず、追加アプリをいれなくてもできる、簡単な方法なので、ぜひ試してみてください。

記事のまとめ

Google Chromeの機能を使えば、スマホビューの確認もPCのみで完結する!

 

関連記事


お問い合わせフォームはブログに必要?
お問合せフォームはブログに必要?[Googleアドセンス承認をもらうためには必要です!]

続きを見る

 

-副業ブログ

error: このコンテンツのコピーは禁止されています。