今回行うスマートフォンサイト用のコーディングは幾つかあるが、主に、画面サイズに応じた画像の縮小とviewportの設定、PCとスマホでのヘッダー画像の表示切り替えの3つである。
画像については、cssで下記を指定しておくと、画面サイズに合わせて縮小してくれる。
max-width: 100% height: auto;
viewportをメタタグで設定し、スマートフォンで見やすくする。ここでは下記のように指定している。親テーマのindex.phpのhead内に記述する。
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
index.phpのヘッダー画像の部分にスマートフォン用のimgタグも書き加え、PCからのアクセスの場合、スマートフォン用のヘッダー画像をdisplay:noneで非表示(親テーマのstyle.cssに記述)、逆にスマートフォンからのアクセスの場合は、PC用のヘッダー画像を同じくdisplay:noneで非表示(子テーマのstyle.cssに記述)という対応にした。スマートフォン用のヘッダー画像は、親テーマのimgフォルダーに入れておく。
<img id="headerImage" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" /> <img id="headerImageMobile" src="<?php echo get_template_directory_uri(); ?>/img/title_m.png">
他にもスマートフォンで見やすくなるように、子テーマのstyle.cssを編集していく。完成したらテーマを親テーマに戻しておく。
次に、プラグインによってユーザーエージェントに応じてテーマの切り替えを可能にする作業をする。
Any Mobile Theme Switcherは、デバイスのユーザーエージェントによって表示するテーマを切り替えることができる無料のプラグインである。
管理画面の「プラグイン」→「新規追加」で検索、「いますぐインストール」をし、有効化する。
管理画面の「設定」→「Any Mobile Theme」から設定をする。iPhoneやiPad、Androidはもちろん、BlackberryやWindows Mobile Phone用のテーマ設定も可能である。また、サイト内に「PC表示に切り替える」ボタンの設置も簡単にできる。
設定したら、スマートフォンや検証すべき端末からアクセスしてみて正常に表示されるか確認する。
次回は、サイトのアクセス解析と本キャンペーンのリポートを作成する。PVやコンバージョンなどの数値を基に、リポートを作成し、サイトの改善施策を考える。
Copyright © ITmedia, Inc. All Rights Reserved.