Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

どうも、てとこん(@tetokon)です。

ブログやってる人間なら絶対気になる、自分のブログのスマホ用ページ。

デザインいじったりした後、皆さんどうやって確認してますか?

スマホから見てます?

最終的な確認ならいいですけど、途中でちょっと確認したい時なんかはMacからそのまま見れたら楽ですよね。

それが簡単に出来る方法があるのでご紹介したいと思います。

スポンサーリンク

使うのは標準のブラウザSafari

まずはMacの標準のブラウザSafariを立ちあげます。

そして環境設定を開きます。

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

▲詳細タブを開き(①)、一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れます(②)。

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

▲するとSafariのメニューバーに”開発”というメニューが出てきます。

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

▲まずは普通にPC用のページを開きます。
これはこのブログをMacのSafariから見たところ。

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

▲ここでSafariの”開発”メニューから「ユーザーエージェント」を選び、画像の用にiPhoneのSafariを選んでみます。
iPod touchもありますが、ここではどちらでも構いません。

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

▲すると表示がスマホ用のメニューになります。

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

▲幅が広すぎるので狭くしてみます。
どうですか?スマホから見てるっぽくないですか?
これMacから見てるんですよ!

Macから簡単にモバイル用のページを確認する方法が本当に楽チンなのでブログ書いてる人は覚えていた方が良い!

▲もちろんトップページだけじゃなくシングルページもスマホ用のページで見れます。

”開発”メニューで選んだユーザーエージェントというのが、要は端末の情報みたいなもので、Safariからそれを変更する事で、あたかもiPhoneやiPodからアクセスしてる用に見せかけてスマホ用のページを表示しているのです。

ChromeやFireFoxでもアドオンを使えば似たような事はできますが、Safariはデフォルトでこの機能があるのが良いですね!

ご存じなかった方はデザインをいじる時にでも活用してみて下さい。

今回のでーじなところ

Macからスマホ用のページがサクっと確認できるのはでーじ便利!

モバイルページによくアクセスする人は使ってみて下さい!

でも完全にiPhoneからの見え方と同じにはならないのでやっぱり最終確認は実機で!

スポンサーリンク

フォローする