WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

EC CUBE3.0 スライドショーを横幅いっぱいにカスタマイズする方法

タグ:

スライドショーのカスタマイズ
EC CUBE3.0のスライドショーを横幅いっぱいにする方法を紹介します。
といってもEC CUBEはBootstrapのフレームを使っているのでBootstrapを扱える方はファイルの場所さえわかってしまえば簡単に出来ると思います。

1.扱うファイル

テンプレートを新しく追加していることを前提とします。
わからない方はEC-CUBE3.0のテンプレートカスタマイズの手順。を見てください。

まずはスライドショーが入っているパーツの場所について。
app→template→custom(テンプレート名)→index.twig
スライドショーの有るファイルのかいそうについて
EC CUBEのワイヤーフレームが入っているファイルの場所について。
app→template→custom(テンプレート名)→default_frame.twig
EC CUBEのフレームの場所
追加するスタイル(css)の場所
html→template→custom(テンプレート名)→css→style.css
CSSファイルの場所

2.スライドショー本体部分を追加

まずは、スライドショーのパーツを変更します。
index.twigを開きます。
スライドショーのクラス名をリネーム
{% block main %}から{% endblock %}までをコピペして新しくBlock作成してsliderと名前をつけておきます。 現状だとクラス名がcol-sm-12だと12カラムに固定された状態になるので、この部分はwideslideなど任意の名前に変更しておきます。

また、イメージにaタグがついていないので今のままだと何のリンクも無いスライドショーになるのでaタグを追加して置きましょう。
下記、コードです。 以上でスライドショーの本体部分の修正は終わりです。

3.フレーム部分の修正

フレーム部分の修正をします。
default_frame.twigを開きます。
このファイルはEC CUBE配置等のフレーム部分が詰まったファイルです。
デザインをカスタマイズする際はこの中のコードを必ず扱うので、いろいろ触って慣れておくと自由度の高いカスタマイズも出来るようになってきます。
では、コードを見ていきます。
スライドショーの読み込みブロック
108行目の{% block main %}{% endblock %}でブロックの読み込みをしています。
まずは先ほど作ったブロックを読み込むためにこれをコピーして下記に書き換えます。 ※この{% block main %}{% endblock %}は絶対に必要な物なので削除しては行けません。 コレで新しく作成したsliderという名前のブロックが読み込み出来ます。
次にこのブロックを内包しているタグの外に出して上げないと行けません。
87行目のクラス名、container-fluidが左右にパディングをとっているためこの外側に出します。
container-fluidの上の86行目に{% block slider %}{% endblock %}を移動してください。
これでフレームの修正は終了です。

4.スタイルの追加

あとはスタイルを追加するだけです。
style.cssを開いて最後の行にでも下記をコピペしてください。 コレで、横幅いっぱいのスライドショーの完成です。
横幅いっぱいのスライドショーの完成

5.まとめ

今回のスライドショーはレイアウトのcontens_topの下に入っているので、両脇のカラムには干渉しないので管理画面上からレイアウトを触っても崩れたりする事が有りません。
新しく作ったスライドショーはココに入るよ
まだまだ、EC CUBE3.0のプラグイン等は少ないですが、この要領でブロックの作成や読み込み、フレームの修正、スタイルの追加等を行っていけば比較的簡単にデザインのカスタマイズは可能です。