スマートフォンの普及に伴い、私のサイトでもiPhoneやAndroidのスマホからのアクセス数が10%、多いサイトだと40%を占めるほどになってきたので、それぞれスマートフォン最適化をしました。

対応したのは、WordPressのブログ。（普通のWebサイトはテンプレート「賢威」を使っており、対応に手間がかかるので放置。。）

利用したのは、スマホ最適化で定番のWordPressプラグイン「WPtouch」。
インストールするだけで、ある程度のクオリティになるのですが、今回は所々で崩れた表示になっている部分をきちんとカスタマイズしました。

⇛ Wptouch | WordPress Plugin Directory

WPtouch初期設定の状態でiPhoneから見た画面

WPtouchをインストールして初期設定のままでiPhoneからサイトを表示すると、こんな感じになります。※左がPCから見た画面、右がiPhoneから見た画面

・トップ画面。サイドバーは表示されません。

・ブックマークボタンが小さくて、タッチパネルでは押し辛い。

・WPtouchのCSSに切り替わるため、スタイルシートに設定していた定義がなくなる。

・記事フッターに横に並べて設置していた、アドセンスとFacebookのLike BOXの並びが崩れている。

・Facebookコメントは入りきらずに投稿ボタンが見えない。DISQUSコメントは勝手に最適化されている。

WPtouch設定変更前後の画面

今回、WPtouchを設定変更した前後の画面です。※左が初期設定、右が変更後

・トップ画面にはロゴ、twitterボタンを設けました。また、各記事のカレンダーアイコンとタイトル名が省略されていたのを外しました。

・タッチパネルでは小さすぎるブックマークボタンをCSSで非表示に、また、スマホ用のアドセンス広告（Google AdSense）を設置しました。

・スマホで見た時でもスタイルシートの定義を反映するため、WPtouchのCSSに定義追加しました。

・並びが崩れていたアドセンスとFacebookのLike BOXはCSSで非表示に、コメントも非表示にしました。また、スマホで見た時にだけ大きなボタンのブックマークを表示するようにしました。

上記の設定方法は以下にメモしておきます。

WPtouchの設定方法

WPtouchのプラグイン設定ページで、以下の設定を実施。

WPtouchを日本語に変更

・「General Setting」の「Language」で、「Japanese」を選択。ひとまず、「オプションを保存」しておくと、設定画面も日本語に変わります。

トップページの記事一覧画面の変更

・ドロップボックスで「アイコンまたはサムネイルを表示しない」を選び、チェックボックスを画面にあるように変更。

詳細オプションの変更

・「twitterリンクをヘッダーに表示する」にチェック。※プラグイン「WordTwit」が別途必要
・「記事へのコメントを有効にする」のチェックを外す。

ロゴの設定

・「デフォルト＆カスタムアイコンプール」で、ロゴに使用する画像をアップロード

・「ロゴアイコン　メニュー項目＆ページアイコン」画面で、アップロードしたロゴ用の画像を選択

アドセンス広告（Google AdSense）の設定

・Google Adsenseでモバイル コンテンツ向けのAdsenseを作成します。

・取得したコードから「pub-*******」をメモ

・「AdSense、Stats＆カスタムコード」の「Google AdSense ID」に、上記でメモした値を設定

WPtouchのCSSへ定義追加

スマートフォンでサイトを表示する時には、WordPressで通常設定しているCSSから、WPtouch用のCSSに切り替わって表示されます。そのため、スマートフォンでも同様のCSS定義を利用したい場合には、WPtouchのCSSへ定義追加する必要があります。

・「AdSense、Stats＆カスタムコード」の「Stats＆カスタムコード」に、追加したいCSS定義を入力。

CSS定義追加例）

ちなみに、ブックマークボタンや並びが崩れていたアドセンスとFacebookのLike BOXを非表示にするのに、それらのクラスに「display:none」を指定して対応しました。

また、スマホでのみ表示される大きなボタンのブックマークボタンは、通常のCSSで「display:none」を設定することで、PC向けには非表示にし、スマホで見たときにはWPtouchのCSSに切り替わることによって「display:none」が外れて表示されるようにしました。

HTML、CSSの知識はあまり持ってないので、これが最善なのかはわかりませんが、もっと良いやり方があれば教えて下さい。

こちらもあわせてどうぞ

• スマートフォン向け広告を提供しているアフィリエイトASPまとめ
• Google+（プラス）の投稿をtwitter、facebookに連携できるChrome拡張機能「Start G+」
• 1年間で請求する権利が消失って。。スマホ向け「AdLantis」のアフィリエイト報酬
• Googleの検索順位が急落した件 – 経緯と復活までの対応
• Amazonマーケットプレイスの出品でコンビニ支払いを設定するには