
EC CUBE3.0 スライドショーを横幅いっぱいにカスタマイズする方法
2016.09.07
カテゴリ:WEB制作
タグ:

といってもEC CUBEはBootstrapのフレームを使っているのでBootstrapを扱える方はファイルの場所さえわかってしまえば簡単に出来ると思います。
1.扱うファイル
テンプレートを新しく追加していることを前提とします。わからない方はEC-CUBE3.0のテンプレートカスタマイズの手順。を見てください。
まずはスライドショーが入っているパーツの場所について。
app→template→custom(テンプレート名)→index.twig

app→template→custom(テンプレート名)→default_frame.twig

html→template→custom(テンプレート名)→css→style.css

2.スライドショー本体部分を追加
まずは、スライドショーのパーツを変更します。index.twigを開きます。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{% block slider %} <div class="row"> <div class="col-sm-12"> <div class="main_visual"> <div class="item"> <img src="/test/html/template/default/img/top/mv01.jpg"> </div> <div class="item"> <img src="/test/html/template/default/img/top/mv02.jpg"> </div> <div class="item"> <img src="/test/html/template/default/img/top/mv03.jpg"> </div> </div> </div> </div> {% endblock %} |
また、イメージにaタグがついていないので今のままだと何のリンクも無いスライドショーになるのでaタグを追加して置きましょう。
下記、コードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{% block slider %} <div class="wideslide"> <div class="main_visual"> <div class="item"> <a href=""><img src="{{ app.config.front_urlpath }}/img/top/mv01.jpg"></a> </div> <div class="item"> <a href=""><img src="{{ app.config.front_urlpath }}/img/top/mv02.jpg"></a> </div> <div class="item"> <a href=""><img src="{{ app.config.front_urlpath }}/img/top/mv03.jpg"></a> </div> </div> </div> {% endblock %} |
3.フレーム部分の修正
フレーム部分の修正をします。default_frame.twigを開きます。
このファイルはEC CUBE配置等のフレーム部分が詰まったファイルです。
デザインをカスタマイズする際はこの中のコードを必ず扱うので、いろいろ触って慣れておくと自由度の高いカスタマイズも出来るようになってきます。
では、コードを見ていきます。

まずは先ほど作ったブロックを読み込むためにこれをコピーして下記に書き換えます。 ※この{% block main %}{% endblock %}は絶対に必要な物なので削除しては行けません。
1 |
{% block slider %}{% endblock %} |
次にこのブロックを内包しているタグの外に出して上げないと行けません。
87行目のクラス名、container-fluidが左右にパディングをとっているためこの外側に出します。
container-fluidの上の86行目に{% block slider %}{% endblock %}を移動してください。
これでフレームの修正は終了です。
4.スタイルの追加
あとはスタイルを追加するだけです。style.cssを開いて最後の行にでも下記をコピペしてください。
1 2 3 4 5 6 7 |
.wideslide{ padding:0; } .item img { width:100%; } |

5.まとめ
今回のスライドショーはレイアウトのcontens_topの下に入っているので、両脇のカラムには干渉しないので管理画面上からレイアウトを触っても崩れたりする事が有りません。