1.管理画面からCSSを追加する

1つめは管理画面の「コンテンツ管理 -> CSS管理」からCSS設定ページを開き、CSSコードを記入する方法。

ここで入力した内容はショップ全体に適用されるようになります。デザインを細かくカスタマイズする場合コード量が多くなるが、一箇所で管理できるので分かりやすいというメリットもある。

2.新しくCSSファイルを作って読み込む

2つめはWordpressなどでも一般的に使われる方法で、CSSファイルを作成してテンプレートに読み込む方法。

作成したファイルは、html/template/テンプレート名/assets/css/に入れておき、default_frame.twigのheadにlinkタグを挿入。

挿入する場所はデフォルトのスタイルシートの直後にしておく。

default_frame.twigは管理画面から編集できないので、コードエディターで編集してFTPツールでアップロード。

アップロード後は「コンテンツ管理 -> キャッシュ管理」からキャッシュの削除をおこなって変更を適用。

3.ページやブロックに直接CSSコードを書き込む

ページ編集画面に表示されるコードにはstylesheetブロックがあり、ここにページ（またはブロック）ごとのスタイルを記述することができる。

ただ、ファイル内のコード量が多くなり可読性が悪くなるという欠点がある。また、ここで書いたコードはこのページでしか使えないため注意が必要。

4.Sassを編集してビルド

アセットフォルダにある元のCSSファイルを編集することもできますが、このファイルは巨大なため直接編集するのはかなり大変。なので元のスタイルをカスタマイズするならSassを使った編集方法がおすすめ。

Sassでビルドを行うにはnode.jsのインストールが必要。

nodeがインストールできたら、ターミナルでeccube4のルートフォルダ（ここではeccube-412）に移動します。

cd /Applications/MAMP/htdocs/eccube-412

移動したらインストールコマンドを打ち込む（インストールは最初の１回だけでOK）。

npm install

npm installで必要なnodeパッケージがダウンロードされる。ダウンロードが完了したら、続けてビルドコマンドを入れる。

npm run build

デフォルトテンプレートに、最初はなかったstyle.min.cssが作成されます。