Cafe24新着情報

[商品管理] [モバイル]商品キュレーションのデザインソース設定ガイド(ポップアップ) - HTML/CSS

2019-06-19


平素よりcafe24をご利用いただき、ありがとうございます。


商品検索アップグレードデザインの適用方法をご案内いたします。

詳細は以下の内容をご確認ください。

 

HTML 編集方法へ移動する - 日本語」
HTML 編集方法へ移動する - 英語」
HTML 編集方法へ移動する - 韓国語」
HTML 編集方法へ移動する - 中国語(簡体字)
HTML 編集方法へ移動する - 中国(体字)



■ 適用方法 - モバイルショップ


1. 商品カテゴリ画面の編集


- 編集経路 : /product/list.html

- 編集経路 : /product/list_thumb.html

- 編集経路 : /product/list_gallery.html


▼以下のように青色のソースを追加します。

    <div id="titleArea" module="product_headcategory">
        ..... 中略 .....
        <div class="funcArea">
            <button type="button" id="ec-product-searchdata-mobile-button" class="btnSearchdata">詳細検索</button>
        </div>
    </div>

    <div module="product_searchdata">
        <!--@css(/css/module/product/searchdata.css)-->
        <div module="product_categoryHashtag">
            <span class="heading"><strong>タグ</strong></span>
            <ul class="list">
                <li>{$searchdata_category_hashtag}</li>
                <li>{$searchdata_category_hashtag}</li>
            </ul>
        </div>
        <div module="product_searchConditionData">
            <ul class="searchDataResult">
                <li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>削除</button></li>
                <li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>削除</button></li>
            </ul>
        </div>
    </div>

    <ul class="menuCategory">
   
 ..... 中略 .....
  
<!--=================================== 最下段に追加 ===================================-->
<!-- 詳細検索レイヤーウィンドウ -->
<!--@import(/product/search_data.html)-->


2. 商品検索画面の編集


- 編集経路 : /product/search.html

▼以下のように赤色のソースを削除し、青色のソースを追加します。

<!--@layout(/layout/basic/layout.html)-->

<div id="titleArea" module="search_form">
    <!--@css(/css/module/search/form.css)-->
    <!--@js(/js/module/search/form.js)-->
    <h2>検索結果(<span class="count">{$total_count}</span>)件</h2>
    <span module="Layout_MobileAction">
        <a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/btn_back.gif" width="33" alt="戻る"></a>
    </span>

    <div class="searchbox">
        {$form.keyword}
        <p class="button"><button type="submit" class="btnStrong">検索</button></p>
        <button type="button" class="btnDelete">削除</button>
    </div>

    <div class="inner">
        {$form.order_by}
    </div>

    <p class="empty {$search_fail_display|display}">一致する検索結果がありませんでした。</p>
</div>

<div module="product_searchdata">
    <!--@css(/css/module/product/searchdata.css)-->
    <div id="titleArea">
        <h2>検索結果(<span class="count">{$total_count}</span>)件</h2>
        <span module="Layout_MobileAction">
            <a href="#none" onclick="{$go_back}"><img src="http://img.echosting.cafe24.com/skin/mobile_ja_JP/layout/btn_back.gif" width="33" alt="戻る"></a>
        </span>
        <form class="searchField" id="{$searchkeyword_form}" action="/product/search.html" method="get">
           <div class="searchbox">
                {$searchdata_keywordform}<p class="button"><button class="btnStrong" id="{$search_submit_button}">検索</button></p>
                <button type="button" class="btnDelete">削除</button>
                <div class="autoList" id="{$searchdata_auto_list_id}">
                    <ul class="autoDrop" id="{$search_auto_id}"></ul>   
                    <div class="dimmed"></div>
                </div>   
            </div>
            <div module="product_RelateKeyword" class="keywordArea">
                <strong class="heading">関連キーワード</strong>
                <ul class="list">
                   <li><a href="{$relate_url}">{$relate_word}</a></li>
                   <li><a href="{$relate_url}">{$relate_word}</a></li>
                </ul>
            </div>
        </form>
        <div module="product_searchConditionData">
            <ul class="searchDataResult">
                <li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>削除</button></li>
                <li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>削除</button></li>
            </ul>
        </div>
        <div class="inner">
            {$searchOrderby}
            <button type="button" id="ec-product-searchdata-mobile-button" class="btnSearchdata {$search_detail_search_display|display}">詳細検索</button>
        </div>
        <p class="empty {$search_fail_display|display}">一致する情報は見つかりません。</p>
    </div>
