読者です 読者をやめる 読者になる 読者になる

とまじぃさんち

信じるか信じないかはあなた次第・・・。

デザイン変更時も安心!スマホ版ページを【PCのみ】で確認する方法

インターネット インターネット-はてなブログ

一昔前ならいざ知らず。
スマホが普及しまくった現在、スマホからどう見えるかはブログ運営者にとって重要なファクターです。

デザインいじる→スマホで確認する

めんどくさいですよね!?

ということで、手っ取り早くPCでスマホ表示を確認する方法をシェアいたします。

用意するもの

Google Chrome

以上です(笑)

拡張機能など別途用意するものもありません。
Chromeの標準機能のみで可能です。

ダウンロードはこちら↓

www.google.co.jp

スマホ表示確認方法

当ブログは「レスポンシブデザイン」を採用しているため、PCとスマホで劇的に見た目が変わらないので、今回はつっちーさん (id:Daisuke-Tsuchiya)非アクティビズム。の画面をお借りして操作方法を説明させていただきます。

目的のページを表示します f:id:tomag:20160508223804p:plain

ctrl+shift+iを同時押しします
このような左右2分割画面に変わります。
f:id:tomag:20160508224028p:plain

右上のスマホマーク(?)を押します
(この時点ではまだ幅の狭いPC版表示のまま」です)
f:id:tomag:20160508224209p:plain

左上のドロップダウンメニューから端末名を選びます f:id:tomag:20160508224544p:plain

端末の選択が終わったら「更新ボタン」を押します 。 f:id:tomag:20160508224837p:plain

はい!スマホ版のデザインで表示されました。 f:id:tomag:20160508225147p:plain
幅が狭まっただけでなく、「スマホ版デザイン」に切り替わったのがおわかりいだけましたでしょうか?

意外な落とし穴

ちょっと前のお話。

今時の大画面スマホを使っていると、普通に表示されていた当ブログ。 f:id:tomag:20160509065616p:plain:w250

たまたまiPhone5でどう見えてるか確認してみたら
f:id:tomag:20160509065742p:plain:w250

「ち」だけ下に落ちちゃってるよ(泣)

なんて事がありましたので、自分のスマホで普通に表示されてるからと言って、万人が同じ状況で見えているとは限らない事を意識した方が良いと思います。

今時iPhone5まで視野に入れなくてもいいかぁとか思いましたが、iPhoneSEが発売された今、無視できない問題ですよね(笑)

まとめ

はてなブログのデザイン変更画面でも便宜上は「スマホ版の表示画面」はプレビューできますが、謎のスクロールバーが表示されたりと、お世辞にも「実用できるレベル」ではありません。

片手にスマホを握りしめて、デザイン変更するたびに確認している方も多いと思います。
そんな方々の手間が少しでも減れば幸いです♪

余談

この方法って、いつのまにかどこかで覚えて使っていたので「たぶんみんなが使ってる方法」だと思い込んでいたのですが、知り合いのブロガーさんたち数人に確認してみたところ「いや!!知らなかった」と言われたので、シェアさせていただいた次第です。

それでは今週も一週間!! がんばりまっしょ~ぅ♪