EC CUBE3のハードルが高いから、EC CUBE2系をレスポンシブにして対応

EC CUBE3がリリースされて各社レンタルサーバーも標準で自動インストール対応をしているので、インストールまでは簡単に行えるのですが、その先のデザインやシステムのカスタマイズなどがまだハードルが高いのかと思います。

なのでまだEC CUBE2系の方が使い勝手がいい面も多そうですので、レスポンシブデザインにして対応しておきたいと思います。

EC CUBE2系をインストール

現在自動レンタルサーバー各社でインストールができるのではECCUBE3かと思いますので、EC CUBE2系をインストールするには手動でインストールをする必要があります。

インストール方法は下記記事を参考にしてください。
あえてEC-CUBE2系を手動でインストールする方法 2017(エックスサーバー)

eccube-on-bootstrap3をダウンロード

無料でレスポンシブデザイン用のテンプレートを配布してくれているサイトがありますのでそちらのサイトからテンプレートをダウンロードしてきます。

ECCUBE2系をレスポンシブデザインに
↓ダウンロードサイト↓
https://github.com/clicktx/eccube-on-bootstrap3

管理画面から設定

テンプレートファイルがダウンロードできたら、EC CUBE管理画面からテンプレートの設定を行って行きます。

bootstrap3-02
【デザイン管理】→【PC】→【テンプレート追加】をクリックします。

テンプレートコード・テンプレート名は半角英数字で入力(入力文言は何でも大丈夫です。)
【ファイル選択】は先ほどダウンロードしたテンプレートファイルを選択
【この内容で登録する】をクリックします。
これでテンプレートファイルがアップロードされました。

bootstrap3-03
次はアップロードしたテンプレートファイルを反映させます。
【デザイン管理】→【PC】→【テンプレート設定】をクリックします。
先ほど設定を設定をしたテンプレートメインが表示されると思いますので、それをチェックして、【この内容で登録をする】をクリックします。

bootstrap3-04
PCでサイトを確認してみて、上記画像のように表示されればOKです。

スマホで閲覧した場合にもデザインを反映させる

デフォルトだとスマホで閲覧した場合は、スマホ専用のデザインに切り替わってします。
試しに一度スマホで確認してもらうとわかるかと思います。

レスポンシブデザインですので、スマホでもこのデザインを反映させる必要がありますので、スマホ判定を行っているファイルを少しいじる必要があります。

FTPソフトでdata/class/SC_Display.phpを開いて、数行コメントアウトします。

ちなみに【//】でその行はコメントアウトされます。

コメントアウトが完了したら、ファイルを上書きさせて、スマホで表示の確認を行ってみてください。

bootstrap3-05
こんなデザインで表示されれば完了です。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク