Aqua-Experience

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

Aqua-Experience

自分の経験値を上げるべく日々新しい事へチャレンジ

PC版safariでスマホビューを確認するのは超簡単!!

ITスキル ITスキル-PCスキルアップ

スポンサーリンク

ブログをやっているとどうしても他の人のカスタマイズがどうなっているか気になりますよね。
パソコンで人のブログを見るときに
(あ、この人はスマホだとどういう表示になっているんだろう?)
とか、気になる時ありませんか?
safariを使っている方はこの方法で確認することができますよ。

safariのロゴ

自分のブログ確認

はてなブログなら自分のブログのスマホビューを確認するのはデザイン画面で確認できますよね。
まず先にそちらの紹介から。

はてなのトップ画面から自分のIDをクリックします。

はてなブログのヘッダ

そして出てきたメニューからデザインを選びましょう。

はてなブログのメニュー

この画面で自分のブログをカスタマイズするわけですが、スマホビューを確認したい時はこちらです。

デザイン画面

上のタブでスマホの形のものをクリックすると、右にはスマホでどういう表示がされるのかが確認できます。
記事ページの表示を確認したい場合は、メニューの中から記事をクリックして開き、「記事ページをプレビュー」をクリックすると記事を開いたときの画面を確認することができます。

自分のブログがスマホでどう表示されているかを確認するだけならこれでいいかもしれません。
が!
これだと横幅は一定です。
タブレットだとどうなの?
5.5インチでも4インチでも見え方同じ?
というのが確認できませんね。
当然、他の人のブログも見れません。
なので今度はこちらの方法を使ってみましょう!

safariで確認する方法

まず初めに「開発」ボタンをメニューバーに表示させる必要があります。
safariの環境設定を開きましょう。
その中から詳細をクリックして、一番下のメニューバーに”開発”メニューを表示にチェックを入れます。

safariの環境設定画面

これでメニューバーに開発というボタンが追加されたと思います。
その開発ボタンをクリックすると以下のような画面が出てきます。

safariの開発メニュー

この中でレスポンシブ・デザイン・モードにするをクリックします。
そうすると以下のようにいろんな種類のスマホやタブレットなどが出てきて確認したいものをクリックすれば画面が切り替わります。

スマホビューの確認画面

さすがはsafariです。
apple製品しか出てきません(笑)
切り替えた時、最初は表示がうまくいってないので必ずリロード(command+R)してください。
縦横の切り替えはもう一度選んだものをクリックすると変わります。
表示を変えた時は必ずリロードしてくださいね。

元のPC表示に戻したい時は先ほどの開発ボタンの中から同じところをクリックすると戻ります。
safariを閉じても元に戻りますよ。

まとめ

 私はこの機能を知っていろいろ見てみたらあちこち思ってもみなかった表示のされ方になっていました。
コードを書くのがまだまだ初心者なのですぐに直せないんですが・・・。
横幅を狭くしてみたらすごく見づらいブログだったとかもよくある話です。
広告がはみ出していたりとか。
ぜひいろんなサイズでブログを確認してみましょう。
他の人を参考にする時も役に立ちますよ!!

【おすすめ過去記事】

 

www.aqua-exp.com

 

 

www.aqua-exp.com

 

 

www.aqua-exp.com