bodyタグにclassまたはidを振って、
PCとスマートフォンのCSSを１枚で管理する方法です。
元ネタはBrowser Detection and the body_class() Functionです。
ブラウザ別にbody_class() 関数にブラウザ別のクラスを加えるという方法。
つまり、bodyタグにスマートフォン用のclassが付与されるので、
頭に.iphoneを付けてCSS内で切り分ける方法です。
WordPressが提供する変数に下記の種類があります。
- $is_lynx
- $is_gecko
- $is_IE
- $is_winIE
- $is_macIE
- $is_opera
- $is_NS4
- $is_safari
- $is_chrome
- $is_iphone
body_class() 関数にブラウザ別のクラスを加えるには、
function.phpに以下のように追記します。
bodyタグに下記のソースを記述します。
[php]>[/php]iPhoneで閲覧した場合、下記のソースを出力します。
[php][/php]ですが、私的にはclassよりもidの方がオススメです。
idの場合は、function.phpに下記の関数を記述します。
bodyタグに下記のソースを記述します。
[php] >[/php] [php]iPhoneで閲覧した場合、下記のソースを出力します。[/php] [php][/php]これで、CSS内にスマートフォン向けの記述で#iphoneを記述すれば良いです。
PCサイトの場合は、#pcsiteを記述すればCSSで切り分けが出来ます。
目次
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】はシリーズ化しています。
この記事はシリーズ化しています。
概要編と基本編は読んでくださいね。
コメント