[商品管理] [モバイル] 商品キュレーションモバイルモジュール作成(日本語) - HTML/CSS

<div module="product_hashtag" class="{$hashtag_display|display}">

<div class="heading"><strong>タグ</strong></div>
<ul class="list">
<li>{$hashtag}</li>
<li>{$hashtag}</li>
</ul>
</div>

② 新規作成位置: /product/shoppQ/searchData_typePopup.html

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

<div module="product_searchdata" class="typePopup {$filter_class}">

<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>

③ 新規作成位置: /product/shoppQ/searchData_typeSlide.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">詳細検索</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="ec-base-button gColumn"> <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> </div> </form> Meiryo;"></div>

④ 新規作成位置位: /product/shoppQ/searchForm.html

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

<div module="product_searchdata">

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

⑤ 新規作成位置: /product/shoppQ/searchConditionData.html

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

<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>

2. 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-family:"맑은 고딕",Malgun Gothic,"돋움",Dotum; 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; }
.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-family:"맑은 고딕",Malgun Gothic,"돋움",Dotum; 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; }

3. CSSファイル修正

① 修正位置:/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; }

② 修正位置: /css/module/layout/searchHeader.css

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

.xans-layout-searchheader { display:none; position:absolute; top:0; left:0; right:0; z-index:200; background-color:#fff; border:1px solid #cccccc; border-radius:1px; }
.xans-layout-searchheader .searchForm { position:relative; margin:7px 61px 7px 14px; padding:0 34px 0 33px; border:1px solid #ccc; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_search.png") no-repeat 7px 5px; background-size:20px 20px; }
.xans-layout-searchheader .btnDelete { position:absolute; right:7px; top:5px; width:20px; height:20px; border:0; cursor:pointer; overflow:hidden; text-indent:100%; font-size:0; white-space:nowrap; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_delete.png") no-repeat 0 0; background-size:20px 20px; }
.xans-layout-searchheader #keyword { width:100%; height:29px; padding:0; border:0; }
.xans-layout-searchheader .btnClose {
position:absolute; right:14px; top:7px; width:40px; height:31px; margin:0; padding:0;
border:1px solid #d5d5d5; border-radius:4px; outline-style:none; cursor:pointer;
background:#f0f0f0; font-size:13px; text-align:center;
}

.xans-layout-searchheader .xans-search-hotkeyword { background:#f8f8f8; }
.xans-layout-searchheader .xans-search-hotkeyword ul { overflow-y:auto; max-height:278px; padding:7px 14px 7px 0; border-bottom:1px solid #d5d5d5; text-align:left; font-size:0; }
.xans-layout-searchheader .xans-search-hotkeyword li { position:relative; display:inline-block; vertical-align:top; }
.xans-layout-searchheader .xans-search-hotkeyword li a { display:inline-block; padding:7px 15px 7px 14px; color:#1b1b1b; font-size:13px; }
.xans-layout-searchheader .xans-search-hotkeyword li a:before { display:block; content:""; position:absolute; top:7px; right:0; width:1px; height:13px; background:#757575; }
.xans-layout-searchheader .xans-search-hotkeyword li:last-child a:before { display:none; }

.xans-layout-searchheader .xans-search-recentkeyword { background:#f8f8f8; }
.xans-layout-searchheader .xans-search-recentkeyword p { padding:12px 14px 11px; border-bottom:1px solid #d5d5d5; color:#787878; font-size:13px; text-align:left; }
.xans-layout-searchheader .xans-search-recentkeyword ul { overflow-y:auto; max-height:252px; text-align:left; }
.xans-layout-searchheader .xans-search-recentkeyword li { position:relative; padding:0 39px 0 0; border-bottom:1px solid #d5d5d5; }
.xans-layout-searchheader .xans-search-recentkeyword li a { display:block; padding:12px 0 11px 14px; color:#1b1b1b; font-size:13px; min-height:13px; }
.xans-layout-searchheader .xans-search-recentkeyword li .btnDelete { position:absolute; right:14px; top:10px; overflow:hidden; width:20px; height:20px; padding:0; border:0; text-indent:100%; white-space:nowrap; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_delete.png") no-repeat 0 0; background-size:20px 20px; }
.xans-layout-searchheader .xans-search-recentkeyword .button { padding:8px 0; text-align:center; border-bottom:1px solid #d5d5d5; background:#f1f1f1; }
.xans-layout-searchheader .xans-search-recentkeyword .button .btnDeleteAll {
display:inline-block; height:29px; line-height:29px; margin:0; padding:0 18px; border:1px solid #d5d5d5;
font-size:13px; cursor:pointer; vertical-align:middle; color:#000;
background-color:#fff;
border-radius:3px; -moz-box-sizing:border-box; box-sizing:border-box;
}

.searchBox.xans-layout-searchheader { display:none; position:absolute; top:0; left:0; right:0; z-index:200; background-color:#fff; border:1px solid #cccccc; border-radius:1px; }
.searchBox.xans-layout-searchheader .searchForm { position:relative; margin:7px 61px 7px 14px; padding:0 34px 0 33px; border:1px solid #ccc; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_search.png") no-repeat 7px 5px; background-size:20px 20px; }
.searchBox.xans-layout-searchheader .btnDelete { position:absolute; right:7px; top:5px; width:20px; height:20px; border:0; cursor:pointer; overflow:hidden; text-indent:100%; font-size:0; white-space:nowrap; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_delete.png") no-repeat 0 0; background-size:20px 20px; }
.searchBox.xans-layout-searchheader #keyword { width:100%; height:29px; padding:0; border:0; }
.searchBox.xans-layout-searchheader .btnClose {
position:absolute; right:14px; top:7px; width:40px; height:31px; margin:0; padding:0;
border:1px solid #d5d5d5; border-radius:4px; outline-style:none; cursor:pointer;
background:#f0f0f0; font-size:13px; text-align:center;
}

.searchBox.xans-layout-searchheader .xans-search-hotkeyword { background:#f8f8f8; }
.searchBox.xans-layout-searchheader .xans-search-hotkeyword ul { overflow-y:auto; max-height:278px; padding:7px 14px 7px 0; border-bottom:1px solid #d5d5d5; text-align:left; font-size:0; }
.searchBox.xans-layout-searchheader .xans-search-hotkeyword li { position:relative; display:inline-block; vertical-align:top; }
.searchBox.xans-layout-searchheader .xans-search-hotkeyword li a { display:inline-block; padding:7px 15px 7px 14px; color:#1b1b1b; font-size:13px; }
.searchBox.xans-layout-searchheader .xans-search-hotkeyword li a:before { display:block; content:""; position:absolute; top:7px; right:0; width:1px; height:13px; background:#757575; }
.searchBox.xans-layout-searchheader .xans-search-hotkeyword li:last-child a:before { display:none; }

.searchBox.xans-layout-searchheader .xans-search-recentkeyword { background:#f8f8f8; }
.searchBox.xans-layout-searchheader .xans-search-recentkeyword p { padding:12px 14px 11px; border-bottom:1px solid #d5d5d5; color:#787878; font-size:13px; text-align:left; }
.searchBox.xans-layout-searchheader .xans-search-recentkeyword ul { overflow-y:auto; max-height:252px; text-align:left; }
.searchBox.xans-layout-searchheader .xans-search-recentkeyword li { position:relative; padding:0 39px 0 0; border-bottom:1px solid #d5d5d5; }
.searchBox.xans-layout-searchheader .xans-search-recentkeyword li a { display:block; padding:12px 0 11px 14px; color:#1b1b1b; font-size:13px; min-height:13px; }
.searchBox.xans-layout-searchheader .xans-search-recentkeyword li .btnDelete { position:absolute; right:14px; top:10px; overflow:hidden; width:20px; height:20px; padding:0; border:0; text-indent:100%; white-space:nowrap; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_delete.png") no-repeat 0 0; background-size:20px 20px; }
.searchBox.xans-layout-searchheader .xans-search-recentkeyword .button { padding:8px 0; text-align:center; border-bottom:1px solid #d5d5d5; background:#f1f1f1; }
.searchBox.xans-layout-searchheader .xans-search-recentkeyword .button .btnDeleteAll {
display:inline-block; height:29px; line-height:29px; margin:0; padding:0 18px; border:1px solid #d5d5d5;
font-size:13px; cursor:pointer; vertical-align:middle; color:#000;
background-color:#fff;
border-radius:3px; -moz-box-sizing:border-box; box-sizing:border-box;
}

.xans-layout-searchheader .searchForm .autoDrop { display:none; position:absolute; left:0; z-index:201; width:100%; border:1px solid #d5d5d5; background-color:#fff; }
.xans-layout-searchheader .searchForm .autoDrop li a { display:block; width:auto; padding:10px 33px; border-bottom:1px solid #d5d5d5; text-align:left; }
.xans-layout-searchheader .searchForm .autoDrop li:last-of-type a { border-bottom:none; }

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

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

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

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

[商品管理] [商品キュレーション] メインページに商品キュレーションを適用できるように機能改善

2020-04-15

[注文管理] 非会員が注文確認する際の注文番号入力方法改善のご案内

2020-05-13