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 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)--> |
- 新規作成方法 : /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または「お問い合わせ」まで、お気軽にお問い合わせください。