タグ別アーカイブ: 商品ページd

EC CUBE 2.13.3 カスタマイズ 商品詳細コメント欄のhtmlにcssを適用させる方法 tableタグが使えない時の対処法

こんにちは。nekonomoridesignのYoshyです。
本日も、EC CUBEカスタマイズについてお話したいと思います。

商品登録をしていて、詳細ページのコメント欄にhtmlが使える事が判明したので、HTMLで記載し、CSSのスタイル設定で装飾してみる事にしました。

EC CUBE 2.13.3で商品詳細ページのhtmlが使えるコメント欄でcssを使ってデザインする方法

ひとまず、
EC CUBE管理画面 >> 商品管理 >>商品登録

から、編集したい商品の編集画面を開き、詳細-メインコメント(タグ許可)のところにhtmlを記載します。

ここに、最初、styleとかでくくってやってみたのですが、案の定ダメでした。

では、CSSはどこに記載するのか。

/html/user_data/packages/custom/css/contents.css

この contents.cssに自作のCSSを追加。

そして、

EC CUBE管理画面 >> 商品管理 >>商品登録

から、編集したい商品を再び選んで「編集」を押し、詳細-メインコメント(タグ許可)のところにhtmlを記載するだけです。
ちなみに、使えるhtmlは限られているようで、tableは使えませんでした。

tableっぽいので商品詳細情報を組みたいなら、cssでスタイル設定したdivを並べるしかない

のタグは使えたので、テーブルっぽいのも、すべてdivで作るのが良いみたいなので、float:leftを設定したclassを指定した

でうまく組み合わせていくしかなさそうです。
ちなみにここは 99999文字が上限なので、気を付けてくださいね。参考になるとうれしいです。EC CUBEの超初期カスタマイズであれば、質問にお答えできますので、お問い合わせもお気軽にお待ちしております。