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

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

めんどくさいですよね！？

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

用意するもの

Google Chrome

以上です（笑）

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

ダウンロードはこちら↓

www.google.co.jp

スマホ表示確認方法

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

目的のページを表示します

ctrl+shift+iを同時押しします
このような左右２分割画面に変わります。

右上のスマホマーク（？）を押します
（この時点ではまだ「幅の狭いPC版表示のまま」です）

左上のドロップダウンメニューから端末名を選びます

端末の選択が終わったら「更新ボタン」を押します 。

はい！スマホ版のデザインで表示されました。
幅が狭まっただけでなく、「スマホ版デザイン」に切り替わったのがおわかりいだけましたでしょうか？

意外な落とし穴

ちょっと前のお話。

今時の大画面スマホを使っていると、普通に表示されていた当ブログ。

たまたまiPhone5でどう見えてるか確認してみたら

「ち」だけ下に落ちちゃってるよ（泣）

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

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

まとめ

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

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

余談

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

もしかしたら、俺の聞いた方たちが「じょうよわ（なぜか変換できない）」なブロガーの方だったかもしれないので、「そんな方法常識だろ！！」とか言う「名人ブロガー様」たちに於かれましては生暖かく見守っていただければ幸いに思います（笑）

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