今日の夕方、Webデザイナーの方と最近のjQueryやらレスポンシブWebデザインの話とかしていました。特にレスポンシブWebデザインは3人ぐらいと話をしていて、自分もいずれこのブログのリニューアル時に導入したいと思って居ました。
そんな話をしていて「今日はこれからレスポンシブWebデザイン勉強するわ」と夕方宣言して、勢いでこのブログのリニューアルをしました。勉強からAdsense対応まで実質3，4時間ぐらいでやっつけで終わらせてIEにまだ対応していないのはここだけの話です（笑）。
まずはレスポンシブWebデザインについておさらい
なにはともあれ、なんとなく知ったつもりになっていることでも一応網羅的に一通りどんなものだったか復習したく参考サイトを見てました。
ASCII.jp：レスポンシブWebデザインとは｜ゼロから始めるレスポンシブWebデザイン入門
ゼロから始める、なんていい響きですね。だいたいCSSとかある程度の知識が必要なのですが、まあ、とりあえず、ざっと読みました。
すでにあるフレームワーク“Bootstrap”を使おう！
https://twitter.com/wackey/status/251228933834543105
そういえば、Twitter Bootstrapを使えばレスポンシブに対応していたはずだから、それを使ってラクをしようと思っていました。すでに洗練した部品が用意されているわけだし、カスタマイズの速度も上がるかと。
そこで、探していたらすでにWordPressでBootstrapを採用したものがあることがわかりました。しかし、それはすでにいろいろデザインされていたり機能が盛り込まれていたりして、自分なりのものが作りたいという欲望には相反していました。
WordPressテーマ開発者向けのBootstrapを使ったテンプレート開発用のフレームワーク？
らしいということで、このサイトのソースをベースにカスタマイズを始めました。
320press/wordpress-bootstrap · GitHub
このテーマは管理画面から設定できる項目も多く、ヘッダーのナビゲーションバー（ロゴと検索窓が入っている部分）の背景色もデフォルトは黒グラデーションでしたが、以前のムジログのデザインと同じ黄色のグラデーションにしました。
最近のブログデザインで黒のヘッダーを使っているところが多いので、ここはあえてムジログイエローをそのまま活かすことにしました。
レスポンシブ対応だが、甘いところもある
スマートフォンなどでもレスポンシブの動作検証をしていたのですが、なんか気持ち悪いと思ったら写真の横幅はレスポンシブだなと思えても、縦幅が縮んでないので縦横比がおかしくなっているのです。
ああ、これはあれや、と思い当たる節があったので、速攻で治しました。
スタイルシートファイル（style.css）内にある下記コードで「height:auto;」を追記しました。
[css]#main article img {
max-width: 100%;
}[/css]
を
[css]#main article img {
height: auto;
max-width: 100%;
}[/css]
としました。
Adsenseのレスポンシブ化
言葉は正しくないのですが、要はPC表示の時とスマートフォン表示の時で表示する広告の種類を変えようという趣旨です。
JavaScriptで判別してAdsenseのコード指定を変えるということを紹介していた記事もありましたが、それはその記事にも書いてあるように規約違反っぽいので、あえなくPHPで書くことにしました。
まず、テーマファイルのfunction.phpにモバイル判別用の関数を作成します。
[php]/*is_mobile*/
function is_mobile () {
$useragents = array(
‘iPhone’,
‘iPod’,
‘Android’,
);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);
}[/php]
そして、このis_mobile()関数を使ってモバイルだったらこの広告、そうでなかったら（PCだったら）この広告という条件分岐のもとに、広告のタグを2種類書き込んでいきます。
例えば、
[php]<div class="adwords">
<?php if (is_mobile()) { ?>
<script type="text/javascript"><!–
google_ad_client = "ca-pub-5022544359334924";
/* ムジログスマホ記事上 */
google_ad_slot = "2939584179";
google_ad_width = 250;
google_ad_height = 250;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<?php } else { ?>
<script type="text/javascript"><!–
google_ad_client = "pub-5022544359334924";
/* ムジログ記事上336×280 */
google_ad_slot = "9929628763";
google_ad_width = 336;
google_ad_height = 280;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<?php } ?>
</div>[/php]
このように条件分岐の上側がモバイル広告用のタグを下部分をPC用のタグを入れています。PHPがわかる方は、if構文でelseの前後で広告タグの塊を見分けられると思います。
これで、PC/モバイル用の広告の出力を分けています。
では、具体的にどうしているかというと、PC用の時は横幅300pxの広告を出しているけど、これをスマートフォンで見ると（ページの余白の関係もありますが）はみ出してしまいます。そこで、スマートフォンの時は横幅250pxの広告を表示するようにしています。もしくは240pxのハーフバナーも良いかもしれません。
（モバイル用の320pxのバナーもありますが、このテンプレートの場合左右に余白をとっているため、入れるためにはその辺の調整が必要そうです）
というわけで、PCとスマートフォンで同じHTML,CSSで次のようにスマートフォンにも無事に記事もAdsenseも表示されています。
とりあえず、これでなんとかレスポンシブWebデザイン対応ができたので、ほっとしています（ただしIE以外に限るｗ）
コメント