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

しらいとブログ

ネットで検索してもなかなか出てこないIT情報を独自にまとめています

スマホ版はてなブログをPCで見る

スマホ版はてなブログをPCで見る

はてなブログはUserAgentでPCかスマホかを判断しているので、UserAgentを偽装すればPCでも簡単にスマホ版が見れます。

Firefox + UserAgentSwitcher(Firefoxアドオン)でのやり方を書きます。

1. 後でブラウザを再起動します

ブログを書いてる途中だったり、何らかのファイルのダウンロード中だったりしないか確認してください。

2. FirefoxにUserAgentSwitcherを追加します。

まず下のURLからUserAgentSwitcherをFirefoxへ追加します。

UserAgentSwitcher
https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/

f:id:silight_jp:20140411132255p:plain

f:id:silight_jp:20140411132256p:plain

3. ブラウザを再起動してください

普通にFirefoxを終了してもう一度開くだけです。

f:id:silight_jp:20140411132257p:plain

4. メニューバーかツールバー

Firefoxでメニューバーを使っているなら、「ツール(T)」 → 「Default User Agent(設定によって変わります)」から使えます。

f:id:silight_jp:20140411132258p:plain

メニューバーを使わない人はツールバーの辺りで右クリック → 「カスタマイズ」でUserAgentSwitcherのアイコンをツールバーにドラッグ&ドロップして追加してください。

f:id:silight_jp:20140411132259p:plain

f:id:silight_jp:20140411132300p:plain

f:id:silight_jp:20140411132301p:plain

f:id:silight_jp:20140411132302p:plain

f:id:silight_jp:20140411132303p:plain

5. iPhone 3.0に変えてみる

「4. メニューバーかツールバーか」を参考に「iPhone 3.0」を選択し、ページを更新してください。(UserAgentはウェブサーバーとの通信の時に使われます。)

通常

f:id:silight_jp:20140411132304p:plain

iPhone 3.0

f:id:silight_jp:20140411132305p:plain

これでスマホはてなブログが見れました。

6. レスポンシブデザインビュー

横幅をスマホサイズにします。

メニューバーがある場合

f:id:silight_jp:20140411134626p:plain

メニューバーが無い場合

f:id:silight_jp:20140411132306p:plain

このようになります

f:id:silight_jp:20140411132307p:plain

iPhoneは320x480です。スマホサイトは基本的に横幅320pxで作られています。

7. 元に戻す方法

レスポンシブデザインビューは左上の×をクリックします。

f:id:silight_jp:20140411132308p:plain

UserAgentは「Default User Agent」に戻します。

f:id:silight_jp:20140411132309p:plain

補足ですが、このやり方だとブラウザの違いによる見た目の違いが出ることがあります。また、スマホの自動拡大縮小機能はテストできません。たぶん大丈夫だとは思いますが、スマホ版を重視するなら実際にスマホで見てみるのが確実です。

広告を非表示にする