</div>
 
<div module="Search_Result" class="ec-base-product typeDesc">
   
..... 中略 .....
   
<!--=================================== 最下段に追加 ===================================-->
<!-- 詳細検索レイヤーウィンドウ -->
<!--@import(/product/search_data.html)-->


3. 詳細検索レイヤーウィンドウ新規追加


- 新規作成方法 : /product/search_data.html


▼以下の内容でファイルを新規作成します。

<div module="product_searchdata" class="{$filter_class}">
    <!--@css(/css/module/product/searchdata.css)-->
    <form class="searchCondition" id="{$searchdata_form}" name="" method="get">
        <input type="hidden" name="keyword" id="{$searchdata_keyword_hidden}"><input type="hidden" name="rel_keyword" id="{$searchdata_rel_keyword}" value="{$searchdata_rel_keyword_param}"><div class="header">
            <h2 class="title">詳細検索</h2>
        </div>
        <div class="wrap">
            <div class="toggleArea eToggle selected" module="product_SearchFilterList">
                <div class="title {$filter_key}"><h3>{$filter_name}</h3></div>
                <div class="contents {$filter_type}">
                    <ul module="product_filterform">
                        <li class="{$filter_class}">{$filter_value}</li>
                        <li class="{$filter_class}">{$filter_value}</li>
                    </ul>
                    <div class="withinInput {$within_input_display|display}"><div class="search">{$within_input}<button type="button" class="btnDelete">削除</button></div>{$within_suggest}</div>
                    <div class="priceInput {$price_input_display|display}">{$price_input}</div>
                    <div class="slider {$price_slider_display|display}">{$price_slider}</div>
                    <p class="value {$price_slider_display|display}">{$price_txt}</p>
                </div>
                <button type="button" class="btnClear ec-product-searchdata-form-clear" {$filter_key_value}>選択解除</button>
            </div>
        </div>
        <div class="btnArea type2">
            <button type="button" class="btnEm ec-product-searchdata-reset">すべて選択解除</button>
            <button type="button" class="btnSubmit" id="{$searchdata_submit}">検索</button>
        </div>
        <button type="button" class="btnClose">閉じる</button>
    </form>
</div>


4. 商品詳細画面の編集

- 編集経路 : /product/detail.html

▼以下のように青色のソースを追加します。

        <div class="{$colorchip_display|display}">
            <div class="color" module="product_Colorchip">
                <span class="chips" style="background-color:{$color};"></span>
                <span class="chips" style="background-color:{$color};"></span>
            </div>
        </div>

        <div module="product_hashtag" class="{$hashtag_display|display}">
            <!--@css(/css/module/product/hashtag.css)-->
            <div class="heading"><strong>タグ</strong></div>
            <ul class="list">
                <li>{$hashtag}</li>
                <li>{$hashtag}</li>
            </ul>
        </div>

    </div><!-- //参考 -->


5. CSS編集


- 新規作成経路 : /css/module/product/searchdata.css


▼以下の内容でファイルを新規作成します。

/* 商品カテゴリ */

.xans-product-menupackage #titleArea .funcArea { position:absolute; top:6px; right:14px; }

.xans-product-menupackage #titleArea .btnSearchdata { width:33px; height:29px; font-size:0; line-height:0; cursor:pointer; border:0; outline:0; background:url("//img.echosting.cafe24.com/skin/mobile/layout/btn_searchdata.gif") no-repeat 0 0; background-size:33px 29px; }

.xans-product-menupackage #titleArea .btnSearchdata.checked { background:url("//img.echosting.cafe24.com/skin/mobile/layout/btn_searchdata_on.gif") no-repeat 0 0; background-size:33px 29px; }

