バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

79 人のユーザが現在オンラインです。 (67 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 79
もっと...

サイト内検索
質問 > フロント機能 > 背景色を横幅100%で表示したい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ゲスト
投稿日時: 2018/2/22 13:26
対応状況: 解決済
背景色を横幅100%で表示したい
EC-CUBE3系のデフォルトテンプレートを改変し、デザインを変更しようとしています。
たとえばPick Up Itemsのエリアに背景色をつけて、
・背景色はブラウザの横幅いっぱいに表示
・コンテンツはデフォルトテンプレート通り1150pxまでの横幅で中央に表示
というかたちに改変したいと考えています。

横幅1150pxの制限はstyle.cssのinnerクラスで行われていると思うので、default_frame.twigの内容を以下のように変更し、メインコンテンツエリアの横幅が制限されないようにしたつもりです。
        <div class="container">
{#        <div class="container-fluid inner"> #}
            {# ▼LEFT COLUMN #}
            {% if PageLayout.SideLeft %}
                <div id="side_left" class="side">
                    {# ▼左ナビ #}
                    {{ include('block.twig', {'Blocks': PageLayout.SideLeft}) }}
                    {# ▲左ナビ #}
                </div>
            {% endif %}
            {# ▲LEFT COLUMN #}

            <div id="main center">
                {# ▼メイン上部 #}
                {% if PageLayout.MainTop %}
                    <div id="main_top">
                        {{ include('block.twig', {'Blocks': PageLayout.MainTop}) }}
                    </div>
                {% endif %}
                {# ▲メイン上部 #}

                <div id="main_middle">
                    {% block main %}{% endblock %}
                </div>

                {# ▼メイン下部 #}
                {% if PageLayout.MainBottom %}
                    <div id="main_bottom">
                        {{ include('block.twig', {'Blocks': PageLayout.MainBottom}) }}
                    </div>
                {% endif %}
                {# ▲メイン下部 #}
            </div>

            {# ▼RIGHT COLUMN #}
            {% if PageLayout.SideRight %}
                <div id="side_right" class="side">
                    {# ▼右ナビ #}
                    {{ include('block.twig', {'Blocks': PageLayout.SideRight}) }}
                    {# ▲右ナビ #}
                </div>
            {% endif %}
            {# ▲RIGHT COLUMN #}

            {# ▼BOTTOM COLUMN #}
            {% if PageLayout.ContentsBottom %}
                <div id="contents_bottom">
                    {# ▼下ナビ #}
                    {{ include('block.twig', {'Blocks': PageLayout.ContentsBottom}) }}
                    {# ▲下ナビ #}
                </div>
            {% endif %}
            {# ▲BOTTOM COLUMN #}

        </div>


そのうえで、new_product.twigに以下のようにinnerクラスを追加しました。（以下のうち3行目）
<div id="contents_top">
<div id="item_list">
    <div class="container-fluid inner">
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <div class="row no-padding">
                <div class="col-xs-6">
                    <div class="img img_right"><a href="{{ url('product_detail', {id : 2}) }}"><img src="{{ app.config.front_urlpath }}/img/top/img01.jpg"></a></div>
                </div>
                <div class="col-xs-6">
                    <div class="img"><a href="{{  url('product_detail', {id : 2}) }}"><img src="{{ app.config.front_urlpath }}/img/top/img02.jpg"></a></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 comment_area">
            <div class="txt_center">
                <h4>新入荷商品</h4>
                <h5>この季節にぴったりな商品をご用意しました</h5>
                <p>さわやかな日差しが過ごしやすい季節。心地よいくらしのための、お部屋のアクセントになるおすすめのファブリックやグッズをご紹介します。</p>
                <p><a class="btn btn-success" href="#">一覧を見る<svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></a></p>
            </div>
        </div>
    </div>
.
.
.


この状態で、上記のcontainer-fluid innerより上層にいるitem_listに背景色を設定したのですが、やはり背景色の横幅が1150pxに制限されてしまいます。
（以下のように記述しました。）
#item_list{
    background-color: #F9F1E6;
}


背景色を横幅いっぱいに表示するには、どのようにしたら良いのでしょうか？
EC-CUBEの質問というよりCSSの質問のようになってしまって恐縮なのですが、よろしくお願いいたします。

▼テンプレート
[EC-CUBE] EC-CUBE3.0.10
[レンタルサーバ] エックスサーバー
[ブラウザ] Chrome
[導入プラグインの有無] なし
[カスタマイズの有無] その他CSSは基本的になし
[現象] 上記の通り
minori
投稿日時: 2018/2/23 14:12
対応状況: −−−
常連
登録日: 2017/10/12
居住地:
投稿: 40
Re: 背景色を横幅100%で表示したい
記載されているdefault_frame.twigの先頭のdivでcontainerクラスが定義されていますが、
style.cssでは.containerに対して横幅の指定(width: 1170px)があります。

<div class="container">　◆width: 1170pxになる
{#        <div class="container-fluid inner"> #}

このあたりが原因ではないでしょうか？
ゲスト
投稿日時: 2018/2/23 14:12
対応状況: −−−
Re: 背景色を横幅100%で表示したい
すみません、自己解決しました！
"container"というクラス指定が良くなかったようです。
ここのクラス指定をなくして、他の箇所にcontainer-fluid innerを入れていけば背景色を横幅100%でつけることができました。
おさわがせしましたm(_ _)m
ゲスト
投稿日時: 2018/2/23 14:13
対応状況: −−−
Re: 背景色を横幅100%で表示したい
あ！ありがとうございます！！
ちょうど同じタイミングで自己解決しておりました。
ご指摘の通りの点が原因でした。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,849名です
総投稿数は109,986件です

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2313
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1646
8
red 		1570
9
mcontact 		1291
10
tsuji 		958
11
fukap 		907
12
shutta 		835
13
tao_s 		799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan 		633
18 DELIGHT 572
19
patapata 		502
20
flealog 		485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.