PCブラウザでスマホ表示を確認する方法

スマホを使っている人、すごく増えましたね。

このブログはパソコンモニタに表示される部分のカスタマイズしか書いてこなかったせいか、スマホからのアクセスは少ないです。うん、当たり前だねっ(笑)。

でも、他のブログではさすがにスマホ率が伸びてきました。

それなら、時代の変化に合わせて、スマホ表示もより快適にしなくちゃね。

というわけで、手始めに何をしたかというと…ごにょごにょ。ここでは言いにくいなー。もし、あなたがSeesaaブログをやっているスマホユーザーだったら、あなたのSeesaaブログとこのブログをスマホで見比べてみてほしい。何をしたか一目瞭然だから。そして、なんで言いにくいかも分かるから。^^;




さてさて。それでは、ここから今日の本題です。^^

スマホ表示をカスタマイズしていくにあたり、手始めに、パソコンからスマホの表示を確認できるようにしました。

専用ソフトもあるらしいけど、「意外と簡単にパソコンでスマホサイトを見ることができる」と書いてあるのを見つけました。ブラウザを使うのです。

FirefoxかSafariでできるんですって!
まあ、ビックリ。知らなかった。

Firefoxではプラグインを入れる必要があります。私がメインに使っているFirefoxがこれ以上重くなるのはちょっと避けたいなー。というわけで、普段使っていないSafariでやってみることにしますよ。


1.Safariのインストール

Safariを持っていない人は、まずインストールしなくちゃね。
アップル公式サイトからダウンロードします。

 → アップル - Safari

ダウンロードボタンをクリックすると、ダウンロードが始まります。

ダウンロードの手順は割愛。
(すでにインストールされているうちのパソコンでは再現できないので、ごめんねー。^^;)

ただ、インストールにあたって、ひとつだけ注意。
インストール中のオプション画面で「Safariをすべてのユーザーの既定のブラウザにする」という項目のチェックは外してね。


2.Safariの設定

Safariを起動して、設定していきますよ。

メニューバーの表示

Safariってば、初期設定ではメニューバーが非表示なんです。ないと不便なので表示させます。



右上の設定アイコン(ギアの形)をクリック。

「メニューバーを表示」をクリック。


これでメニューバーが表示されるようになりました。


開発メニューの表示



(1) もう一度右上の設定アイコンをクリックします。

(2) 開いたメニューの下のほうにある「設定...」をクリック。



(3) 開いたウインドウの右端にある「詳細」タブをクリック。

(4) 一番下の「メニューバーに“開発”メニューを表示」のチェックを入れる。

詳細ウインドウを閉じます。

メニューバーを見てください。



開発というメニューができてますね!


SafariでiPhoneの表示を見る

では、続きです。
スマホ表示にしたいサイトを開いておきます。



開発メニューから…

開発 ⇒ ユーザエージェント ⇒ Safari iOS4.8.3 - iPhone

と進んでいきます。



おおー、できたーっ!

幅が違うって?
そっ…それは手動でどうですかね?



ねっ!?



[今回お世話になりました]

スマホサイトというか、iPhoneでしたね。
Androidはまた違うんだろうなー。


↑ 読んだよ♪の合図にクリックお願いね!


この記事へのコメントが 0 件あります


この記事へのトラックバック