.xans-product-searchdata .xans-product-categoryhashtag { overflow:hidden; overflow-x:auto; padding:9px 0 10px; border-bottom:1px solid #d5d5d5; background:#fff; white-space:nowrap; -webkit-overflow-scrolling:touch; }

.xans-product-searchdata .xans-product-categoryhashtag .heading { display:inline-block; width:47px; margin:0 0 0 14px; vertical-align:top; }

.xans-product-searchdata .xans-product-categoryhashtag .heading > strong { display:inline-block; padding:3px 5px; border:1px solid #c8c8c8; color:#2e2e2e; font-size:11px; background:#fff; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }

.xans-product-searchdata .xans-product-categoryhashtag .list { display:inline-block; vertical-align:top; font-size:0; line-height:0; }

.xans-product-searchdata .xans-product-categoryhashtag .list li { display:inline-block; margin:3px 14px 4px 0; }

.xans-product-searchdata .xans-product-categoryhashtag .list li a { display:inline-block; word-break:break-all; word-wrap:break-word; color:#525252; font-size:11px; line-height:16px; }

/* 検索 */

.xans-product-searchdata #titleArea { background-color:transparent; border-bottom:0; }

.xans-product-searchdata #titleArea span.count { position:static; color:#508bed; }

.xans-product-searchdata #titleArea h2 { border-bottom:1px solid #c2c2c2; background:#fff; }

.xans-product-searchdata .empty { padding:93px 0 59px; color:#4a5164; text-align:center; font-size:17px; background:url("//img.echosting.cafe24.com/skin/mobile/product/ico_search.png") center 28px no-repeat #fff; background-size:37px; }

.xans-product-searchdata .searchbox { position:relative; padding:7px 65px 6px 14px; border-bottom:1px solid #d1d1d1; background:#fff; }

.xans-product-searchdata .searchbox input#ec-product-searchdata-keyword { width:100%; }

.xans-product-searchdata .searchbox .button { position:absolute; top:7px; right:10px; text-align:right; }

.xans-product-searchdata .searchbox .button .btnStrong { height:29px; }

.xans-product-searchdata .searchbox .btnDelete {

  overflow: hidden; position: absolute; right: 72px; top: 12px; width: 20px; height: 20px;

  border: 0; cursor: pointer; text-indent: 100%; font-size: 0; white-space: nowrap;

  background: url("//img.echosting.cafe24.com/skin/mobile/layout/btn_delete.png") no-repeat 0 0; background-size: 20px 20px;

}

.xans-product-searchdata .searchbox .autoList { display:none; overflow:hidden; overflow-y:auto; z-index:200; position:fixed; top:172px; left:0; right:0; bottom:0; }

.xans-product-searchdata .searchbox .autoDrop { position:relative; z-index:201; }

.xans-product-searchdata .searchbox .autoDrop li a { display:block; padding:10px 14px; border-bottom:1px solid #d5d5d5; background:#f9f9f9; }

.xans-product-searchdata .searchbox .autoList .dimmed { display:block; position:absolute; top:0; z-index:200; }

.xans-product-searchdata .inner { position:relative; overflow:hidden; padding:7px 14px 6px; border-bottom:1px solid #ececec; background:#f1f1f1; }

.xans-product-searchdata .inner p { float:left; }

.xans-product-searchdata .inner p.button { float:right; padding:2px 0 0; }

.xans-product-searchdata .inner .button img { display:block; border:1px solid red; }

.xans-product-searchdata .inner .btnSearchdata { float:right; width:33px; height:29px; margin:0 0 0 4px; font-size:0; line-height:0; cursor:pointer; border:0; outline:0; background:url("//img.echosting.cafe24.com/skin/mobile/layout/btn_searchdata.gif") no-repeat 0 0; background-size:33px 29px; }

.xans-product-searchdata .inner .btnSearchdata.checked { background:url("//img.echosting.cafe24.com/skin/mobile/layout/btn_searchdata_on.gif") no-repeat 0 0; background-size:33px 29px; }

.xans-product-searchdata .viewType { float:right; width:129px; font-size:0; line-height:0; }

.xans-product-searchdata .viewType li { display:inline-block; width:31px; height:27px; border:1px solid #d5d5d5; border-right:0; background-color:#fff; background-size:50%; background-repeat:no-repeat; background-position:center; }

.xans-product-searchdata .viewType li:first-child { border-radius:4px 0 0 4px; -webkit-border-radius:4px 0 0 4px; }

.xans-product-searchdata .viewType li:last-child { border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; border-right:1px solid #d5d5d5; }

.xans-product-searchdata .viewType li.selected { background-color:#4a5164; border-color:#404757; }

.xans-product-searchdata .viewType li a { display:block; height:100%; }

.xans-product-searchdata .viewType li.list { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_list.png"); }

.xans-product-searchdata .viewType li.thumb { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_thumb.png"); }

.xans-product-searchdata .viewType li.gallery { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_gallery.png"); }

.xans-product-searchdata .viewType li.slide { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_slide.png"); }

.xans-product-searchdata .viewType li.selected.list { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_list_on.png"); }

.xans-product-searchdata .viewType li.selected.thumb { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_thumb_on.png"); }

.xans-product-searchdata .viewType li.selected.gallery { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_gallery_on.png"); }

.xans-product-searchdata .viewType li.selected.slide { background-image:url("//img.echosting.cafe24.com/skin/mobile/product/ico_slide_on.png"); }

.xans-product-searchdata .hashtagName { display:block; padding:6px 0 0; line-height:16px; color:#006aff; word-break:break-all; word-wrap:break-word; }

.xans-product-searchdata .keywordArea { overflow:hidden; overflow-x:auto; padding:11px 14px; border-bottom:1px solid #ececec; font-size:11px; white-space:nowrap; background:#fff; -webkit-overflow-scrolling:touch; }

.xans-product-searchdata .keywordArea .heading { display:inline-block; vertical-align:top; }

.xans-product-searchdata .keywordArea .list { display:inline-block; vertical-align:top; font-size:0; line-height:0; }

.xans-product-searchdata .keywordArea .list li { display:inline-block; margin:0 0 0 17px; }

.xans-product-searchdata .keywordArea .list li a { display:inline-block; word-break:break-all; word-wrap:break-word; color:#525252; font-size:11px; line-height:16px; }

 

 

/* 詳細検索レイヤーウィンドウ(ポップアップ型)) */

.xans-product-searchdata.typePopup .searchCondition { display:none; z-index:301; overflow-y:auto; width:100%; min-width:320px; position:fixed; top:0; left:0; right:0; bottom:0; background:#f1f1f1; -webkit-overflow-scrolling:touch; }

.xans-product-searchdata.typePopup .searchCondition h2 { height:36px; padding:0 38px 0 7px; font-size:15px; line-height:36px; color:#fff; background:#4a5164; }

.xans-product-searchdata.typePopup .searchCondition .btnClose { position:absolute; right:0; top:0; z-index:110; width:36px; height:36px; border:0; padding:0; font-size:0; text-indent:100%; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/mobile/layout/ico_close_white.png") center center no-repeat; background-size:14px 14px; }

.xans-product-searchdata.typePopup .searchCondition .wrap { padding:7px 7px 54px; border-top:1px solid #c2c2c2; font-size:13px; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea { position:relative; margin:0 0 7px; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea > .title { position:relative; overflow:hidden; padding:14px 87px 14px 34px; color:#fff; cursor:pointer; line-height:1.3em; background-color:#737782; -webkit-tap-highlight-color:rgba(255,255,255,0); }

.xans-product-searchdata.typePopup .searchCondition .toggleArea.checked > .title { background-color:#508bed; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea > .title:after { display:block; position:absolute; top:0; left:0; content:""; width:40px; height:100%; background:url("//img.echosting.cafe24.com/skin/mobile/layout/ico_arrow_white.png") no-repeat center; background-size:20px; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea.selected > .title:after { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg); }

.xans-product-searchdata.typePopup .searchCondition .toggleArea.disable > .title:after { background-image:none !important; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea > .title h3 { float:left; font-size:13px; text-transform:uppercase; word-break:break-all; word-wrap:break-word; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea > .contents { display:none; border:1px solid #d5d5d5; background:#fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea.selected > .contents,

.xans-product-searchdata.typePopup .searchCondition .toggleArea.disable > .contents { display:block; }

.xans-product-searchdata.typePopup .searchCondition .toggleArea .btnClear {

  position:absolute; top:9px; right:14px; display:inline-block; height:26px; line-height:24px; margin:0; padding:0 10px; border:1px solid #5e626a; cursor:pointer; outline:0; vertical-align:middle;  font-size:11px; font-weight:normal; color:#fff; background:#848891;

  -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;

}

.xans-product-searchdata.typePopup .searchCondition .toggleArea.checked .btnClear { border-color:#3770d0; background-color:#679ef9; }

/* チェックボックス */

  .xans-product-searchdata.typePopup .searchCondition .check .xans-product-filterform { padding:6px 13px; }

  .xans-product-searchdata.typePopup .searchCondition .check li { margin:4px 0 4px 22px; }

  .xans-product-searchdata.typePopup .searchCondition .check li label { display:inline-block; word-break:break-all; word-wrap:break-word; min-height:0; line-height:18px; }

  .xans-product-searchdata.typePopup .searchCondition .check li input { margin:0 0 0 -19px; max-width:none; }

  .xans-product-searchdata.typePopup .searchCondition .check .icoColor { display:inline-block; margin:-2px 4px 0 0; width:18px; height:18px; border:1px solid #e9e9e9; vertical-align:middle; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }

/* テキストボタン */

  .xans-product-searchdata.typePopup .searchCondition .button .xans-product-filterform { padding:13px; margin:-7px 0 0 -7px; font-size:0; line-height:0; }

  .xans-product-searchdata.typePopup .searchCondition .button li { display:inline-block; padding:7px 0 0 7px; min-width:33.33%; max-width:100%; vertical-align:top; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

  .xans-product-searchdata.typePopup .searchCondition .button li button { display:inline-block; width:100%; border:1px solid #d5d5d5; border-bottom-color:#b5b5b5; padding:8px 6px 7px; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; outline:0; cursor:pointer; font-size:13px; line-height:18px; color:#1b1b1b; word-break:break-all; word-wrap:break-word; background:#fff; }

  .xans-product-searchdata.typePopup .searchCondition .button li.selected button { border-color:#598fe8; color:#508bed; }

  /* テキストボタンプル型 */

    .xans-product-searchdata.typePopup .searchCondition .button.full .xans-product-filterform { padding:0; margin:0; }

    .xans-product-searchdata.typePopup .searchCondition .button.full li { width:100%; padding:0; border:1px solid #fff; border-bottom-color:#f1f1f1; }

    .xans-product-searchdata.typePopup .searchCondition .button.full li button { border:0; }

    .xans-product-searchdata.typePopup .searchCondition .button.full li.selected { position:relative; top:-1px; left:-1px; border-color:#598fe8; box-sizing:content-box; }

    .xans-product-searchdata.typePopup .searchCondition .button.full li.selected button { padding-top:9px; padding-bottom:6px; }

    .xans-product-searchdata.typePopup .searchCondition .button.full .txtRange { color:#757575; }

/* カラーチップ */

  .xans-product-searchdata.typePopup .searchCondition .colorChip .xans-product-filterform { padding:15px; margin:-15px 0 0; font-size:0; line-height:0; }

  .xans-product-searchdata.typePopup .searchCondition .colorChip li { position:relative; display:inline-block; width:20%; margin:15px 0 0; text-align:center; vertical-align:middle; }

  .xans-product-searchdata.typePopup .searchCondition .colorChip li .circle { display:inline-block; width:40px; height:40px; outline:0; cursor:pointer; border:1px solid #e9e9e9; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }

  .xans-product-searchdata.typePopup .searchCondition .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:28px; height:23px; margin:-11px 0 0 -14px; background:url("//img.echosting.cafe24.com/skin/mobile/product/ico_color_selected.png") no-repeat 0 0; background-size:28px auto; }

/* 金額入力 */

  .xans-product-searchdata.typePopup .searchCondition .priceInput { margin:6px 0; text-align:center; color:#757575; }

  .xans-product-searchdata.typePopup .searchCondition .priceInput > input[type="text"] { width:30%; margin:0 4px 0 0; }

/* 範囲指定 */

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .slider { position:relative; padding:3px 0 9px; margin:25px 18px 3px 18px; }

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .range { position:static; border:0; border-radius:0; border-top:1px solid #d9d9d8; border-bottom:1px solid #d9d9d8; height:12px; background:#e7e7e7; }

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .noUi-base { position:static; }

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .noUi-connect { position:absolute; top:-1px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; height:12px; box-shadow:none; bottom:initial; font-size:0; line-height:0; background:#508bed; }

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 10px; width:14px; height:23px; box-shadow:none; border-radius:0; font-size:0; line-height:0; outline:0; border:0; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/mobile/product/btn_price_handle.png") no-repeat 0 0; background-size:14px auto; }

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .noUi-handle:before, .xans-product-searchdata.typePopup .searchCondition .priceSlide .noUi-handle:after { display:none; }

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .value { overflow:hidden; margin:0 13px 25px; text-align:right; }

  .xans-product-searchdata.typePopup .searchCondition .priceSlide .value .minPrice { float:left; }

 

/* 詳細検索レイヤーウィンドウ(スライド型)*/

.xans-product-searchdata.typeSlide .searchCondition { display:none; }

.xans-product-searchdata.typeSlide .searchCondition .searchInner { z-index:302; overflow-y:auto; width:266px; position:fixed; top:0; right:-266px; bottom:0; background:#fff; -webkit-overflow-scrolling:touch; -webkit-transition: .3s ease-out; transition: .3s ease-out; }

.xans-product-searchdata.typeSlide.open .searchCondition .searchInner { right:0; }

.xans-product-searchdata.typeSlide .searchCondition:after { content:''; position:fixed; left:0; right:0; top:0; bottom:0; z-index:301; background:rgba(0,0,0,.7); }

.xans-product-searchdata.typeSlide .searchCondition h2 { height:42px; padding:0 41px 0 13px; border-bottom:1px solid #c2c2c2; font-size:15px; line-height:42px; color:#2e2e2e; background:#fff; }

.xans-product-searchdata.typeSlide .searchCondition .btnClose { position:absolute; right:0; top:0; z-index:110; width:40px; height:42px; border:0; font-size:0; text-indent:100%; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/mobile/layout/ico_close_grey.png") center center no-repeat; background-size:14px 14px; }

.xans-product-searchdata.typeSlide .searchCondition .wrap { padding:0 0 43px; font-size:13px; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea { position:relative; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea > .title { position:relative; overflow:hidden; padding:12px 87px 13px 34px; border-top:1px solid #fff; border-bottom:1px solid #ccc; color:#1b1b1b; cursor:pointer; line-height:1.3em; background-color:#f1f1f1; -webkit-tap-highlight-color:rgba(255,255,255,0); }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea.checked > .title { border-bottom:1px solid #ebebeb; color:#508bed; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea > .title:after { display:block; position:absolute; top:0; left:14px; content:""; width:13px; height:100%; background:url("//img.echosting.cafe24.com/skin/mobile/layout/ico_arrow_grey.png") no-repeat center; background-size:13px auto; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea.selected > .title:after { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg); }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea.checked > .title:after { color:#508bed; background:url("//img.echosting.cafe24.com/skin/mobile/layout/ico_arrow_blue.png") no-repeat center; background-size:13px auto; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea.disable > .title:after { background-image:none !important; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea > .title h3 { float:left; font-size:13px; text-transform:uppercase; word-break:break-all; word-wrap:break-word; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea > .contents { display:none; border-bottom:1px solid #ebebeb; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea.selected > .contents,

.xans-product-searchdata.typeSlide .searchCondition .toggleArea.disable > .contents { display:block; }

.xans-product-searchdata.typeSlide .searchCondition .toggleArea .btnClear { display:inline-block; position:absolute; top:9px; right:14px; height:26px; line-height:24px; margin:0; padding:0 9px; border:1px solid #d5d5d5; border-radius:3px; cursor:pointer; outline:0; vertical-align:middle; font-size:11px; font-weight:normal; color:#676767; background:#fff; box-sizing:border-box; }

 

/* チェックボックス */

.xans-product-searchdata.typeSlide .searchCondition .check .xans-product-filterform { padding:7px 14px 7px 0; }

.xans-product-searchdata.typeSlide .searchCondition .check .xans-product-filterform:after { content:''; display:block; clear:both; }

.xans-product-searchdata.typeSlide .searchCondition .check li { float:left; width:50%; margin:7px 0; padding-left:14px; box-sizing:border-box; }

.xans-product-searchdata.typeSlide .searchCondition .check li label { display:inline-block; position:relative; width:100%; padding-left:26px; word-break:break-all; word-wrap:break-word; min-height:0; line-height:18px; box-sizing:border-box; }

.xans-product-searchdata.typeSlide .searchCondition .check li input { position:absolute; left:0; top:0; width:20px; height:20px; border:0; border-radius:0; -webkit-appearance:none; vertical-align:top; background:url("//img.echosting.cafe24.com/skin/mobile/layout/bg_checkbox.png") no-repeat; background-size:20px; }

.xans-product-searchdata.typeSlide .searchCondition .check li input:checked { background-image:url("//img.echosting.cafe24.com/skin/mobile/layout/bg_checkbox_on.png"); }

.xans-product-searchdata.typeSlide .searchCondition .check .icoColor { display:inline-block; margin:-2px 4px 0 0; width:18px; height:18px; border:1px solid #e9e9e9; vertical-align:middle; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }

/* テキストボタン */

.xans-product-searchdata.typeSlide .searchCondition .button .xans-product-filterform { padding:7px 14px 14px 7px; font-size:0; line-height:0; }

.xans-product-searchdata.typeSlide .searchCondition .button li { display:inline-block; padding:7px 0 0 7px; min-width:33.33%; max-width:100%; vertical-align:top; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

.xans-product-searchdata.typeSlide .searchCondition .button li button { display:inline-block; width:100%; border:1px solid #d5d5d5; border-bottom-color:#b5b5b5; padding:7px 6px 6px; border-radius:3px; outline:0; cursor:pointer; font-size:11px; line-height:18px; color:#1b1b1b; word-break:break-all; word-wrap:break-word; background:#fff; }

.xans-product-searchdata.typeSlide .searchCondition .button li.selected button { border-color:#598fe8; color:#508bed; }

 /* テキストボタンプル型 */

.xans-product-searchdata.typeSlide .searchCondition .button.full .xans-product-filterform { padding:0; margin:0; }

.xans-product-searchdata.typeSlide .searchCondition .button.full li { width:100%; padding:0; border-bottom:1px solid #f1f1f1; }

.xans-product-searchdata.typeSlide .searchCondition .button.full li button { padding:9px 6px 8px; border:0; font-size:13px; color:#353535; }

.xans-product-searchdata.typeSlide .searchCondition .button.full li.selected button { font-weight:bold; color:#508bed; }

.xans-product-searchdata.typeSlide .searchCondition .button.full .txtRange { color:#757575; }

/* テキストボタンハッシュタグ */

.xans-product-searchdata.typeSlide .searchCondition .button.hashtag li { min-width:inherit; }

/* カラーチップ */

.xans-product-searchdata.typeSlide .searchCondition .colorChip .xans-product-filterform { margin:7px; font-size:0; line-height:0; }

.xans-product-searchdata.typeSlide .searchCondition .colorChip li { position:relative; display:inline-block; width:20%; margin:7px 0; text-align:center; vertical-align:middle; }

.xans-product-searchdata.typeSlide .searchCondition .colorChip li .circle { display:inline-block; width:35px; height:35px; outline:0; cursor:pointer; border:1px solid #e9e9e9; border-radius:35px; }

.xans-product-searchdata.typeSlide .searchCondition .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:24px; height:20px; margin:-10px 0 0 -12px; background:url("//img.echosting.cafe24.com/skin/mobile/product/ico_color_selected2.png") no-repeat 0 0; background-size:24px auto; }

.xans-product-searchdata.typeSlide .searchCondition .priceInput { height:29px; margin:7px 10px 6px; text-align:center; color:#757575; }

.xans-product-searchdata.typeSlide .searchCondition .priceInput > input[type="text"] { width:42%; margin:0 4px; border-radius:1px; text-align:right; }

/* 範囲指定 */

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .slider { position:relative; padding:3px 0 8px; margin:25px 18px 0 18px; }

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .range { position:static; border:0; border-radius:0; border-top:1px solid #d9d9d8; border-bottom:1px solid #d9d9d8; height:12px; background:#e7e7e7; }

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .noUi-base { position:static; }

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .noUi-connect { position:absolute; top:-1px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; height:12px; box-shadow:none; bottom:initial; font-size:0; line-height:0; background:#508bed; }

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 10px; width:14px; height:23px; box-shadow:none; border-radius:0; font-size:0; line-height:0; outline:0; border:0; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/mobile/product/btn_price_handle.png") no-repeat 0 0; background-size:14px auto; }

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .noUi-handle:before, .xans-product-searchdata.typeSlide .searchCondition .priceSlide .noUi-handle:after { display:none; }

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .value { overflow:hidden; margin:0 13px 24px; color:#353535; text-align:right; }

.xans-product-searchdata.typeSlide .searchCondition .priceSlide .value .minPrice { float:left; }

 

.xans-product-searchdata.typeSlide .searchCondition .ec-base-button { position:fixed; right:0; bottom:0; width:266px; margin:0; }

.xans-product-searchdata.typeSlide .searchCondition .ec-base-button button { height:43px; margin:0; padding:0; border-width:1px 0 0; font-size:13px; }

 

 

/* 詳細検索レイヤーウィンドウ */

.xans-product-searchdata .xans-product-searchconditiondata { display:none; overflow:hidden; overflow-x:auto; padding:0 0 0 7px; border-bottom:1px solid #e3e4d4; white-space:nowrap; background:#fcfbe7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-overflow-scrolling:touch; }

.xans-product-searchdata .xans-product-searchconditiondata .searchDataResult li { display:inline-block; height:24px; line-height:24px; padding:0 0 0 6px; margin:8px 4px 8px 0; border:1px solid #e1e0cc; vertical-align:top; font-size:11px; background:#fdfcf0; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; }

.xans-product-searchdata .xans-product-searchconditiondata .btnSearchDelete { display:inline-block; width:24px; height:24px; border:0; font-size:0; line-height:0; outline:0; cursor:pointer; vertical-align:top; background:url("//img.echosting.cafe24.com/skin/mobile/product/btn_search_delete.png") no-repeat center center; background-size:10px 10px; }

/* 検索リスト */

.ec-base-product .prdList[class*="grid"] { padding:14px 7px; }


/* ポップアップ型結果内検索 */
.xans-product-searchdata.typePopup .searchCondition .withinInput { padding:13px; font-size:0; line-height:0; }
.xans-product-searchdata.typePopup .searchCondition .withinInput .search { position:relative; }
.xans-product-searchdata.typePopup .searchCondition .withinInput .search .keyword { width:100%; padding-right:30px; border-radius:1px; }
.xans-product-searchdata.typePopup .searchCondition .withinInput .search .btnDelete { overflow:hidden; position:absolute; right:7px; top:5px; width:20px; height:20px; border:0; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:url(//img.echosting.cafe24.com/skin/mobile/layout/btn_delete.png) no-repeat 0 0; background-size: 20px 20px; }
.xans-product-searchdata.typePopup .searchCondition .withinInput .suggest ul { display:none; width:100%; margin-top:-1px; border:1px solid #ccc; box-sizing:border-box; background:#fff; }
.xans-product-searchdata.typePopup .searchCondition .withinInput .suggest li { overflow:hidden; height:30px; padding:0 8px; font-size:13px; color:#353535; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }
.xans-product-searchdata.typePopup .searchCondition .withinInput .suggest li:hover, .xans-product-searchdata.typePopup .searchCondition .withinInput .suggest li.selected { cursor:pointer; background:#f1f1f1; }

/* スライド型結果内検索 */
.xans-product-searchdata.typeSlide .searchCondition .withinInput { padding:14px; font-size:0; line-height:0; }
.xans-product-searchdata.typeSlide .searchCondition .withinInput .search { position:relative; }
.xans-product-searchdata.typeSlide .searchCondition .withinInput .keyword { width:100%; padding-right:30px; border-radius:1px; }
.xans-product-searchdata.typeSlide .searchCondition .withinInput .search .btnDelete { overflow:hidden; position:absolute; right:7px; top:5px; width:20px; height:20px; border:0; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:url(//img.echosting.cafe24.com/skin/mobile/layout/btn_delete.png) no-repeat 0 0; background-size: 20px 20px; }
.xans-product-searchdata.typeSlide .searchCondition .withinInput .suggest ul { display:none; width:100%; margin-top:-1px; border:1px solid #ccc; box-sizing:border-box; background:#fff; }
.xans-product-searchdata.typeSlide .searchCondition .withinInput .suggest li { overflow:hidden; height:30px; padding:0 8px; font-size:13px; color:#353535; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }

.xans-product-searchdata.typeSlide .searchCondition .withinInput .suggest li:hover, .xans-product-searchdata.typeSlide .searchCondition .withinInput .suggest li.selected { cursor:pointer; background:#f1f1f1; }


- 新規作成経路 : /css/module/product/hashtag.css


▼ 以下の内容でファイルを新規作成します。

 .xans-product-hashtag { display:table; table-layout:fixed; width:346px; margin:30px auto 0; }
.xans-product-hashtag .heading { display:table-cell; width:41px; vertical-align:top; }
.xans-product-hashtag .heading > strong { display:inline-block; padding:3px 5px; border:1px solid #cbcbcb; color:#525252; font-size:11px; font-weight:normal; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
.xans-product-hashtag .list { display:table-cell; width:auto; vertical-align:top; font-size:0; line-height:0; }
.xans-product-hashtag .list li { display:inline-block; margin:4px 10px 2px 0; }
.xans-product-hashtag .list li a { display:inline-block; word-break:break-all; word-wrap:break-word; text-decoration:underline; color:#525252; font-size:11px; line-height:14px; }


※ デザイン適用後に[商品管理 > 商品キュレション > 検索条件の設定]ペジで「保存」ボタンを必ずクリックしてください。

 デザインを適用しても属性値が表示されない可能性があります。




cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。

今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。

引き続き、ご愛顧のほどよろしくお願い申し上げます。

ご不便・ご不明な点等ございましたら、0120-150-264または「お問い合わせ」まで、お気軽にお問い合わせください。