![](https://design-tera.com/wp-content/uploads/2023/01/fd1b863e460fa5d1209f04e6f584e113-133x85.jpg)
EC-CUBE3.0 ブロックの追加方法とCSSのカスタマイズについて。
カテゴリ:WEB制作
タグ:
![](https://design-tera.com/wp-content/uploads/2016/08/newblock.jpg)
![EC CUBE3.0 新しいブロックの作成とカスタマイズ](https://design-tera.com/wp-content/uploads/2016/08/newblock.jpg)
EC-CUBE3.0での新しいブロックの作成方法を紹介します。
HTML(twig)のデータは管理画面からでも行えますがCSSのカスタマイズは管理画面からは行えません。
CSSファイルの場所等も紹介します。
インデックス
1.管理画面からブロックの作成
管理画面のブロック管理→新規入力でブロックの作成画面に遷移します。
![新しいブロックの作成画面へ移動](https://design-tera.com/wp-content/uploads/2016/08/newblock-1.jpg)
それぞれの項目を記入します。
![必要事項の記入](https://design-tera.com/wp-content/uploads/2016/08/wright.jpg)
- ブロック名:管理画面に表示する名前
- ファイル名:ハイフンが使えません。
- ブロックデータ:コンテンツエリアです。
登録を押すとブロックが作成されるので、ページ管理→編集したいページ→レイアウト編集で配置出来るようになります。
![レイアウトのカスタマイズ方法](https://design-tera.com/wp-content/uploads/2016/08/select-1.jpg)
2.CSSの階層について
CSSの記入はサーバーからファイルを直接さわらないとカスタマイズ出来ません。
階層はhtml→template→現在設定されているテンプレート名→cssの中に有ります。
![CSSファイルの場所](https://design-tera.com/wp-content/uploads/2016/08/css-layer.jpg)
EC-CUBE3.0はBootstrap3がベースになっています。
多少、改良は加えてあるみたいですが、Bootstrapをあつかった事のある人は比較的カスタマイズしやすいと思います。
ちなみにBootstrapのcssは同じフォルダ内にありstyle.cssの上部でimportしています。