レスポンシブWEBデザインプラグイン ってインストールしたらずーっとレスポンシブ？って疑問が出てくると思いましたので詳しく書かせていただきますね。
EC-CUBE をデフォルト（インストールした直後）の状態でレスポンシブWEBデザインプラグインをインストールした場合、EC-CUBE がレスポンシブWEBデザインに切り替わりますが、レスポンシブWEBデザインで運用していくためにはその後のコーディング（作り方）も対応させないといけません。

この記事ではレスポンシブWEBデザインプラグインを使ってレスポンシブWEBデザインになった EC-CUBE を運用していくための簡単な注意事項を書きたいと思います。

わかりやすく書きますので間違って解釈してしまうかもしれませんが、固く考える必要もないと思いますのでそのまま受け止めていただければと思います。
ただ、免責だけはさせていただきますので、ご了承ください。

この記事内、または BLUE STYLE に記載してある内容において、いかなる場合も責任を負いません。


さて、レスポンシブWEBデザインプラグインは何をしているかというとですね、CSS を全て乗っ取ってます。
乗っ取ると言うと語弊がありますが、実際には標準で /html/user_data/packages/default/css ディレクトリを参照させていたのを、新たに /html/user_data/packages/default/rwd に切り替えます。
 rwd ディレクトリにはレスポンシブWEBデザイン用に書かれたCSSファイルが置いてあります。
なので、インストール後はこのCSSファイルを編集していくことになりますのでご注意ください。

まず、レスポンシブWEBデザインは通常のテンプレートと大きく違うのは3か所です。

ひとつ。
画面サイズで読み込む CSS の内容が変わります。
これは、最近の技術なので古いブラウザは対応していない可能性があります。

CSS の内容が変わるというよりは、スマホ用に書いた CSS をタブレットサイズに上書きし、さらに PC サイズに上書きすると言った感じです。
 rwd ディレクトリ内の CSS を見ていただければある程度わかると思いますし、わからなければ聞いていただけるとお答えいたします。

ふたつ。
全ての横幅の指定がピクセルではなく、パーセントになります。
（全ては大袈裟ですが・・・）
例えば、横幅1000ピクセルのサイトで幅200ピクセルのブロックを作る場合は、200/1000*100=20% となります。
横幅の指定値を割合にすることで、PCの画面の大きさが変わっても柔軟に対応可能です。

みっつ。
画像です。
画像のファイル形式、サイズ指定の書き方が変わります。
ファイル形式ですが基本的に実際のサイズより縮尺された場合でも表示が崩れないファイル形式を使用するようにしましょう。
具体的に言うと jpg や png です。

次に画像サイズ指定です。
以前は読み込みを早くするため、width や height を指定しましょうって言われていましたが、レスポンシブWEBデザインにおいては全くの逆で、テンプレート上では一切指定しません。
全てCSSで指定します。
しかも指定の方法は、周りの枠（div など）のブロックからはみ出さないという指定方法になります。
img {
    max-width: 100%;
}
といった書き方ですね。
以上を意識して運営することで、レスポンシブWEBデザインの運営はある程度フォローできると思います。
注意するべきは width の幅と padding の横幅の合計で100%を超えないことです。



ちなみに、レスポンシブWEBデザインプラグインでは、site_frame.tpl と site_main.tpl も乗っ取っています。
また、乗っ取ると書いたら語弊があります。
元々あったsite_frame.tpl と site_main.tp を /data/downloads/plugin/RWD/return ディレクトリにバックアップし、/data/downloads/plugin/RWD/templates の site_frame.tpl と site_main.tpl を適応させています。


既存サイトへこのプラグインを適応させたい場合はご相談ください。
有償になりますが対応させていただきます。
バージョン違いなどもお気軽にお問い合わせください。

------