EC-CUBEのデフォルトテーマをSassでカスタマイズする方法

EC-CUBEのデフォルトテーマをSassでカスタマイズするにはどうすればいいのか

EC-CUBEをインストールしてから、Sassを使ってテーマのデザインをカスタマイズしたい時にどうすればいいのかについて解説します。

Scssファイルの場所やSassをCSSにビルドする方法、CSSをサーバーにアップする方法についても書いていきます。

目次

  • この記事のゴール
  • スライドのクラス名を調べる
  • Sassのコードを書くファイルはこちら
  • ファイルの読み込み(@import)
  • Sassをビルドする
  • ビルドされたCSSをサーバーにアップする

この記事のゴール

メインビジュアルのスライド部分を消します。

before
after

スライドのクラス名を調べる

Googleの検証ツールを使って、メインビジュアルのクラス名を調べます。

そうすると、 ec-sliderRole というクラス名を持っていることが分かりました。

以下のようなCSSを書くと、メインビジュアルのスライド部分を消すことができます。

.ec-slider-Role {
  display: none;
}

Sassのコードを書くファイルはこちら

ルートディレクトリからの相対パスは以下の通りです。

html/template/default/assets/scss/sections/_projects.scss

_projects.scss

/*
トップページ

Styleguide 12.0
*/

.ec-slider-Role {
  display: none;
}

書く場所はコメントアウトを参考にします。

今回スタイルを適応させたいメインビジュアルは、トップページにあるので上記の場所に書きます。

なお、「Styleguide12.0」というのは、EC-CUBEが用意しているスタイルガイドのことです。

Styleguide12.0

ファイルの読み込み(@import)

html/template/default/assets/scss/style.scss に、以下の記述をします。

@import "sections/projects";

style.scssでは、他のscssファイルをまとめて読み込んでいます。

上書きをしたいため、一番最後に追加しましょう。

Sassをビルドする

ターミナルで、ルートディレクトリに移動して以下のコマンドを打ちます。

npm install

すると、Sassをビルドするのに必要な、node_modules ディレクトリが生成されます。

そして、

npm run build

と入力すると、html/template/default/assets/css/style.css にビルドされたCSSが出力されます。

node_modulesが生成されない場合

サーバーの簡単インストールでEC-CUBEをインストールした時などに、node_modules を生成するのに必要な、gulpfile.jspackage.json がインストールされていない場合があります。その場合は、EC-CUBEの公式サイトのダウンロードページ から、ダウンロードしましょう!

ビルドされたCSSをサーバーにアップする

VScodeのSFTPを使用している場合は、ファイルを右クリックして、「アップロード」をクリックします。
(サーバーのパス等の指定が完了した後に行ってください)

以上の作業で、メインビジュアルのスライド部分を消すことができました!

before
after

開発者向けドキュメント

この記事の内容は、以下のドキュメントのページを参考にしました。

EC-CUBE 4.0 開発者向けドキュメント > デザインカスタマイズ > Sass(scss)の利用方法