スマホに対応していない古いEC-CUBEをレスポンシブにする方法
今日は、スマホに対応していないバージョン2.4系のEC-CUBEをスマホ対応させるやり方をご紹介。
EC-CUBEの古いバージョンはスマホ対応していない
そのカスタマイズのしやすさと、モール等ではなく独自ECサイト構築が盛り上がった時期と重なり、旧バージョンである2系のEC-CUBEは今日でも数多く利用されています。
その多くが各ショップごとに商材や運用に合わせて独自カスタマイズがされており、なかなか他に切り替えられない、バージョンアップが難しいといった状況になっているショップも数多くあります。
そういったサイトで、レスポンシブ対応していないバージョンを今でもメンテしつつ使用しており、もういい加減スマホ対応しないとマズイ状況になっています。
でも、
「もうすぐフルリニューアルする予定だし...」*1
「ウチのサイトではスマホで買うお客さんはまだ少ないから平気」*2
とか、なんやかんや後延ばしになっているショップさんも多い様です。
実はCSSだけでシステムに手を入れずにレスポンシブ対応できる
あまり知られていない事ですが、実は2.4系など古いバージョンのEC-CUBEは、テンプレートファイルやPHPファイルに手を加えずに、ほぼCSSだけでスマホ対応できるのです。
もちろん、そんな古いバージョンをこの先もずっと使い続ける事はセキュリティ的にも良くないですし、近々でリニューアルが必要だと思いますが。
でも、それまでの「一時しのぎ」的な対応として、この簡易スマホ対応はとってもオススメのカスタマイズです。
おおまかなレイアウトの変更
元のPCの表示のこれを
こんな感じに組み替えます。
スマホ用のCSSファイルを追加する
まず、スマホ用CSSファイルを作り、head内で読み込みます。また、head要素内にviewportの指定を追加します。
CSSファイルはどこに置いても良いのですが、/html/user_data/packages配下に置いておく事をオススメします。
こんな感じです。
linkタグのmedia属性は、別にallでも良いのですが横幅指定しておくとPCの時はダウンロードされないのでPCで表示した時にサイトが遅くなったりするのを防げます。
スマホ用CSSファイルである、sp.cssではメディアクエリを使ってスマホ用の設定を書いていき、元のPC用のスタイルを上書きしていきます。
基本的なbodyの設定
横幅を画面幅に指定し、横スクロールが出ない様にはみ出した部分を非表示にします。
サイドバーなどの各カラムやヘッダーフッターの設定
「width: 980px」などの様に固定値で設定されている横幅を上書きで100％にします。
ドロワーメニューの設定
左サイドバーをドロワーメニューにした際のアニメーションを設定します。
開閉に関してはjQueryなど使ってjavascriptで制御します。
javascriptではハンバーガーメニューをクリックされた時にサイドバーに「open」というクラスを追加したり削除したりするだけにします。
あと、
*{ max-width: 100%; }
を入れると、あんまり良くないのですが楽できます。
スマホ用CSSと少しのjavascriptでレガシーなEC-CUBEもレスポンシブ！
他にも各画面で画像サイズの調整など、細かい調整が必要になりますが、以上がざっくりとした対応方法になります。
上記の様に、Smartyのテンプレートの変更は極小（viewportの設定とCSSの読み込み追加のみ）でCSSと少しのjavascriptだけでレガシーなEC-CUBEもスマホ対応できます。
しかし、これはあくまでも一時凌ぎの時間稼ぎなだけなので、この作業が必要なECサイトは早急にリニューアルしましょう！
