Cafe24新着情報
[商品管理] [PC]商品キュレーションのデザインソース設定ガイド(右スライド) - HTML/CSS
2019-06-19
平素よりcafe24をご利用いただき、ありがとうございます。
商品検索アップグレードデザインの適用方法をご案内いたします。
詳細は以下の内容をご確認ください。
1. 商品カテゴリ画面の編集
- 編集経路 : /product/list.html
▼以下のように青色のソースを追加します。
| <!--@layout(/layout/basic/layout.html)--> <div module="product_searchdata" id="searchSidebar" class="searchData {$filter_class}"> <!--@css(/css/module/product/searchdata.css)--> <!-- $align = right --> <button type="button" id="ec-searchdata-button" class="btnSearch">詳細検索</button> <form class="searchCondition" id="{$searchdata_form}" name="" method="get"> <input type="hidden" name="keyword" id="{$searchdata_keyword_hidden}" /><div class="searchArea" id="ec-searchdata-area"> <h2 class="title">SEARCH</h2> <div module="product_SearchFilterList" class="selected"> <h3 class="title ec-searchdata-option-title">{$filter_name}</h3> <div class="content {$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}">{$within_input}<button type="button" class="btnResearch">検索</button>{$within_suggest}</div> <div class="priceInput {$price_input_display|display}">{$price_input} <span class="btnPriceSearch"><a href="#none" id="{$searchdata_submit}"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/product/btn_price_search.gif" alt="検索" /></a></span></div> <div class="slider {$price_slider_display|display}">{$price_slider}</div> <p class="value {$price_slider_display|display}">{$price_txt}</p> </div> </div> </div> </form> </div> <div module="Product_menupackage"> <!--@css(/css/module/product/menupackage.css)--> <!--@js(/js/module/product/menucategory.js)--> <div class="title" module="product_headcategory"> ...中略 </div> <div module="product_searchdata"> <!--@css(/css/module/product/searchdata.css)--> <div module="product_searchConditionData"> <button type="button" class="btnRefresh ec-product-searchdata-reset">一括削除</button> <ul class="list"> <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 module="product_categoryHashtag"> <div class="heading"><strong>タグ</strong></div> <ul class="list"> <li>{$searchdata_category_hashtag}</li> <li>{$searchdata_category_hashtag}</li> </ul> </div> </div> <ul class="menuCategory"> <li module="product_displaycategory" style="display:{$display};" class="{$selected}"> |
2. 商品検索画面
- 編集経路 : /product/search.html
▼以下のように赤色のソースを削除し、青色のソースを追加します。
| <div class="titleArea"> <h2>....</h2> </div> <div module="search_form"> <!--@css(/css/module/product/search_form.css)--> <div class="ec-base-box searchbox"> <fieldset> <legend>商品検索</legend> <div class="item"><strong>Category</strong> {$form.category_no}</div> <div class="item"> <strong>検索条件</strong> {$form.search_type} {$form.keyword} </div> <div class="popular" id="{$except_keyword_wrap_id}" style="display:none"> <strong>除外キーワード</strong> {$form.exceptkeyword} </div> <div class="popular" module="search_hotkeyword"> <strong>人気キーワード</strong> <p> <a href="{$hot_keyword_url}">{$hot_keyword_name}</a> <a href="{$hot_keyword_url}">{$hot_keyword_name}</a> </p> </div> <div class="item"><strong>販売価格</strong> {$form.product_price1} ~ {$form.product_price2}</div> <div class="item"><strong>並べ替え</strong> {$form.order_by}</div> <p class="button"><input type="image" src="//img.echosting.cafe24.com/skin/base_ja_JP/product/btn_search2.gif" alt="検索" /></p> </fieldset> </div> <div class="searchResult"> <p class="record">総<strong>{$total_count}</strong>件の商品が検索されました。</p> <ul class="listType" module="search_Orderby"> <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li> <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li> </ul> </div> <div class="noData {$search_fail_display|display}"> <strong class="warning">検索結果が見つかりません。</strong> <strong>検索キーワードが正確に入力されているかご確認のうえ、再度検索してみてください。</strong> <ul> <li>検索キーワード／除外キーワードが正確に入力されているか確認してみてください。</li> <li>検索オプションを再度確認してみてください。</li> </ul> </div> </div><!-- //参考 --> <div module="product_searchdata" id="searchSidebar" class="searchData {$filter_class}"> <!--@css(/css/module/product/searchdata.css)--> <!-- $align = right --> <button type="button" id="ec-searchdata-button" class="btnSearch">詳細検索</button> <form class="searchCondition" id="{$searchdata_form}" name="" method="get"> <input type="hidden" name="keyword" id="{$searchdata_keyword_hidden}" /><div class="searchArea" id="ec-searchdata-area"> <h2 class="title">SEARCH</h2> <div module="product_SearchFilterList" class="selected"> <h3 class="title ec-searchdata-option-title">{$filter_name}</h3> <div class="content {$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}">{$within_input}<button type="button" class="btnResearch">検索</button>{$within_suggest}</div> <div class="priceInput {$price_input_display|display}">{$price_input} <span class="btnPriceSearch"><a href="#none" id="{$searchdata_submit}"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/product/btn_price_search.gif" alt="検索" /></a></span></div> <div class="slider {$price_slider_display|display}">{$price_slider}</div> <p class="value {$price_slider_display|display}">{$price_txt}</p> </div> </div> </div> </form> </div> <div module="product_searchdata"> <!--@css(/css/module/product/searchdata.css)--> <form class="searchField" id="{$searchkeyword_form}" action="/product/search.html" method="get"> <fieldset> <legend>商品検索</legend> <div class="searchInput"> {$searchdata_keywordform}<input type="image" id="{$search_submit_button}" src="//img.echosting.cafe24.com/skin/base/product/btn_search.gif" alt="検索" class="btnSearch" /><ul class="autoDrop" id="{$search_auto_id}"></ul> </div> <button type="button" class="btnSearchOption">検索オプション</button> <!-- 検索オプションレイヤー --> <div id="ec-product-searchoption" class="searchOption ec-base-layer"> <!--@css(/layout/basic/css/ec-base-layer.css)--> <div class="header"> <h3>検索オプション</h3> </div> <div class="content"> <div class="boardWrite"> <table border="1" summary=""> <caption>検索オプション</caption> <colgroup> <col style="width:80px;" /> <col style="width:auto;" /> </colgroup> <tbody> <tr> <th scope="row">検索キーワード</th> <td> {$searchdata_detail_keywordform} <p class="desc">{$searchdata_detail_type_form}<label for="{$search_detail_type_id}">キーワードを一つ以上含むすべての商品を検索</label></p> </td> </tr> <tr> <th scope="row">除外キーワード</th> <td> {$searchdata_except_keywordform} <p class="desc">検索結果から除きたいキーワードを入力してください。</p> </td> </tr> </tbody> </table> </div> </div> <div class="ec-base-button"> <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/product/btn_search.gif" alt="検索" id="{$searchdata_layer_submit}" /></a> <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/product/btn_reset.gif" alt="初期化" id="{$searchdata_layer_reset}" /></a> </div> <a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="閉じる" /></a> </div><!-- //参考: 検索オプションレイヤー --> </fieldset> <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> <div module="product_HotKeyword" class="keywordArea"> <strong class="heading">人気キーワード</strong> <ul class="list"> <li><a href="{$hot_keyword_search_url}">{$hot_keyword_name}</a></li> <li><a href="{$hot_keyword_search_url}">{$hot_keyword_name}</a></li> </ul> </div> </form> <div module="product_searchConditionData"> <button type="button" class="btnRefresh ec-product-searchdata-reset">一括削除</button> <ul class="list"> <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="searchResult"> <p class="record">全<strong>{$total_count}</strong>件が検索されました。</p> <ul module="product_searchOrderby"> <li><a href="{$param}" {$style}>{$sort_name}</a></li> <li><a href="{$param}" {$style}>{$sort_name}</a></li> </ul> </div> <p class="noData {$search_fail_display|display}">一致する情報は見つかりません。</p> </div> <div module="Search_Result" class="ec-base-product"> |
3. 商品詳細画面の編集
- 編集方法 : /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 class="button" module="product_action">
4. CSSファイルの追加
- 新規作成経路 : /css/module/product/searchdata.css
▼以下の内容でファイルを新規作成します。
/* 検索&商品カテゴリ */ .xans-product-searchdata .searchField { padding:22px 0; margin:0 0 -1px; background:url("//img.echosting.cafe24.com/skin/base/product/bg_search_field.gif") repeat-x 0 100%; } .xans-product-searchdata .searchField fieldset { position:relative; display:table; margin:0 auto 10px; text-align:center; } .xans-product-searchdata .searchField fieldset .searchInput { position:relative; display:inline-block; width:262px; padding:0 36px 0 0; border:1px solid #565960; border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; } .xans-product-searchdata .searchField fieldset .autoDrop { display:none; z-index:2; position:absolute; top:100%; left:-1px; overflow:hidden; overflow-y:auto; max-height:100px; width:100%; border:1px solid #565960; text-align:left; background:#fff; } .xans-product-searchdata .searchField fieldset .autoDrop li a { display:block; padding:6px 10px; font-size:11px; color:#1c1c1c;} .xans-product-searchdata .searchField fieldset .autoDrop li a:hover, .xans-product-searchdata .searchField fieldset .autoDrop li.selected a { text-decoration:none; color:#fff; background:#a1a4ae; } .xans-product-searchdata .searchField fieldset .btnSearchOption { margin:0 0 0 7px; padding:3px 14px 3px 0; vertical-align:middle; color:#2e2e2e; font-size:12px; letter-spacing:-1px; outline:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow2.gif") no-repeat 100% 50%; } .xans-product-searchdata .searchField .keyword { border:0; padding:0 10px; width:100%; height:32px; line-height:32px; outline:0; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .xans-product-searchdata .searchField .btnSearch { position:absolute; top:0; right:0; outline:0; } .xans-product-searchdata .searchField .keywordArea { max-width:600px; margin:3px auto 0; text-align:center; } .xans-product-searchdata .searchField .keywordArea .heading { 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-searchdata .searchField .keywordArea .list { display:inline; } .xans-product-searchdata .searchField .keywordArea .list li { display:inline; margin:0 0 0 4px; } .xans-product-searchdata .searchField .keywordArea .list li a { display:inline-block; word-break:break-all; word-wrap:break-word; color:#525252; font-size:11px; }
.xans-product-searchdata .xans-product-searchconditiondata { position:relative; padding:2px 8px 9px 127px; border:1px solid #d7d5d5; font-size:0; line-height:0; } #searchContent.xans-product-searchdata .xans-product-searchconditiondata { border-top:0; } .xans-product-searchdata .xans-product-searchconditiondata .list { display:inline; } .xans-product-searchdata .xans-product-searchconditiondata .list li { display:inline-block; height:14px; line-height:14px; margin:7px 5px 0 0; padding:4px 3px 4px 8px; border:1px solid #dadada; border-radius:24px; vertical-align:top; font-size:11px; color:#508bed; word-break:break-all; word-wrap:break-word; background:#fff; } .xans-product-searchdata .xans-product-searchconditiondata .btnSearchDelete { width:22px; height:22px; margin:-4px 0; font-size:0; line-height:0; outline:0; vertical-align:top; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_delete2.gif") no-repeat center center; } .xans-product-searchdata .xans-product-searchconditiondata .icoColor { display:inline-block; overflow:hidden; width:14px; height:14px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; border-radius:16px; vertical-align:top; }
.xans-product-searchdata .xans-product-searchconditiondata .btnRefresh { position:absolute; left:19px; top:13px; padding:0 0 0 20px; text-align:left; outline:0; line-height:20px; color:#525252; background:url("//img.echosting.cafe24.com/skin/base/product/btn_refresh.gif") no-repeat 0 0; } .xans-product-searchdata .xans-product-searchconditiondata .btnRefresh:after { content:''; position:absolute; right:-17px; top:2px; width:1px; height:11px; background:#d3d1d2; }
.xans-product-searchdata .xans-product-categoryhashtag { display:table; table-layout:fixed; padding:10px; } .xans-product-searchdata .xans-product-categoryhashtag .heading { display:table-cell; width:41px; vertical-align:top; } .xans-product-searchdata .xans-product-categoryhashtag .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-searchdata .xans-product-categoryhashtag .list { display:table-cell; width:auto; vertical-align:top; font-size:0; line-height:0; } .xans-product-searchdata .xans-product-categoryhashtag .list li { display:inline-block; margin:4px 10px 2px 0; } .xans-product-searchdata .xans-product-categoryhashtag .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; } /* 検索*/ .xans-product-searchdata .searchResult { margin:30px 0 0; overflow:hidden; border:1px solid #d7d5d5; text-align:right; line-height:38px; } .xans-product-searchdata .searchResult .record { float:left; padding:0 0 0 8px; color:#008bcc; } .xans-product-searchdata .searchResult .xans-product-searchorderby { display:inline; margin:0 4px 0 0; } .xans-product-searchdata .searchResult .xans-product-searchorderby li { display:inline; padding:0 6px 0 10px; color:#2e2e2e; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/base/product/bg_result_type.gif") no-repeat 0 50%; } .xans-product-searchdata .searchResult .xans-product-searchorderby li:hover { color:#008bcc; text-decoration:none; } .xans-product-searchdata .searchResult .xans-product-searchorderby li:first-child { background:none; } .xans-product-searchdata .xans-product-searchconditiondata + .searchResult { margin-top:53px; } .xans-product-searchdata .noData { padding:50px 0; text-align:center; line-height:1.8em; } .xans-product-searchdata .noData > strong { display:block; color:#000; } .xans-product-searchdata .noData > strong.warning { display:block; color:#008bcc; } .xans-product-searchdata .noData ul { margin:10px 0 0; } /* 検索オプションレイヤーウィンドウ */ .searchOption { display:none; top:40px; width:460px; left:50%; margin: 0 0 0 -231px; text-align:left; } .searchOption.ec-base-layer .content { padding:15px; } .searchOption .boardWrite { position:relative; margin:10px 0 0; color:#353535; line-height:1.4; } .searchOption .boardWrite:first-child { margin-top:0; } .searchOption .boardWrite tbody th { padding:9px 0 8px 10px; text-align:left; word-break:break-all; word-wrap:break-word; } .searchOption .boardWrite td { padding:5px 10px 4px; vertical-align:middle; word-wrap:break-word; word-break:break-all; } .searchOption .boardWrite input[type=text] { width:309px; } .searchOption .desc { margin:7px 0 0; color:#919399; font-size:11px; }
/* 詳細検索サイドバー(#searchSidebar), PC 固定型(#searchSticky) */ #searchSidebar.searchData { z-index:1001; position:fixed; top:0; left:-231px; width:230px; bottom:0; border-right:1px solid #c6cbd6; color:#2e2e2e; background:#f3f3f3; } #searchSticky.searchData { z-index:100; width:180px; margin:-15px 0 0; background:#fff; } #searchSticky.sticky { position:fixed; top:0; } #searchSidebar.searchData.opened { left:0; } #searchSidebar .btnSearch { position:absolute; top:195px; right:-28px; padding:0 7px 0 9px; width:27px; outline:0; color:#e5e5e5; font-size:12px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar.png") no-repeat 0 0; } #searchSidebar.gRight { left:inherit; right:-231px; border-right-width:0; border-left:1px solid #c6cbd6; } #searchSidebar.gRight.opened { left:inherit; right:0; } #searchSidebar.gRight .btnSearch { left:-28px; right:inherit; } #searchSidebar .btnSearch:before { position:absolute; top:-44px; left:0; display:block; content:""; width:27px; height:44px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before.png") no-repeat 0 0; } #searchSidebar .btnSearch:after { position:absolute; top:100%; left:0; display:block; content:""; width:27px; height:29px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after.png") no-repeat 0 0; } #searchSidebar.gRight .btnSearch { right:auto; left:-28px; background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_right.png"); } #searchSidebar.gRight .btnSearch:before { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before_right.png"); } #searchSidebar.gRight .btnSearch:after { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after_right.png"); } #searchSidebar.searchData .searchCondition { overflow:hidden; } #searchSidebar.searchData .searchArea { overflow-y:scroll; position:relative; width:217px; padding:20px 15px; } #searchSidebar.searchData .searchArea { position:relative; padding:20px 15px; } #searchSticky.searchData .searchArea { position:relative; } #searchSidebar.searchData .searchArea > .title { border-bottom:1px solid #565960; padding:0 0 17px; text-align:center; font-size:18px; color:#131313; } #searchSticky.searchData .searchArea > .title { border-bottom:1px solid #565960; padding:4px 0 10px 2px; font-size:14px; color:#0e0e0e; } .searchData .xans-product-searchfilterlist { border-bottom:1px solid #d5d5d5; } .searchData .xans-product-searchfilterlist .title { position:relative; padding:10px 19px 10px 5px; text-transform:uppercase; font-size:12px; cursor:pointer; } #searchSticky.searchData .xans-product-searchfilterlist .title { position:relative; padding:10px 19px 10px 5px; text-transform:uppercase; font-size:12px; color:#444; cursor:pointer; } .searchData .xans-product-searchfilterlist .title:after { display:block; content:""; position:absolute; top:50%; right:6px; width:7px; height:5px; margin:-3px 0 0; background:url("//img.echosting.cafe24.com/skin/base/product/bg_search_toggle_title.gif") no-repeat 0 0; } .searchData .xans-product-searchfilterlist .content { display:none; margin:0 0 13px; } .searchData .xans-product-searchfilterlist.selected .content { display:block; } /* チェックボックス */ #searchSidebar.searchData .xans-product-searchfilterlist .check .xans-product-filterform { overflow:hidden; overflow-y:auto; max-height:100px; border:1px solid #dfdfdf; background:#fff; } #searchSticky.searchData .xans-product-searchfilterlist .check .xans-product-filterform { overflow:hidden; overflow-y:auto; max-height:90px; } #searchSidebar.searchData .xans-product-searchfilterlist .check li { margin:0 10px 7px 27px; line-height:14px; color:#525252; word-break:break-all; word-wrap:break-word; } #searchSticky.searchData .xans-product-searchfilterlist .check li { margin:0 10px 9px 27px; line-height:14px; color:#525252; word-break:break-all; word-wrap:break-word; } #searchSidebar.searchData .xans-product-searchfilterlist .check li:first-child { padding-top:10px; } #searchSticky.searchData .xans-product-searchfilterlist .check li:first-child { padding-top:7px; } .searchData .xans-product-searchfilterlist .check li.disabled { color:#d7d7d8; } .searchData .xans-product-searchfilterlist .check li label { cursor:pointer; vertical-align:top; } .searchData .xans-product-searchfilterlist .check li.disabled label { cursor:default; } .searchData .xans-product-searchfilterlist .check li input { margin:0 0 0 -17px; vertical-align:top; } .searchData .xans-product-searchfilterlist .check .icoColor { display:inline-block; margin:0 4px 0 0; width:12px; height:12px; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_color_circle.png"); background-repeat:no-repeat; background-position:0 0; } /* テキストボタン */ .searchData .xans-product-searchfilterlist .button .xans-product-filterform { margin:-6px 0 0 -5px; font-size:0; line-height:0; } .searchData .xans-product-searchfilterlist .button li { display:inline-block; padding:6px 0 0 5px; min-width:50%; max-width:100%; vertical-align:top; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .searchData .xans-product-searchfilterlist .button li button { display:inline-block; width:100%; border:1px solid #ccc; padding:6px; outline:0; font-size:12px; line-height:16px; color:#525252; word-break:break-all; word-wrap:break-word; background:#fff; } .searchData .xans-product-searchfilterlist .button li:hover button { border-color:#508bed; color:#508bed; } .searchData .xans-product-searchfilterlist .button li.disabled button { border-color:#d7d7d8; color:#d7d7d8; cursor:default; } .searchData .xans-product-searchfilterlist .button li.selected button { border:2px solid #508bed; padding:5px; color:#508bed; } /* テキストボタンプル型 */ .searchData .xans-product-searchfilterlist .button.full .xans-product-filterform { margin:0; border-top:1px solid #ccc; } .searchData .xans-product-searchfilterlist .button.full li { width:100%; padding:0; } .searchData .xans-product-searchfilterlist .button.full li button { border-top:0; } .searchData .xans-product-searchfilterlist .button.full li:hover button { margin-top:-1px; border-top:1px solid #508bed; } .searchData .xans-product-searchfilterlist .button.full li.disabled button { position:relative; margin-top:-1px; border-top:1px solid #d7d7d8; } .searchData .xans-product-searchfilterlist .button.full li.selected button { position:relative; margin:-1px 0 0; padding:5px; border:2px solid #508bed; }
/* テキストボタンハッシュタグ */ .searchData .xans-product-searchfilterlist .button.hashtag li { min-width:inherit; }
/* カラーチップ */ #searchSidebar.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform { padding:3px 5px; margin:-8px 0 0; font-size:0; line-height:0; } #searchSticky.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform { padding:6px 5px 0; margin:-8px 0 0; font-size:0; line-height:0; } .searchData .xans-product-searchfilterlist .colorChip li { position:relative; display:inline-block; width:20%; margin:8px 0 0; text-align:center; vertical-align:middle; } #searchSidebar.searchData .xans-product-searchfilterlist .colorChip li .circle { display:inline-block; width:25px; height:25px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle.png"); background-repeat:no-repeat; background-position:0 0; } #searchSticky.searchData .xans-product-searchfilterlist .colorChip li .circle { display:inline-block; width:29px; height:29px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle_29.png"); background-repeat:no-repeat; background-position:0 0; } #searchSidebar.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:18px; height:15px; margin:-7px 0 0 -9px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0; } #searchSticky.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:18px; height:15px; margin:-8px 0 0 -9px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0; } .searchData .xans-product-searchfilterlist .colorChip li.disabled .circle { opacity:0.1; filter:alpha(opacity=10); cursor:default; } .searchData .xans-product-searchfilterlist .colorChip li.disabled:after { position:absolute; top:50%; left:50%; display:block; content:""; width:14px; height:14px; margin:-8px 0 0 -6px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_disable.png") no-repeat 0 0; } #searchSticky.searchData .xans-product-searchfilterlist .colorChip li.disabled:after { margin:-7px 0 0 -7px; }
/* 価格金額入力 */ .searchData .xans-product-searchfilterlist .button .priceInput { margin:9px 0 0; } .searchData .xans-product-searchfilterlist .button .priceInput > input[type="text"] { width:47px; padding:5px 4px; margin:0 4px 0 0; } #searchSticky.searchData .xans-product-searchfilterlist .button .priceInput { position:relative; height:30px; padding-right:32px; } #searchSticky.searchData .xans-product-searchfilterlist .button .btnPriceSearch { position:absolute; right:0; top:0; }
/* 価格範囲指定 */ .searchData .xans-product-searchfilterlist .priceSlide .slider { position:relative; padding:0 0 5px; margin:7px 5px 5px 8px; } .searchData .xans-product-searchfilterlist .priceSlide .range { position:static; margin:0 0 0 0; border-radius:9px; border:1px solid #d9d9d8; height:9px; background:#e7e7e7; } .searchData .xans-product-searchfilterlist .priceSlide .noUi-base { position:static; } .searchData .xans-product-searchfilterlist .priceSlide .noUi-connect { position:absolute; top:-1px; height:9px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; font-size:0; line-height:0; background:#508bed; } .searchData .xans-product-searchfilterlist .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 12px; width:12px; height:21px; border:0; border-radius:0; box-shadow:none; cursor:pointer; font-size:0; line-height:0; outline:0; background:url("//img.echosting.cafe24.com/skin/base/product/btn_price_handle.png") no-repeat 0 0; } .searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:before, .searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:after { display:none; } .searchData .xans-product-searchfilterlist .priceSlide .value { overflow:hidden; margin:0 0 0 3px; text-align:right; font-size:11px; } .searchData .xans-product-searchfilterlist .priceSlide .value .minPrice { float:left; }
/* 詳細検索上段型 */ #searchContent { position:relative; margin:-2px 0 0; } #searchContent .searchArea { position:relative; border:1px solid #9fa4ac; } #searchContent th { padding:13px 18px; border-top:1px solid #dfdfdf; border-right:1px solid #d7d5d5; font-size:12px; color:#2e2e2e; text-align:left; text-transform:uppercase; cursor:pointer; vertical-align:top; background:#f2f2f2; } #searchContent tr td { padding:2px 6px; border-top:1px solid #eee; } #searchContent tr:first-child th, #searchContent tr:first-child td { border-top:0; } #searchContent tr .extend { position:absolute; right:0; top:6px; bottom:6px; border-left:1px solid #eee; } #searchContent tr .btnExtend { width:10px; height:10px; margin:-2px -6px 0 0; padding:15px 18px 14px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:#fff url("//img.echosting.cafe24.com/skin/base/product/btn_search_extend.png") no-repeat 50%; } #searchContent tr.selected .btnExtend { background:#fff url("//img.echosting.cafe24.com/skin/base/product/btn_search_fold.png") no-repeat 50%; } #searchContent tr .cell { position:relative; overflow:hidden; height:37px; } #searchContent tr .priceSlide .cell { height:45px; } #searchContent tr.selected .cell { height:auto; } #searchContent tr .content { width:700px; } #searchContent tr .colorChip .content { width:594px; margin:0 0 0 9px; } #searchContent tr .colorChip .check { height:25px; } #searchContent .btnAllExtend { overflow:hidden; position:absolute; right:-1px; bottom:-17px; z-index:1; width:53px; height:17px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:transparent url("//img.echosting.cafe24.com/skin/base/product/btn_all_extend.png") no-repeat 0 0; } #searchContent .btnAllExtend.open { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_all_extend_open.png"); }
/* チェックボックス */ #searchContent tr .check li { display:inline-block; margin:7px 5px; word-break:break-all; word-wrap:break-word; vertical-align:top; } #searchContent tr .check li label { display:inline-block; height:23px; padding:0 7px; line-height:24px; color:#525252; cursor:pointer; vertical-align:top; } #searchContent tr .check li.disabled label { color:#d7d7d8; cursor:default; }
/* カラーチップ */ #searchContent tr .colorChip .xans-product-filterform { font-size:0; line-height:0; } #searchContent tr .colorChip li { position:relative; display:inline-block; margin:7px 5px; text-align:center; vertical-align:middle; } #searchContent tr .colorChip li .circle { display:inline-block; width:23px; height:23px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle_23.png"); background-repeat:no-repeat; background-position:0 0; } #searchContent tr .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:13px; height:10px; margin:-5px 0 0 -6px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected2.png") no-repeat 0 0; } #searchContent tr .colorChip li.disabled .circle { opacity:0.1; filter:alpha(opacity=10); cursor:default; } #searchContent tr .colorChip li.disabled:after { position:absolute; top:50%; left:50%; display:block; content:""; width:14px; height:14px; margin:-7px 0 0 -7px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_disable.png") no-repeat 0 0; } #searchContent tr .check .icoColor { display:inline-block; margin:6px 4px 0 0; width:12px; height:12px; vertical-align:top; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_color_circle.png"); background-repeat:no-repeat; background-position:0 0; }
/* テキストボタン */ #searchContent tr .button li { display:inline-block; margin:7px 5px; word-break:break-all; word-wrap:break-word; vertical-align:top; } #searchContent tr .button li button { display:inline-block; height:23px; padding:0 7px; line-height:24px; color:#525252; cursor:pointer; vertical-align:top; background:transparent; } #searchContent tr .button li.selected button { border-radius:23px; color:#fff; background:#508bed; } #searchContent tr .button li.disabled button { color:#d7d7d8; cursor:default; outline:0; }
/* 価格 */ #searchContent tr .button.full .xans-product-filterform { font-size:0; line-height:0; } #searchContent tr .button.full li { display:inline-block; margin:7px 5px; } #searchContent tr .button.full li button { display:inline-block; padding:0 7px; outline:0; font-size:12px; line-height:23px; color:#525252; word-break:break-all; word-wrap:break-word; letter-spacing:-0.06em; background:transparent; } #searchContent tr .button.full li:hover button { border-color:#508bed; color:#508bed; } #searchContent tr .button.full li.disabled button { border-color:#d7d7d8; color:#d7d7d8; cursor:default; } #searchContent tr .button.full li.selected button { color:#508bed; } #searchContent .button.full .content { width:450px; } #searchContent tr.selected .button.full .content { width:806px; } #searchContent tr.selected .button .priceInput { display:inline-block; position:static; }
#searchContent tr .button .priceInput { position:absolute; right:83px; top:0; margin:7px 0 7px 12px; line-height:22px; } #searchContent tr .button .priceInput > input[type="text"] { width:63px; padding:2px 5px; margin:0 4px 0 0; border-color:#d9d9d9; border-radius:2px; } #searchContent tr .button .btnPriceSearch img { display:none; } #searchContent tr .button .btnPriceSearch #ec-product-searchdata-submit { display:inline-block; width:48px; height:22px; margin:0 0 0 4px; border:1px solid #b4b4b4; border-radius:2px; line-height:24px; color:#2e2e2e; text-align:center; vertical-align:top; } #searchContent tr .button .btnPriceSearch a:hover { text-decoration:none; }
/* 価格範囲指定 */ #searchContent tr .priceSlide .slider { position:relative; width:500px; padding:0 0 5px; margin:7px 5px 5px 15px; } #searchContent tr .priceSlide .range { position:static; margin:0 0 0 0; border:0; border-radius:9px; border:1px solid #d9d9d8; height:9px; background:#e7e7e7; } #searchContent tr .priceSlide .noUi-base { position:static; } #searchContent tr .priceSlide .noUi-connect { position:absolute; top:-1px; height:9px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; font-size:0; line-height:0; background:#508bed; } #searchContent tr .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 12px; width:12px; height:21px; border:0; border-radius:0; box-shadow:none; cursor:pointer; font-size:0; line-height:0; outline:0; background:url("//img.echosting.cafe24.com/skin/base/product/btn_price_handle.png") no-repeat 0 0; } #searchContent tr .priceSlide .noUi-handle:before, #searchContent tr .priceSlide .noUi-handle:after { display:none; } #searchContent tr .priceSlide .value { overflow:hidden; width:512px; margin:0 0 0 9px; text-align:right; font-size:11px; } #searchContent tr .priceSlide .value .minPrice { float:left; } /* 結果内検索 */ .searchData .searchForm { position:relative; height:34px; } .searchData .keyword { width:100%; height:34px; padding:0 44px 0 8px; box-sizing:border-box; border-radius:2px; border:1px solid #d8d8d8; } .searchData .btnResearch { overflow:hidden; position:absolute; right:1px; top:1px; width:34px; height:32px; border-left:1px solid #d8d8d8; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:url('//img.echosting.cafe24.com/skin/base/product/btn_research.gif') no-repeat 0 0; } .searchData .suggest ul { display:none; position:absolute; top:33px; z-index:10; width:100%; border:1px solid #d8d8d8; box-sizing:border-box; background:#fff; } .searchData .suggest li { overflow:hidden; height:28px; padding:0 8px; color:#525252; line-height:30px; text-overflow:ellipsis; white-space:nowrap; } .searchData .suggest li:hover, .searchData .suggest li.selected { cursor:pointer; background:#f1f1f1; } /* 詳細検索上段型 */ #searchContent tr .search { padding:9px 6px 9px 9px; } #searchContent tr .search .cell { overflow:inherit; height:24px; } #searchContent .searchForm { position:relative; } #searchContent .keyword { display:inline-block; width:257px; height:24px; padding:0 8px ; box-sizing:border-box; border-radius:2px; border:1px solid #d9d9d9; vertical-align:top; } #searchContent .btnResearch { display:inline-block; height:24px; padding:0 12px; border:1px solid #b4b4b4; border-radius:2px; line-height:24px; color:#2e2e2e; vertical-align:top; background:#fff; } #searchContent .suggest ul { display:none; position:absolute; top:23px; z-index:10; width:257px; border:1px solid #d9d9d9; box-sizing:border-box; background:#fff; } #searchContent .suggest li { overflow:hidden; height:28px; padding:0 8px; color:#525252; line-height:30px; text-overflow:ellipsis; white-space:nowrap; } #searchContent .suggest li:hover, #searchContent .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または「お問い合わせ」まで、お気軽にお問い合わせください。