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

WEB制作、マーケティングに関する情報をお届けします。

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

2016.09.07

カテゴリ：WEB制作

タグ：

EC CUBE3.0

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

インデックス

1.扱うファイル
2.スライドショー本体部分を追加
3.スライドショー本体部分の修正
4.スタイルの追加

1.扱うファイル

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

まずはスライドショーが入っているパーツの場所について。
app→template→custom(テンプレート名)→index.twig

EC CUBEのワイヤーフレームが入っているファイルの場所について。
app→template→custom(テンプレート名)→default_frame.twig

追加するスタイル(css)の場所
html→template→custom(テンプレート名)→css→style.css

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

まずは、スライドショーのパーツを変更します。
index.twigを開きます。

{% block main %}から{% endblock %}までをコピペして新しくBlock作成してsliderと名前をつけておきます。

{% 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 %}

{% block slider %}

</div>

</div>

</div>

{% endblock %}

現状だとクラス名がcol-sm-12だと１２カラムに固定された状態になるので、この部分はwideslideなど任意の名前に変更しておきます。

また、イメージにaタグがついていないので今のままだと何のリンクも無いスライドショーになるのでaタグを追加して置きましょう。
下記、コードです。

    {% 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 %}

{% block slider %}

</div>

</div>

</div>

{% endblock %}

以上でスライドショーの本体部分の修正は終わりです。

3.フレーム部分の修正

フレーム部分の修正をします。
default_frame.twigを開きます。
このファイルはEC CUBE配置等のフレーム部分が詰まったファイルです。
デザインをカスタマイズする際はこの中のコードを必ず扱うので、いろいろ触って慣れておくと自由度の高いカスタマイズも出来るようになってきます。
では、コードを見ていきます。

108行目の{% block main %}{% endblock %}でブロックの読み込みをしています。
まずは先ほど作ったブロックを読み込むためにこれをコピーして下記に書き換えます。 ※この{% block main %}{% endblock %}は絶対に必要な物なので削除しては行けません。

{% block slider %}{% endblock %}

1	{% block slider %}{% endblock %}

コレで新しく作成したsliderという名前のブロックが読み込み出来ます。
次にこのブロックを内包しているタグの外に出して上げないと行けません。
87行目のクラス名、container-fluidが左右にパディングをとっているためこの外側に出します。
container-fluidの上の86行目に{% block slider %}{% endblock %}を移動してください。
これでフレームの修正は終了です。

4.スタイルの追加

あとはスタイルを追加するだけです。
style.cssを開いて最後の行にでも下記をコピペしてください。

.wideslide{
	padding:0;
}

.item img {
	width:100%;
}

.wideslide{

padding:0;

}

.item img {

width:100%;

}

コレで、横幅いっぱいのスライドショーの完成です。

5.まとめ

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

まだまだ、EC CUBE3.0のプラグイン等は少ないですが、この要領でブロックの作成や読み込み、フレームの修正、スタイルの追加等を行っていけば比較的簡単にデザインのカスタマイズは可能です。

WEB制作、マーケティングに関する情報をお届けします。