やあ、おいらですぞ。

いまや、ネットはスマホで見る時代になりましたな。おいらのブログもスマホで見ている人が八割くらいぞ。

だから自分のブログやサイトがスマホで問題なく表示されるか確認しなきゃ駄目なのよ。

でも、PCで書いてスマホで確認ってのはちょいめんどい。できればPCで確認したいよな。

つーことで今回はGoogle Chrome(グーグルクローム)でスマホ表示を確認する方法をご紹介するぜ! このやり方でレスポンシブ表示の確認もできるからぜひ試してちょ!

スポンサードリンク

Google Chromeでスマホ表示する手順(デベロッパーツール使用)

まず、PC版のGoogle Chromeでサイトを表示する。

んで、キーボードの右上にある「F12」を押す。
(macは「Option」+「Command」+「I」)

すると、次のとおり、画面右側に「デベロッパーツール」が表示される。

01b


赤い四角で囲った部分(スマホとPCが隣り合った絵)をクリックする。

02

すると、サイトの表示が縦長に小さくなるはず。でもまだPC表示だよな。

01

最後に、キーボードの「F5」を押してページを更新しよう。
(macは「Command」+「R」)

03

じゃじゃん!!! 見事スマホ表示に!!!


iPhoneでの表示を確認したいんだが?

よゆーでできまっせ! 特別に教えたる!

スマホ表示されてるサイトの上の「Responsive」をクリックしてみそ。

04

すると、ずらっとスマホの種類が出てくるからお好きなiPhoneを選んでちょ。

05


こうすることで、上記画像のとおりGoogle Adsenseの「レスポンシブ」広告が、各デバイス(端末)でどのように表示されるかもわかるから一石二鳥だぜ!


パソコン表示に戻すにはどうしたらいいのん?

戻すのも簡単。

まず、デベロッパーツール中央の上にある3つの点が縦に並んだマークをクリック。

パソコン表示に戻すにはどうしたらいいのん?

すると下のようになるので、一番下の「Close DevTools」をクリック。

Close DevTools

んで、「F5」(macは「Command」+「R」)を押してページ更新。

ね? パソコン表示に戻ったでそ?

以上


スポンサードリンク

スポンサードリンク