第4回ゆるふわ勉強会でお話した時のスライドです。

1. WordPress スマートフォンテーマ制作
Tsuyoshi.

2. 自己紹介
名前：Tsuyoshi.
仕事：Web屋
所属：WordBench 福岡
Custom Field GUI Utility Extenderというプラグインをひっそりとブログで公
開させて頂いてます。

3. デバイスのスクリーンサイズ
1280px
800px

4. デバイスのスクリーンサイズ
320px
480px
iPhone
iPhone4/4Sの場合、デ
ィスプレイのサイズは
3GSと同じだが、実際の
解像度は960px ×
640px となっている。

5. viewport
PCサイトの表示
そもそも700∼1000pxくらいの
PCサイトを表示したら切れるので
は？

6. viewport
viewport 980px
viewportを指定することでPCサ
イトを表示可能にしている。
viewportの幅の初期値は980px。
980px
の表示幅

7. viewport
viewportとは
・コンテンツの表示領域
・デバイスの解像度や幅という訳ではない
・viewportの幅にはpx単位の値やデバイスごとに異
なる値 device-width（デバイスの幅）を指定出来る
・iPhone3GS/4/4Sともにdevice-widthは320px

8. viewport
width
表示領域の幅。デフォルトは 980px 。200 ~ 10,000px、または device-width を指定。
height
表示領域の高さ。200 ~ 10,000px、または device-height を指定。
initial-scale
表示倍率。0 ~ 10 で指定。
minimum-scale
最小倍率。0 ~ 10 で指定。デフォルトでは 0.25。
maximum-scale
最大倍率。0 ~ 10 で指定。デフォルトでは 1.6。
user-scalable
縮小及び拡大の可・不可。yes、no で指定。デフォルトは yes。

9. viewport
コンテンツの幅がviewportの
widthで指定した値を超えても自
動で調整してくれてるみたい。
<meta name="viewport"
content="width=device-width" />
<meta name="viewport"
content="width=320px" />

10. viewport
ただし、初期表示倍率も指定して
あげるとこのような表示になりま
す。
<meta name="viewport"
content="width=device-width, initial-
scale=1" />
<meta name="viewport"
content="width=320px, initial-scale=1" />

11. レスポンシブWebデザイン
レスポンシブWebデザインとは
HTMLを1ソースで、スクリーンサイズによって各デバ
イスごとにコンテンツの表示を切り替える。

12. レスポンシブWebデザイン
CSS3 Media Queries
デバイスのスクリーンサイズなど
に応じて、CSSの切り替えが可
能。
基本的にはリキッド（可変）レイ
アウトで構成していく。
width:95%

13. レスポンシブWebデザイン
CSS3 Media Queries
@media screen and (max-width: 1000px) {
/* style */
}
@media screen and (max-width: 760px) {
/* style */
}
@media screen and (max-width: 480px) {
/* style */
}
@media screen and (max-width: 320px) {
/* style */
}

14. テーマの切替プラグイン
Device Themes
Switcher
スマートフォン用、タブレット用の
テーマを個別に設定可能。

15. スマートフォン化プラグイン
有名なWPTouch
をはじめ、スマ
ートフォン用のプ
ラグインは探せ
ばたくさんあ
る。
インストールす
るだけ。
WPTouch WP Mobile
Detector

16. フレームワークの活用
jQuery Mobile
スマートフォン・タブレット端末
向けのモバイルフレームワーク。
jQuery Mobileでスマートフォン
用のテーマを作成した例。

17. wp_is_mobile()
wp_is_mobile()
WordPress3.4から追加された関数（wp-includes/
vars.php）
PCサイトとスマートフォン＆タブレット用サイトとの
切り分けが可能。

18. 最後に
ご清聴ありがとうございました。