DAOのサイトがサーバを変更したタイミングで、レスポンシブ対応に変更してみました。
今まではスマートフォンで見ると、パソコンでみたレイアウトがそのままの状態で表示され、スマートフォンの操作で拡大するなどしてみることを前提としていました。
レスポンシブ対応としては、メニュー部分をコンパクトに折り畳んで、サイドバーの部分をカラム落ちさせて、コンテンツの下部に並ぶようにレイアウトを変更する形にしています。
メインビジュアルの部分は表示させた状態でも良いのですが、リサイズさせるのが難しいようなので非表示としました。
元々レスポンシブ対応を考えてのレイアウトではないので無理もありますが、前よりはスマートフォンで見やすくなったのではないでしょうか。
メニュー部分に使用したのはjQueryのプラグイン「MeanMenu」です。
サイトからzipファイルをダウンロードし、CSSとJavascriptをHTMLから読み込みｊQueryで「MeanMenu」を呼びたします。
jQuery(‘要素’).meanmenu();
画像を使ったメニューだとスマートフォンで見たときに、リストに画像がそのまま表示されるので、文字に置換する仕組みが必要になります。
MeanMenuはwordpressのプラグイン版もあるので便利ですね。