レスポンシブウェブデザインに効くこの一言！のはなし

Copyright 2012 COWBELL Corporation.Some rights reserved

レスポンシブウェブデザインに効くこの一言！のはなし。

カウベル・コーポレーション　森川徹志


森川徹志（もりかわ・てつし）自己紹介

● 福井市生まれ

● 雑誌・パンフ・サイト等を編集・制作

● WordPress歴7年目（バージョン2.0.xより）

● 仕事（受託・自社サービス）でも個人でもWP活用


最近ヒットしたブログネタ最近ヒットしたブログネタ


FB+TwFB+Tw効果でアクセスが普段の効果でアクセスが普段の22倍倍


さて、レスポンシブデザイン。


レスポンシブウェブデザインとは？

● ブラウザの横幅でレイアウトが変わる

● (x)HTMLファイルは単一

● CSS3で横幅を判断しレイアウト制御


WordPressでの例


PCPCで見たで見たTwenty ElevenTwenty Eleven


iPhoneiPhoneで見たで見たTwenty ElevenTwenty Eleven


CSS3 CSS3 のの Media QueriesMedia Queries

Copyright 2012 COWBELL Corporation.Some rights reserved 拙作『へやさがす拙作『へやさがす.net.net』』

PC iPhone





デバイスに応じて文字列を変える？


$is_iphone$is_iphone


コーディング例コーディング例

<?php

global $is_iphone;

if ( $is_iphone ) :

?>

<p>スマホorタブレットの場合の文字列</p>

<?php else : ?>

<p>PCの場合の文字列</p>

<?php endif; ?>


$is_iphone が true になる条件

● User-Agent（UA）文字列に safari がある

（大文字・小文字を区別しない）

● かつ UA文字列に mobile がある

（大文字・小文字を区別しない）


$is_iphone が true になる環境

● iOS

（iPhone, iPod touch, iPad）

● Android

標準ブラウザ

Dolphin Browser HD


余談


$is_iphone のありか

　 INSTALL_DIR

　　 wp-includes

　　　　vars.php ←ここ　　


まあまあ使えそうまあまあ使えそう

$is_winIE


使わなくもない…かな…使わなくもない…かな…

$is_opera


えっ？えっ？えっ？えっ？

$is_NS4


レスポンシブウェブデザインへの対応

● レイアウト

→CSS3 の Media Queries を利用

● 文字列

→$is_iphone を有効活用

Copyright 2012 COWBELL Corporation.Some rights reserved Thanks! Thanks! tetsushi.morikawatetsushi.morikawa

Education

レスポンシブウェブデザインに効くこの一言！のはなし