サイトを全面的にレスポンシブ対応にしてみた

当サイトで使用しているテーマ “Playbook” はレスポンシブ対応なのですが、実際にスマートフォン等で見ると、自分の気に入らないところがあって、これまでは WPTouch を使用してきました。

レスポンシブについては Google 先生も推奨していることもあって、いつかは全面的にレスポンシブにしなければ、と思っていたのですが、最近いろんな環境が整ってきたので、『今か！』と思い立ち、WPTouch を止め全面レスポンシブに切り替えることにしました。

上で書いた「自分の気に入らないところ」が「最近いろんな環境が整ってきた」と思うようになったのは、次の理由からです。

Google AdSense でレスポンシブ広告ユニットを作成できるようになった

当サイト上部のタイトルロゴ右側には 728×90（ビッグバナー）の AdSense 広告を設置しているのですが、最近 AdSense 広告がレスポンシブ対応になったことで、PC 以外のデバイスで見ても適切なサイズの広告を表示することができるようになりました。728×90 をスマートフォンで表示するとどうにも見にくかったのですが、これで改善できるのは大きいメリットがあります。

コードを実装後、さらに Google AdSense が改善されて、画面サイズで場合分けするようなことをしなくても（CSS3 メディア クエリを使用しなくても）レスポンシブ対応できるようになっています。
（当サイトでも試しましたが、うまくサイズを拾ってこれないようで断念しました…。）

詳しくはこちらをご参照ください。

AddThis の Smart Layers がレスポンシブ対応であること

当サイトでは、各 SNS へのリンクは AddThis のコードを実装していますが、数カ月前に AddThis から “Smart Layers” なる新機能が追加されました。

これがなかなか良く出来ていて、デバイスによる画面サイズの違いを意識することなくコードが生成される仕組みになっています。
WPTouch を使用していた時は、各 SNS のボタンのコードを取得して、見栄えを気にしながら WPTouch のテーマファイルに直接記載していたので、WPTouch のアップデートの際にコードの移行が必要で少しめんどくさかったんですね。

この Smart Layers を使うようになって、その作業も必要なくなり、ひとつ手間が減りました。

概ねこんな感じで、自分の場合はさほど大事にはなりませんでした。
しかしながら、AdSense を含め、もう少し改善したいところもあるので、それはこれから地道に修正していこうと思っています。