WordPressで作られたブログをTwitter BootstrapでレスポンシブWebデザインにしてみた！Adsense対応も！

今日の夕方、Webデザイナーの方と最近のjQueryやらレスポンシブWebデザインの話とかしていました。特にレスポンシブWebデザインは3人ぐらいと話をしていて、自分もいずれこのブログのリニューアル時に導入したいと思って居ました。 そんな話をしていて「今日はこれからレスポンシブWebデザイン勉強するわ」と夕方宣言して、勢いでこのブログのリニューアルをしました。勉強からAdsense対応まで実質3，4時間ぐらいでやっつけで終わらせてIEにまだ対応していないのはここだけの話です（笑）。 まずはレスポンシブWebデザインについておさらい なにはともあれ、なんとなく知ったつもりになっていることでも一応網羅的に一通りどんなものだったか復習したく参考サイトを見てました。 ASCII.jp：レスポンシブWebデザインとは｜ゼロから始めるレスポンシブWebデザイン入門 ゼロから始める、なんていい響きですね。だいたいCSSとかある程度の知識が必要なのですが、まあ、とりあえず、ざっと読みました。 すでにあるフレームワーク"Bootstrap"を使おう！ WordPressのテーマをBootstrapで書き直すか。 / "320press/wordpress-bootstrap - GitHub" htn.to/75X2Nw - wackeyさん (@wackey) 9月 27, 2012 そういえば、Twitter Bootstrapを使えばレスポンシブに対応していたはずだから、それを使ってラクをしようと思っていました。すでに洗練した部品が用意されているわけだし、カスタマイズの速度も上がるかと。 そこで、探していたらすでにWordPressでBootstrapを採用したものがあることがわかりました。しかし、それはすでにいろいろデザインされていたり機能が盛り込まれていたりして、自分なりのものが作りたいという欲望には相反していました。 WordPressテーマ開発者向けのBootstrapを使ったテンプレート開発用のフレームワーク？ らしいということで、このサイトのソースをベースにカスタマイズを始めました。 320press/wordpress-bootstrap · GitHub このテーマは管理画面から設定できる項目も多く、ヘッダーのナビゲーションバー（ロゴと検索窓が入っている部分）の背景色もデフォルトは黒グラデーションでしたが、以前のムジログのデザインと同じ黄色のグラデーションにしました。 最近のブログデザインで黒のヘッダーを使っているところが多いので、ここはあえてムジログイエローをそのまま活かすことにしました。 レスポンシブ対応だが、甘いところもある スマートフォンなどでもレスポンシブの動作検証をしていたのですが、なんか気持ち悪いと思ったら写真の横幅はレスポンシブだなと思えても、縦幅が縮んでないので縦横比がおかしくなっているのです。 ああ、これはあれや、と思い当たる節があったので、速攻で治しました。 スタイルシートファイル（style.css）内にある下記コードで「height:auto;」を追記しました。 #main article img { max-width: 100%; } を #main article img { height: auto; max-width: 100%; } としました。 Adsenseのレスポンシブ化 言葉は正しくないのですが、要はPC表示の時とスマートフォン表示の時で表示する広告の種類を変えようという趣旨です。 JavaScriptで判別してAdsenseのコード指定を変えるということを紹介していた記事もありましたが、それはその記事にも書いてあるように規約違反っぽいので、あえなくPHPで書くことにしました。 まず、テーマファイルのfunction.phpにモバイル判別用の関数を作成します。 /*is_mobile*/ function is_mobile () { $useragents = array( 'iPhone', 'iPod', 'Android', ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); } そして、このis_mobile()関数を使ってモバイルだったらこの広告、そうでなかったら（PCだったら）この広告という条件分岐のもとに、広告のタグを2種類書き込んでいきます。 例えば、

http://bit.ly/QJ4THi