ブログをやっているとどうしても他の人のカスタマイズがどうなっているか気になりますよね。
パソコンで人のブログを見るときに
（あ、この人はスマホだとどういう表示になっているんだろう？）
とか、気になる時ありませんか？
safariを使っている方はこの方法で確認することができますよ。
スポンサーリンク
自分のブログ確認
はてなブログなら自分のブログのスマホビューを確認するのはデザイン画面で確認できますよね。
まず先にそちらの紹介から。
はてなのトップ画面から自分のIDをクリックします。
そして出てきたメニューからデザインを選びましょう。
この画面で自分のブログをカスタマイズするわけですが、スマホビューを確認したい時はこちらです。
上のタブでスマホの形のものをクリックすると、右にはスマホでどういう表示がされるのかが確認できます。
記事ページの表示を確認したい場合は、メニューの中から記事をクリックして開き、「記事ページをプレビュー」をクリックすると記事を開いたときの画面を確認することができます。
自分のブログがスマホでどう表示されているかを確認するだけならこれでいいかもしれません。
が！
これだと横幅は一定です。
タブレットだとどうなの？
5.5インチでも4インチでも見え方同じ？
というのが確認できませんね。
当然、他の人のブログも見れません。
なので今度はこちらの方法を使ってみましょう！
safariで確認する方法
まず初めに「開発」ボタンをメニューバーに表示させる必要があります。
safariの環境設定を開きましょう。
その中から詳細をクリックして、一番下のメニューバーに”開発”メニューを表示にチェックを入れます。
これでメニューバーに開発というボタンが追加されたと思います。
その開発ボタンをクリックすると以下のような画面が出てきます。
この中でレスポンシブ・デザイン・モードにするをクリックします。
そうすると以下のようにいろんな種類のスマホやタブレットなどが出てきて確認したいものをクリックすれば画面が切り替わります。
さすがはsafariです。
apple製品しか出てきません（笑）
切り替えた時、最初は表示がうまくいってないので必ずリロード（command＋R）してください。
縦横の切り替えはもう一度選んだものをクリックすると変わります。
表示を変えた時は必ずリロードしてくださいね。
元のPC表示に戻したい時は先ほどの開発ボタンの中から同じところをクリックすると戻ります。
safariを閉じても元に戻りますよ。
まとめ
私はこの機能を知っていろいろ見てみたらあちこち思ってもみなかった表示のされ方になっていました。
コードを書くのがまだまだ初心者なのですぐに直せないんですが・・・。
横幅を狭くしてみたらすごく見づらいブログだったとかもよくある話です。
広告がはみ出していたりとか。
ぜひいろんなサイズでブログを確認してみましょう。
他の人を参考にする時も役に立ちますよ！！
コメント