CSS今日は、スマホに対応していないバージョン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配下に置いておく事をオススメします。gist.github.comこんな感じです。linkタグのmedia属性は、別にallでも良いのですが横幅指定しておくとPCの時はダウンロードされないのでPCで表示した時にサイトが遅くなったりするのを防げます。スマホ用CSSファイルである、sp.cssではメディアクエリを使ってスマホ用の設定を書いていき、元のPC用のスタイルを上書きしていきます。横幅を画面幅に指定し、横スクロールが出ない様にはみ出した部分を非表示にします。980px」などの様に固定値で設定されている横幅を上書きで100%にします。左サイドバーをドロワーメニューにした際のアニメーションを設定します。開閉に関してはjQueryなど使ってjavascriptで制御します。gist.github.comjavascriptではハンバーガーメニューをクリックされた時にサイドバーに「open」というクラスを追加したり削除したりするだけにします。}を入れると、あんまり良くないのですが楽できます。スマホ用CSSと少しのjavascriptでレガシーなEC-CUBEもレスポンシブ!他にも各画面で画像サイズの調整など、細かい調整が必要になりますが、以上がざっくりとした対応方法になります。上記の様に、Smartyのテンプレートの変更は極小(viewportの設定とCSSの読み込み追加のみ)でCSSと少しのjavascriptだけでレガシーなEC-CUBEもスマホ対応できます。Qiitaに投稿してまして、EC-CUBE関連の記事...2015-07-28ロックオン主催のEC-CUBE3の東京勉強会に参加してきました毎度ご無沙汰しております。株式会社クロスキューブの佐々木で...2010-04-19EC-CUBEとローカルの基幹システムを安全な通信で連携させる。最近、EC-CUBE(WEBサーバ)と社内の基幹システムとの連携カス...2009-10-07EC-CUBEカスタマイズデモサイトにカテゴリテンプレート機能を追加しました。EC-CUBEのカスタマイズデモサイトに、カテゴリ毎に指定したテン...2009-09-01EC-CUBEカスタマイズデモサイトをバージョンアップしました。(2)はてなブログをはじめよう!xross-cubeさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。