WordPressでのスマホ表示最適化と使えるプラグイン：隔週刊「キャンペーンサイト構築＆運用」（4）（2/2 ページ）

本連載では、全5回で「Windows Azure Webサイト」と「WebMatrix3」によって、WordPressをカンタンに導入しキャンペーンサイトを構築・運用するノウハウを解説する。今回は、スマートフォン用のテーマ作成の手順を解説し、デバイスのユーザエージェントによって表示するテーマを切り替える無料プラグインを紹介。

[佐藤翔，ねこポッポ] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

スマートフォンサイト用のWordPressコーディング

　今回行うスマートフォンサイト用のコーディングは幾つかあるが、主に、画面サイズに応じた画像の縮小とviewportの設定、PCとスマホでのヘッダー画像の表示切り替えの3つである。

画面サイズに合わせて画像を縮小させる

　画像については、cssで下記を指定しておくと、画面サイズに合わせて縮小してくれる。

max-width: 100%
height: auto;

viewportの設定

　viewportをメタタグで設定し、スマートフォンで見やすくする。ここでは下記のように指定している。親テーマのindex.phpのhead内に記述する。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

PCとスマートフォンでヘッダー画像を切り替える

　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を編集していく。完成したらテーマを親テーマに戻しておく。