2012.10.05先日お仕事で、株式会社ひつじぐも様のスマートフォンサイトを制作させていただきました。Mobileを使ったスマホサイト用のテーマを作成し、プラグインを用いてユーザーエージェント別にテーマを自動で切り替えるという案件でした。その際に「PC用サイト」と「スマホ用サイト」への切り替えボタンを実装したので、おさらいがてら当ブログのスマホサイトにも実装してみました。いうことで、その方法についてシェアしたいと思います。はじめに...私のブログのように、もともとコンテンツの少ないサイトでは、スマホサイトからPC版への切り替えはさほど必要ないかと思いますが、コンテンツの多いサイトで、スマホサイトではコンテンツを削っているような場合は、PC版への切り替えができたほうがユーザーに対して親切ですよね。detector」プラグインを使っている場合、どうやって実装したらよいものか...と悩み、調べてみたらとっても便利なプラグインを見つけたので、ありがたく利用させていただきました。そのプラグインの紹介と、私なりの使い方を説明していきますね。プラグインのインストールから、切り替えボタンの実装まで1.「MW-Theme-Switcher-on-WPtap」プラグインをインストールする。detector」でテーマを切り替えている場合に「PC版への切り替えボタン」を簡単に実装できる「MW-Theme-Switcher-on-WPtap」というプラグインをインストールして有効化します。詳しい方法については、作者のモンキーレンチさんのサイトでご確認ください。Switcher」というプラグインもあります。ほんと、ありがたいですね!2.スマホテーマ内の好きな位置に「PC版への切り替え」をボタンを表示させる。Mobileを使用している場合は、プラグインを有効化しただけでは「PC表示」「モバイル表示」というリンクが表示されません。詳しいことは省きますが、「出力はされているけど隠れている」といった状態です。先に、プラグインで出力されるボックス部分をスマホテーマのCSSで非表示にしましょう。none;}そして、下記のコードをスマホテーマ内の表示させたい位置に記述すればOKです。href="?viewmode=pc">PC表示</a>表示させるテキストはお好みで...、あとはCSSで装飾をしてください。Mobileのdata-role="button"を使ってボタン表示にしました。プラグインがフッターに出力する部分(図左)を非表示にして、任意の位置(図右)に切り替えボタンを設置。これらについては、デザインワークス・オンサイドのNakaneさんが書かれたこちらの記事を拝見して、こっそり質問したら、ご丁寧に教えて下さいました(その節はありがとうございましたっ)。「MW-Theme-Switcher-on-WPtap」では、PC表示に切り替えた時に、PCテーマのフッター部分にも「PC表示」「モバイル表示」というリンクを自動的に出力してくれます。こちらも表示のしかたをカスタマイズしたいので、プラグインを下記のように編集しました。こちらは、当ブログでの編集例です。シンプルに「スマートフォン版で見る」というリンクのみにしてあります。「MW-Theme-Switcher-on-WPtap」を選択。するとmw_theme_switcher_on_wptap.phpが表示されるので、87行目あたりを編集します。あとは、PC用テーマのCSSを編集して装飾をするのですが、ちょっと注意したい点として、スマートフォンでPCサイトを表示すると、デバイスサイズに合わせて縮小表示されることが多いですよね。縮小表示されていてもパッと見て文字が読みやすいように、テキストにしても画像にしても、大きめのフォントサイズで作成しましょう。ちなみに当ブログではこのようにCSSを記述しました(適当ですみません...)。.5);}下の画像は、ひつじぐも様と当ブログのスマホテーマで実装した、PCサイト表示からスマホサイト表示に切り替えるボタンのスクリーンショットです。ひつじぐも様で実装したもののほうが、現在PC表示あることや、切り替えボタンであることがわかりやすく、ユーザビリティ的によさそうですね。以上、スマホサイト制作のお役に立てたら幸いです。Mobile」特集にて記事を執筆させていただきました。