Nature’s Colours Photo by ®DS
WordPressなどブログのデザインをカスタマイズする時に反映状況を確認するTipsです。わたしの場合、特に、WordPressサイトをスマートフォン用に仕立ててくれるWPtouchプラグインのデザインをカスタマイズする時に、PCブラウザでスマホ用サイトのソースを表示させたり、スタイルシートの反映を確認するときに使っています。
Safariの開発メニュー
ユーザーエージェントをデフォルト（自動選択）からiPhoneに変更します。
通常サイトを表示させるためには同じメニューからデフォルト（自動選択）に戻します。
PC SafariでiPhoneスクリーンビュー
ユーザエージェントを変更すると、WPtouchスマホ用サイトがロードされます。ブラウザ左側フレームを目一杯左側に持ってくると、横幅はちょうどiPhoneサイズのところで止まってくれます。
Webインスペクタからソースやスタイルシート要素を表示する
開発＞Webインスペクタを表示から、ソースや適用しているスタイルシート要素を確認することが出来ます。また、このメニューからはJavascriptの実行結果など様々な情報を確認することが出来ます。
ソースを表示させてから、見やすいように枠を拡大します。ソースにマウスを移動させると該当の箇所がハイライトされて、適用されているスタイルシートの情報がポップアップで表示されます。
適用されているスタイルシートの要素ごとにチェックボックスが用意されており、オン・オフによって反映の状態を確認することが出来ます。
Google Chromeの開発メニュー
Chromeの場合、表示＞開発/管理＞デベロッパーツールで同様のことができます。ユーザエージェントの変更は、デベロッパーツールのウィンドウの右下の設定から変更できます。
まとめ
通常のPC用サイトのスタイルシートの反映確認に加え、スマートフォン用サイト向けにカスタマイズする作業の際、都度iPhoneのSafariを起動する手間が省けます。WPtouchのテーマやデザインをさらにカスタマイズしようとしている方は一度お試しください。
WPtouch Pro（有料版）はどうかわかりませんが、無料版は子テーマを管理する機能がないため手を入れるのは結構リスクがありますので、都度バックアップをとりながら作業されることをオススメします。
（WPtouchをカスタマイズすると面白いですが、最近、この作業にキリがなく、通常サイトのメンテと二度手間であることにようやく気づき始めました。そのうちレスポンシブデザインを勉強してみたいなと思っています）