EC-CUBE4デザインテンプレート・EC-CUBE4機能カスタマイズ版
ヘッダー背景やBody背景を簡単に変更

EC-CUBE4:ヘッダー背景やBody背景を簡単に変更
■src/Eccube/Resource/template/default/default_frame.twig（機能カスタマイズ版）
■app/template/[テンプレートコード]/default_frame.twig（デザインテンプレート）
38行目付近を変更して下さい。

{# <link rel="stylesheet" href="{{ asset('assets/css/design/001/style.css') }}"> #}

↓ 赤字（コメントタグ）を削除し、デザインに応じて数値を変更します。

<link rel="stylesheet" href="{{ asset('assets/css/design/001/style.css') }}">

デザインは50パターンありますので、値は000から050まで変更可能です。
画像とCSSファイルは下記フォルダにあります。
■html/template/default/assets/css/design（機能カスタマイズ版）
■html/template/[テンプレートコード]/assets/css/design（デザインテンプレート）
変更後は、管理画面[コンテンツ管理＞キャッシュ管理]で[キャッシュ削除]を行わないと反映されません。
※　デザインパターンの画像はEC-CUBE3のものを使用しているので、レイアウトは若干異なります。（フッター部は変化しません）

デザインパターン

  • *
    001
  • *
    002
  • *
    003
  • *
    004
  • *
    005
  • *
    006
  • *
    007
  • *
    008
  • *
    009
  • *
    010
  • *
    011
  • *
    012
  • *
    013
  • *
    014
  • *
    015
  • *
    016
  • *
    017
  • *
    018
  • *
    019
  • *
    020
  • *
    021
  • *
    022
  • *
    023
  • *
    024
  • *
    025
  • *
    026
  • *
    027
  • *
    028
  • *
    029
  • *
    030
  • *
    031
  • *
    032
  • *
    033
  • *
    034
  • *
    035
  • *
    036
  • *
    037
  • *
    038
  • *
    039
  • *
    040
  • *
    041
  • *
    042
  • *
    043
  • *
    044
  • *
    045
  • *
    046
  • *
    047
  • *
    048
  • *
    049
  • *
    050

デザイン確定後に実行（必須ではありません。実行しなくても構いません。）

デザインの確定後は上記変更のままでもよいのですが、次の方法によりcssへのリンクを1つ減らすことができます。

（1）/css/design/確定した番号/style.css　の内容をすべてコピーします。
（002で確定した場合のcssは、/css/design/002/style.cssとなります）

（2）/css/style.css　の最後に貼り付けます。

（3）default_frame.twigのcss読み込みコードをコメントアウトするか、または削除します。
{# <link rel="stylesheet" href="{{ asset('assets/css/design/001/style.css') }}"> #}

（4）管理画面[コンテンツ管理＞キャッシュ管理]で[キャッシュ削除]を行います。
このページの先頭へ