WORDPRESSでレスポンシブする場合に注意!

現在、WORDPRESSには沢山のレスポンシブテーマが用意されており、これを使うと簡単にレスポンシブル対応ができてしまいます。しかしオリジナルで追加したコンテンツが簡単に変換されてレスポンシブ表示になるかと言えばそんなことはありません。

一番問題になりそうなところを言ってしまうと、テーブルタグ、divタグの入れ子にした時が最も崩れてしまう可能性があります。

レスポンシブは手法を大きく分けると3種類存在します。

  1. 従来の技術リキッドレイアウト(CSSのautoやHTMLの%表示指定などをフル活用)
  2.  

  3. Javascriptやプログラム側でUSER_AGENTからブラウザ判定しstyle.cssを切り替える
  4. JQuery等のJavascript系のライブラリーを使用する

で、実際3番を最初やってみましたよ。

ところが問題がありました。
JQueryのライブラリーは当然WORDPRESSを入れると最初から自動で入っていますし、テーマがレスポンシブル対応であれば尚更、補足するライブラリーが沢山詰まっているわけですよ。

結局コンタクトフォーム、テーブル表示、DIVタグ入れ子の箇所はレスポンシブダメダメでとほほだったのでJQueryやその他のJavascriptライブラリーを入れてみたが、どうやら干渉してしまい、まともに動きません。

大体の予測はありました。AjaxライブラリーをWORDPRESSに導入した場合も、プログラムの”$”の箇所を”JQuery”に書き換えて対応したので、おそらく其の関連であろうと思います。しかし書き換えるのも面倒なのでJavascriptさよならしました。
一般的にはWORDPRESSの最初から同梱しているものを外して、オリジナルのJQueryを入れると動作するものと思われます。

んで、原点に戻りリキッドレイアウトを利用し結局作らわざるを得なかった。
成功例があれば、こっちの方はそれほど難しくないということがわかった。IEでうまく表示できない場合はリキッドレイアウトの方がそもそも対応しやすいと思う。また2番めの手法も合わせて利用すると完璧かもしれない。