EC-CUBEを楽してデザイン。bootstrap3導入方法

2015年2月25日 02:24
最近になって、bootstrapを手掛けることが増えました。
最初はなんとも自由度が低い気がしたものの、使ってみるといろいろと便利だということがわかりました。
ECCUBEを導入し、テンプレートを購入する前に、一度導入してみては?ということでご紹介。
この記事は最終更新日から1年以上が経過しています。

※インストールはver.2.13以上が推奨されています。

テンプレートのダウンロード

ダウンロードはこちらから。
GitHbuからダウンロードになります。

clicktx/eccube-on-bootstrap3

初めての人はわかりづらいと思いますが、ページの下の方にあるダウンロードという記述
eccube-on-bootstrap3.tar.gzというリンクをクリックしましょう。
右のDwonloadZipというボタンからZIPファイルをダウンロードしても、インストールできません。

テンプレートのインストール方法

WS000005

インストールは、上の画像の通り
デザイン管理>PC>テンプレート追加

テンプレートコード:適当に001とでもしておきましょう。
テンプレート名:bootstrap3とでもしておきましょう。
テンプレートファイル:eccube-on-bootstrap3.tar.gzを選択。

この内容で登録するボタンを押せば、アップロードは完了。

インストールしても、テンプレートを反映させないと意味がありません。

デザイン管理>PC>テンプレート設定

先ほどインストールしたテンプレート名を選択し、この内容で登録するボタンを押します。

で、TOPページを確認すると、デザインが出来上がっております。

レスポンシブルデザインの利用方法

このテンプレート、PC専用のようで、スマートフォンには反映されておりません。

しかしながら、今はやりのレスポンシブルレイアウトには対応しておるようなので、利用しない手もないです。

一つコードを追加して、他のデバイスを無効化してしまいます。
/data/class_extends/SC_Display_Ex.php

require_once CLASS_REALDIR . 'SC_Display.php';

class SC_Display_Ex extends SC_Display{
	public static function detectDevice($reset = FALSE) {
        return DEVICE_TYPE_PC;
    }
}

ガラケーも無効になってしまいますので、ご注意ください。

以上で、完了になります。

総括

ECCUBE3の公開が間近となっていますが、発表をみたところ、管理画面だけデザインが変更されていたといった感じで、メイン部分は自分で何とかしないといけないようです。

といっても、盛り上がりに欠けるテンプレート販売において、安くもないものを購入するには、躊躇する。
そんな人には、まずはこれを利用したうえで、デザインをカスタマイズしてみるのも悪くはないと思います。

bootstrapの流れもしばらくは続くようですし、これで慣れるというのもいいかもしれません。
以上です。

それでは。

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp