Cafe24新着情報
[商品管理] [モバイル]商品キュレーションのデザインソース設定ガイド(英語/スライド) - HTML/CSS
2019-05-31
平素よりcafe24をご利用いただき、ありがとうございます。
商品検索アップグレードデザインの適用方法をご案内いたします。
詳細は以下の内容をご確認ください。
1. 商品カテゴリ画面編集
- 編集経路 : /product/list.html
- 編集経路 : /product/list_thumb.html
- 編集経路 : /product/list_gallery.html
▼ 以下のように青色のソースを追加します。
<div id="titleArea" module="product_headcategory">
|
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>Search Results(<span class="count">{$total_count}</span>)item(s)</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="http://img.echosting.cafe24.com/skin/mobile_en_US/layout/btn_back.gif" width="33" alt="Back"></a>
</span>
<div class="searchbox">
{$form.keyword}
<p class="button"><button type="submit" class="btnStrong">Search</button></p>
<button type="button" class="btnDelete">Remove</button>
</div>
<div class="inner">
{$form.order_by}
</div>
<p class="empty {$search_fail_display|display}">No items were found.</p>
</div>
<div module="product_searchdata">
<!--@css(/css/module/product/searchdata.css)-->
<div id="titleArea">
<h2>Search Results(<span class="count">{$total_count}</span>)item(s)</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_en_US/layout/btn_back.gif" width="33" alt="Back"></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}">Search</button></p>
<button type="button" class="btnDelete">Delete</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">Related Search Keywords</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}>Delete</button></li>
<li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>Delete</button></li>
</ul>
</div>
<div class="inner">
{$searchOrderby}
<button type="button" id="ec-product-searchdata-mobile-button" class="btnSearchdata {$search_detail_search_display|display}">Filter by</button>
</div>
<p class="empty {$search_fail_display|display}">No results were found.</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="typeSlide {$filter_class}"> <!--@css(/css/module/product/searchdata.css)--> <form class="searchCondition" id="{$searchdata_form}" name="" method="get"> <div class="searchInner"> <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">Filter by</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">Remove</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}>Unselect</button> </div> </div> <div class="ec-base-button gColumn"> <button type="button" class="btnEm ec-product-searchdata-reset">Unselect All</button> <button type="button" class="btnSubmit" id="{$searchdata_submit}">Search</button> </div> <button type="button" class="btnClose">Close</button> </div> </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 { overflow:hidden; overflow-x:auto; padding:14px 0 7px; white-space:nowrap; -webkit-overflow-scrolling:touch; } .xans-product-hashtag .heading { display:inline-block; width:47px; vertical-align:top; } .xans-product-hashtag .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-hashtag .list { display:inline-block; vertical-align:top; font-size:0; line-height:0; } .xans-product-hashtag .list li { display:inline-block; margin:3px 14px 4px 0; } .xans-product-hashtag .list li a { display:inline-block; word-break:break-all; word-wrap:break-word; color:#525252; font-size:11px; line-height:16px; } |
cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。 今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。 引き続き、ご愛顧のほどよろしくお願い申し上げます。 ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。 |