Cafe24新着情報

お知らせ更新情報

[商品管理] [PC]商品キュレーションのデザインソース設定ガイド(韓国語/固定) - HTML/CSS

2019-05-31

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


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

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


☞ 「HTML 編集方法へ移動する - 日本語」

☞ 「HTML 編集方法へ移動する - 英語」

☞ 「HTML 編集方法へ移動する - 韓国語」

☞ 「HTML 編集方法へ移動する - 中国語(簡体字)」

☞ 「HTML 編集方法へ移動する - 中国語(繫体字)」



■ 適用方法 - PCショップ


1. レイアウト - 詳細検索サイドバー追加


・新規作成経路 : /layout/basic/layout_sticky.html


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="//www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

    <!--PGクロスブラウジング必須内容開始-->

    <meta http-equiv="Cache-Control" content="no-cache" />

    <meta http-equiv="Expires" content="0" />

    <meta http-equiv="Pragma" content="no-cache" />

    <!--PGクロスブラウジング必須内容終了-->

 

    <title>기본 레이아웃</title>

    <!--@css(/layout/basic/css/common.css)--><!--該当のCSSは、ショップ全体に影響を与えます。削除や変更に注意してください。-->

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

    <!--@css(/layout/basic/css/ec-base-ui.css)-->

    <!--@css(/layout/basic/css/ec-base-tooltip.css)-->

    <!--@css(/layout/basic/css/ec-base-help.css)-->

    <!--@css(/layout/basic/css/ec-base-product.css)-->

    <!--@css(/layout/basic/css/ec-base-paginate.css)-->

    <!--@css(/layout/basic/css/ec-base-tab.css)-->

    <!--@css(/layout/basic/css/ec-base-button.css)-->

    <!--@css(/layout/basic/css/ec-base-box.css)-->

    <!--@css(/layout/basic/css/ec-base-table.css)-->

    <!--@css(/layout/basic/css/ec-base-desc.css)-->

 

    <!-- スマートデザインには、JQuery 1.4.4バージョンが内蔵されています。追加で読み込むと衝突が起きる場合があります。-->

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

    <!--@js(/js/common.js)-->

    <!--@js(/js/module/layout/quick_view.js)-->

    <script type="text/javascript" src="/ec-js/common.js"></script><!-- 該当のJSは、フラッシュを使用するためのスクリプトです。. -->

</head>

<body>

<div id="skipNavigation">

    <p><a href="#category">전체상품목록 바로가기</a></p>

    <p><a href="#contents">본문 바로가기</a></p>

</div>

 

<div id="header">

<div class="inner">

    <div class="topArea">

        <h1 module="Layout_LogoTop">

            <!--@css(/css/module/layout/logotop.css)-->

            <a href="/index.html">{$mall_name}</a>

        </h1>

        <div module="Layout_SearchHeader">

            <!--@css(/css/module/layout/searchHeader.css)-->

            <!--

                $product_page=/product/detail.html

                $category_page=/product/list.html

            -->

            <fieldset>

                <legend>検索</legend>

                {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /></fieldset>

        </div>

    </div>

 

    <div module="Layout_multishopList" class="list">

        <!--@css(/css/module/layout/multishopList.css)-->

        <button type="button" class="toggle"><span><img src="//img.cafe24.com/img/common/global/{$current_language_code}_18x12.png" alt="" /> {$current_language}</span></button>

        <ul module="Layout_multishopListitem">

            <li class="{$selected_class}">

                <a href="//{$shop_domain}/">

                    <img src="//img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                    <span class="name">{$locale_language}</span>

                    <span class="unit">{$currency_code}</span>

                </a>

            </li>

            <li class="{$selected_class}">

                <a href="//{$shop_domain}/">

                    <img src="//img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                    <span class="name">{$locale_language}</span>

                    <span class="unit">{$currency_code}</span>

                </a>

            </li>

        </ul>

    </div>

 

    <div module="Layout_multishopList" class="thumb">

        <!--@css(/css/module/layout/multishopList.css)-->

        <ul module="Layout_multishopListitem">

            <li>

                <a href="//{$shop_domain}/">

                    <img src="//img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                </a>

            </li>

            <li>

                <a href="//{$shop_domain}/">

                    <img src="//img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                </a>

            </li>

        </ul>

        <div module="Layout_multishopListmultioption" class="multiOption">

            <a href="#none">

                <span module="Layout_multishopListmultioptionCountry" class="ship">

                    <strong>Ship to</strong><span> : </span>

                </span>

                <span module="Layout_multishopListmultioptionLanguage" class="language">

                    <strong>Language</strong><span> : <img src="//img.cafe24.com/img/common/global/{$language_code}_32x24.png" alt="" />{$language_name}</span>

                </span>

            </a>

        </div>

    </div>

 

    <div module="Layout_statelogoff">

        <!--@css(/css/module/layout/statelogoff.css)-->

        <a href="/member/login.html" class="log">로그인</a>

        <a href="/member/join.html">회원가입</a>

        <a href="/order/basket.html">장바구니 <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>

        <a href="/myshop/order/list.html">주문조회</a>

        <a href="/myshop/index.html">마이쇼핑</a>

        <a href="/board/index.html">게시판</a>

    </div>

 

    <div module="Layout_stateLogon">

        <!--@css(/css/module/layout/statelogon.css)-->

        <span class="myinfo"><strong>{$name}</strong>님 환영합니다. <a href="/member/modify.html">회원정보수정</a></span>

        <a href="{$action_logout}" class="log">로그아웃</a>

        <a href="/order/basket.html">장바구니 <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>

       <a href="/myshop/order/list.html">주문조회</a>

        <a href="/myshop/index.html">마이쇼핑</a>

        <a href="/board/index.html">게시판</a>

    </div>

 

    <ul class="special">

        <li><a href="/product/list.html?cate_no=24">신상품</a></li>

        <li><a href="/product/list.html?cate_no=25">프리미엄</a></li>

        <li><a href="/product/list.html?cate_no=26">스페셜상품</a></li>

    </ul>

 

    <ul module="Layout_shoppingInfo">

        <!--@css(/css/module/layout/shoppingInfo.css)-->

        <li class="{$use_mileage|display}"><a href="/myshop/mileage/historyList.html">{$mileage_name} <strong>{$mileage}</strong></a></li>

        <li class="{$use_basket_cnt|display}"><a href="/order/basket.html">장바구니 <strong>{$basket_cnt}<span class="{$use_basket_price|display}">({$basket_price})</span></strong></a></li>

        <li class="{$use_interest_prd|display}"><a href="/myshop/wish_list.html">관심상품 <strong>{$interest_prd_cnt}</strong></a></li>

        <li class="{$use_like_product_cnt|display}">{$like_prd_tag}</li>

        <li class="{$use_coupon_cnt|display}"><a href="/myshop/coupon/coupon.html">쿠폰 <strong>{$coupon_cnt}</strong></a></li>

        <li class="{$use_deposit|display}"><a href="/myshop/deposits/historyList.html">{$deposit_name} <strong>{$deposit}</strong></a></li>

    </ul>

 

    <div class="link">

        <a module="Layout_bookmark" href="/link/bookmark.html" target="_blank" onclick="winPop(this.href); return false;"><span>즐겨찾기</span></a>

        <a module="Layout_shortcut" href="/link/shortcut.html" target="_blank" onclick="winPop(this.href); return false;">바로가기</a>

    </div>

</div>

</div><hr class="layout" />

 

<div id="wrap">

    <div id="container">

        <div id="contents">

            <!--@contents-->

        </div><hr class="layout" />

 

        <div id="sidebar">

            <div id="category" module="Layout_category">

                <!--@css(/css/module/layout/category.css)-->

                <!--@js(/js/module/layout/category.js)-->

                <div class="position">

                    <ul>

                        <li><a href="{$link_product_list}">{$name_or_img_tag}</a></li>

                        <li><a href="{$link_product_list}">{$name_or_img_tag}</a></li>

                        <li><a href="{$link_product_list}">{$name_or_img_tag}</a></li>

                   </ul>

                </div>

            </div>

 

                                <div module="product_searchdata" id="searchSticky" class="searchData {$filter_class}"><!-- 参考: 固定型 searchSticky 追加 -->

                                          <!--@css(/css/module/product/searchdata.css)-->

                                          <form class="searchCondition" id="{$searchdata_form}" name="" method="get">

                                                     <input type="hidden" name="keyword" id="{$searchdata_keyword_hidden}" />

                                                     <div class="searchArea" id="ec-searchdata-area">

                                                                <h2 class="title">SEARCH</h2>

                                                                <div module="product_SearchFilterList" class="selected">

                                                                          <h3 class="title ec-searchdata-option-title">{$filter_name}</h3>

                                                                          <div class="content {$filter_type}">

                                                                                     <ul module="product_filterform">

                                                                                               <li class="{$filter_class}">{$filter_value}</li>

                                                                                               <li class="{$filter_class}">{$filter_value}</li>

                                                                                     </ul>

                                <div class="withinInput {$within_input_display|display}">{$within_input}<button type="button" class="btnResearch">検索</button>{$within_suggest}</div>

                                                                                     <div class="priceInput {$price_input_display|display}">{$price_input} <span class="btnPriceSearch"><a href="#none" id="{$searchdata_submit}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_price_search.gif" alt=検索" /></a></span></div>

                                                                                     <div class="slider {$price_slider_display|display}">{$price_slider}</div>

                                                                                     <p class="value {$price_slider_display|display}">{$price_txt}</p>

                                                                          </div>

                                                                </div>

                                                     </div>

                                          </form>

                                </div>

 

            <div module="Layout_BoardInfo">

                <!--@css(/css/module/layout/boardInfo.css)-->

                <h2>전체게시판</h2>

                <ul>

                    <li><a href="{$link_board_list}">{$board_img_name}</a> {$board_adult_icon}</li>

                    <li><a href="{$link_board_list}">{$board_img_name}</a> {$board_adult_icon}</li>

                </ul>

                <!-- 参考: テキストメニューを使用したい場合

                <ul>

                    <li><a href="{$link_board_list}">{$board_name}</a></li>

                    <li><a href="{$link_board_list}">{$board_name}</a></li>

                </ul>

                // 参考 -->

            </div>

 

            <div module="Layout_SearchSide">

                <!--@css(/css/module/layout/searchSide.css)-->

                <!--

                    $search_page = /product/search.html

                    $product_page = /product/detail.html

                -->

                <h2>상품검색</h2>

                <fieldset>

                    <legend>검색</legend>

                    {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="검색" onclick="{$action_search_submit}" /></fieldset>

                <div class="bestKeyword {$hot_keyword_display|display}">

                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>

                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>

                </div>

                <p class="button"><a href="/product/search.html">상품상세검색</a></p>

            </div>

 

            <div module="Layout_project">

                <!--@css(/css/module/layout/project.css)-->

                <!--@js(/js/rotate.js)-->

                <!--@js(/js/module/layout/project.js)-->

                <h2>쇼핑기획전</h2>

                <ul>

                    <li><a href="{$link_product_project}"><img src="{$category_image}" alt="" /></a></li>

                    <li><a href="{$link_product_project}"><img src="{$category_image}" alt="" /></a></li>

                </ul>

                <div class="control">

                   <button type="button" class="prev" id="prevButton-project"><span>이전</span></button>

                    <button type="button" class="stop" id="stopButton-project"><span>멈춤</span></button>

                    <button type="button" class="play" id="playButton-project"><span>재생</span></button>

                    <button type="button" class="next" id="nextButton-project"><span>다음</span></button>

                </div>

            </div>

 

            <div module="Layout_login">

                <!--@css(/css/module/layout/login.css)-->

                <h2>회원로그인</h2>

                <fieldset>

                    <legend>회원로그인</legend>

                    <p class="check">

                        <span><label for="member_id" class="ePlaceholder" title="아이디">{$form.member_id}</label></span>

                        <span><label for="member_passwd" class="ePlaceholder" title="비밀번호">{$form.member_passwd}</label></span>

                    </p>

                   <p class="security">

                        {$form.check_save_id}

                        {$form.check_secret_connect}

                    </p>

                    <p class="button">

                        <input type="image" src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/btn_login.gif" alt="로그인" onclick="{$action_func_login}" />

                    </p>

                </fieldset>

                <ul>

                    <li><a href="/member/id/find_id.html">아이디찾기</a></li>

                   <li><a href="/member/passwd/find_passwd_info.html">비밀번호찾기</a></li>

                    <li><a href="/member/join.html">회원가입</a></li>

                </ul>

            </div>

 

            <div module="Layout_Info">

                <!--@css(/css/module/layout/info.css)-->

                <h2>고객센터</h2>

                <ul>

                    <li class="tel"><strong>Telephone</strong><span>{$phone}</span></li>

                    <li><strong>Fax</strong><span>{$fax}</span></li>

                    <li><strong>Time</strong><span>{$runtime}</span></li>

                </ul>

            </div>

 

            <div module="Layout_Myshop">

                <!--@css(/css/module/layout/myshop.css)-->

                <h2>마이쇼핑</h2>

                <ul>

                    <li class="order"><a href="/myshop/order/list.html"><strong>주문내역조회</strong></a></li>

                    <li class="mileage"><a href="/myshop/mileage/historyList.html">적립금</a></li>

                    <li class="member"><a href="/member/modify.html">회원정보</a></li>

                    <li class="consult {$consult_display|display}"><a href="/board/consult/list.html">1:1 맞춤상담</a></li>

                    <li class="wish"><a href="/myshop/wish_list.html">관심상품</a></li>

                </ul>

            </div>

 

            <div module="Layout_Poll">

                <!--@css(/css/module/layout/poll.css)-->

                <h2>온라인 설문조사</h2>

                <h3 title="질문">{$poll_title}</h3>

                <fieldset>

                   <legend>설문조사 항목</legend>

                    <ul>

                        <li>{$poll} {$poll_name}</li>

                        <li>{$poll} {$poll_name}</li>

                        <li>{$poll} {$poll_name}</li>

                        <li>{$poll} {$poll_name}</li>

                    </ul>

                    <p class="button">

                        <a href="#none" onclick="{$action_poll_result}">결과보기</a>

                        <a href="#none" onclick="{$action_poll_submit}">투표하기</a>

                    </p>

                </fieldset>

            </div>

 

            <div class="banner">

                <p module="Layout_giftBanner"><a href="/order/gift_list.html"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/bn_gift.gif" alt="고객사은품 안내" /></a></p>

                <p module="Layout_opdiaryBanner"><a href="/board/opdiary/list.html"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/bn_diary.gif" alt="운영일지" /></a></p>

                <p module="Layout_sosBanner"><a href="/board/urgency/urgency.html" ><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/bn_sos.gif" alt="긴급 문의" /></a></p>

                <p module="Layout_attendBanner">

                    <!--

                        $stamp_type_url = /attend/stamp.html

                        $comment_type_url = /attend/comment.html

                    -->

                    <a href="{$attend_url}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/bn_attend.gif" alt="출석체크" /></a>

                </p>

                <p module="Layout_couponzoneBanner"><a href="/coupon/coupon_zone.html"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/bn_coupon.gif" alt="알뜰살뜰 쿠폰존" /></a></p>

                <p module="Layout_calendarBanner"><a href="{$calendar_view_page}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/bn_calendar.gif" alt="캘린더 게시판" /></a></p>

            </div>

        </div>

    </div><hr class="layout" />

 

    <div id="banner">

        <p><a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/img_banner1.jpg" alt="" /></a></p>

    </div>

 

    <div id="quick">

        <div module="Layout_orderBasketcount">

            <!--@css(/css/module/layout/orderBasketcount.css)-->

            <strong>장바구니</strong> <span><a href="/order/basket.html">{$basket_count}</a>개</span>

        </div>

 

        <div module="Layout_productRecent">

            <!--@css(/css/module/layout/productRecent.css)-->

            <h2><a href="/product/recent_view_product.html">최근 본 상품</a></h2>

            <ul>

                <li class="{$disp_recent|display}">

                    <a href="/product/detail.html{$param}"><img src="{$recent_img}" alt="" /><span>{$name}</span></a>

                </li>

                <li class="{$disp_recent|display}">

                    <a href="/product/detail.html{$param}"><img src="{$recent_img}" alt="" /><span>{$name}</span></a>

                </li>

            </ul>

            <p class="player"><img src="//img.echosting.cafe24.com/skin/base/layout/btn_recent_prev.gif" alt="이전 제품" class="prev" /><img src="//img.echosting.cafe24.com/skin/base/layout/btn_recent_next.gif" alt="다음 제품" class="next" /></p>

        </div>

 

        <p class="pageTop"><a href="#header" title="화면 최상단으로 이동하기"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/btn_top1.gif" alt="맨위로" /></a></p>

 

        <p class="banner"><a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/img_banner2.jpg" alt="" /></a></p>

    </div>

</div><hr class="layout" />

 

<div id="footer">

    <div class="inner">

        <span module="Layout_LogoBottom">

            <!--@css(/css/module/layout/logobottom.css)-->

            <a href="/index.html">{$mall_name}</a>

        </span>

 

        <div module="Layout_footer">

            <!--@css(/css/module/layout/footer.css)-->

            <ul class="utilMenu">

                <li class="home"><a href="/index.html">홈</a></li>

                <li><a href="/shopinfo/company.html">회사소개</a></li>

                <li><a href="/member/agreement.html">이용약관</a></li>

                <li><a href="/member/privacy.html"><strong>개인정보처리방침</strong></a></li>

                <li><a href="/shopinfo/guide.html">이용안내</a></li>

            </ul>

            <p class="address">

                <span>법인명(상호) : {$company_name} </span> <span>대표자(성명) : {$president_name}</span> <span>사업자 등록번호 안내 : [{$company_regno}]</span> <span>통신판매업 신고 {$network_regno}</span> <span>{$biz_no_link}</span> <br />

                <span>전화 : {$phone}</span> <span>팩스 : {$fax}</span> <span>주소 : {$mall_zipcode} {$mall_addr1} {$mall_addr2}</span><br />

                <span>개인정보보호책임자 : <a href="mailto:{$cpo_email}">{$cpo_name}({$cpo_email})</a></span><br />

                <span>Contact <strong><a href="mailto:{$email}">{$email}</a></strong> for more information.</span>

            </p>

            <p class="copyright">Copyright © 2011 <strong>{$mall_name}</strong>. All rights reserved.</p>

            <p class="pageTop"><a href="#header" title="화면 최상단으로 이동하기"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/btn_top2.gif" alt="맨위로" /></a></p>

            <p class="hosting"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/logo_cafe24.png" alt="hosting by cafe24 카페24(주)" /></p>

        </div>

    </div>

</div>

 

<!-- 参考: 決済のための必須エリア -->

<div id="progressPaybar" style="display:none;">

    <div id="progressPaybarBackground" class="layerProgress"></div>

    <div id="progressPaybarView">

        <div class="box">

            <p class="graph">

                <span><img src="//img.echosting.cafe24.com/skin/base_ko_KR/layout/txt_progress.gif" alt="현재 결제가 진행중입니다." /></span>

                <span><img src="//img.echosting.cafe24.com/skin/base/layout/img_loading.gif" alt="" /></span>

            </p>

            <p class="txt">

                본 결제 창은 결제완료 후 자동으로 닫히며,결제 진행 중에 본 결제 창을 닫으시면<br />

                주문이 되지 않으니 결제 완료 될 때 까지 닫지 마시기 바랍니다.

            </p>

        </div>

    </div>

</div>

<!-- //参考 -->

 

<div module="Layout_multishopShipping">

    <!--@css(/layout/basic/css/ec-base-layer.css)-->

    <!--@css(/css/module/layout/multishopShipping.css)-->

    <!--@js(/js/module/layout/multishopShipping.js)-->

    <div class="dimmed"></div>

    <div class="worldshipLayer ec-base-layer">

        <div class="header">

            <h3>WORLD SHIPPING</h3>

        </div>

        <div class="content">

            <p class="desc">PLEASE SELECT THE DESTINATION COUNTRY AND LANGUAGE :</p>

            <div class="select">

                <select module="Layout_multishopShippingCountrylist">

                    <option value="{$country_code}"{$country_default_selected}>SHIPPING TO : {$country_name}</option>

                    <option value="{$country_code}"{$country_default_selected}>SHIPPING TO : {$country_name}</option>

                </select>

            </div>

            <div class="select">

                <select module="Layout_multishopShippingLanguagelist">

                    <option value="{$shop_domain}"{$shop_default_selected}>LANGUAGE : {$shop_language_name}</option>

                    <option value="{$shop_domain}"{$shop_default_selected}>LANGUAGE : {$shop_language_name}</option>

                </select>

            </div>

        </div>

        <div class="ec-base-button">

            <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/link/btn_go.gif" alt="GO" /></a>

        </div>

        <a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" width="13" height="13" alt="close" /></a>

    </div>

</div>

   

<div module="Layout_conversionPc">

    <!--@css(/css/module/layout/conversionpc.css)-->

    <a href="{$mobile_url}">모바일 화면보기</a>

</div>

</body>

</html>


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


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


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

<!--@layout(/layout/basic/layout.html)-->
<!--@layout(/layout/basic/layout_sticky.html)-->
<div module="Product_menupackage">
<!--@css(/css/module/product/menupackage.css)-->
<!--@js(/js/module/product/menucategory.js)-->
     <div class="title" module="product_headcategory">
        ...中略
    </div>
 
<div module="product_searchdata">
        <!--@css(/css/module/product/searchdata.css)-->
        <div module="product_searchConditionData">
<button type="button" class="btnRefresh ec-product-searchdata-reset">전체해제</button>
 <ul class="list">
<li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>삭제</button></li>
<li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>삭제</button></li>
</ul>
</div>
        <div module="product_categoryHashtag">
            <div class="heading"><strong>태그</strong></div>
            <ul class="list">
                <li>{$searchdata_category_hashtag}</li>
                <li>{$searchdata_category_hashtag}</li>
            </ul>
        </div>
    </div>
 
    <ul class="menuCategory">
        <li module="product_displaycategory" style="display:{$display};" class="{$selected}">


제목[商品管理] [PC] 商品属性検索デザイン適用(固定型) - HTML/CSS글번호117
카테고리更新情報공개설정비공개
게시일2019-05-31 ~공지등록 기간-
공지등록 설정등록안함국문 공지사항 링크http://service-api.echosting.cafe24.com/Shopboard/index.php?url=BoardView&bbs_no=12&no=342202version=1.9&class=local


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


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


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



■ 適用方法 - PCショップ


1. レイアウト - 詳細検索サイドバー追加


・新規作成経路 : /layout/basic/layout_sticky.html


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

    <!--PGクロスブラウジング必須内容開始-->

    <meta http-equiv="Cache-Control" content="no-cache"/>

    <meta http-equiv="Expires" content="0"/>

    <meta http-equiv="Pragma" content="no-cache"/>

    <!--PGクロスブラウジング必須内容終了-->

 

    <title>基本レイアウト</title>

    <!--@css(/layout/basic/css/common.css)--><!--該当のCSSは、ショップ全体に影響を与えます。削除や変更に注意してください。-->

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

 

    <!-- スマートデザインには、JQuery 1.4.4バージョンが内蔵されています。追加で読み込むと衝突が起きる場合があります。-->

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

    <!--@js(/js/common.js)-->

    <!--@js(/js/module/layout/quick_view.js)-->

    <script type="text/javascript" src="/ec-js/common.js"></script><!-- 該当のJSは、フラッシュを使用するためのスクリプトです。 -->

</head>

<body>

<div id="skipNavigation">

    <p><a href="#category">全商品一覧を見る</a></p>

    <p><a href="#contents">内容を見る</a></p>

</div>

 

<div id="header">

<div class="inner">

    <div class="topArea">

        <h1 module="Layout_LogoTop">

            <!--@css(/css/module/layout/logotop.css)-->

            <a href="/index.html"><img src="{$logo}" alt="{$mall_name}" /></a>

        </h1>

        <div module="Layout_SearchHeader">

            <!--@css(/css/module/layout/searchHeader.css)-->

            <!--

                $product_page=/product/detail.html

                $category_page=/product/list.html

            -->

            <fieldset>

                <legend>検索</legend>

                {$form.keyword}<input type="image" src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /></fieldset>

        </div>

    </div>

 

    <div module="Layout_multishopList" class="list">

        <!--@css(/css/module/layout/multishopList.css)-->

        <button type="button" class="toggle"><span><img src="http://img.cafe24.com/img/common/global/{$current_language_code}_18x12.png" alt="" /> {$current_language}</span></button>

        <ul module="Layout_multishopListitem">

            <li class="{$selected_class}">

                <a href="http://{$shop_domain}/">

                    <img src="http://img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                    <span class="name">{$locale_language}</span>

                    <span class="unit">{$currency_code}</span>

                </a>

            </li>

            <li class="{$selected_class}">

                <a href="http://{$shop_domain}/">

                    <img src="http://img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                    <span class="name">{$locale_language}</span>

                    <span class="unit">{$currency_code}</span>

                </a>

            </li>

        </ul>

    </div>

    <div module="Layout_multishopList" class="thumb">

        <!--@css(/css/module/layout/multishopList.css)-->

        <ul module="Layout_multishopListitem">

            <li>

                <a href="http://{$shop_domain}/">

                    <img src="http://img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                </a>

            </li>

            <li>

                <a href="http://{$shop_domain}/">

                    <img src="http://img.cafe24.com/img/common/global/{$language}_32x24.png" alt="" />

                </a>

            </li>

        </ul>

        <div module="Layout_multishopListmultioption" class="multiOption">

            <a href="#none">

                <span module="Layout_multishopListmultioptionCountry" class="ship">

                    <strong>Ship to</strong><span> : </span>

                </span>

                <span module="Layout_multishopListmultioptionLanguage" class="language">

                    <strong>Language</strong><span> : <img src="//img.cafe24.com/img/common/global/{$language_code}_32x24.png" alt=""/>{$language_name}</span>

                </span>

            </a>

        </div>

    </div>

 

    <div module="Layout_statelogoff">

        <!--@css(/css/module/layout/statelogoff.css)-->

        <a href="/member/login.html" class="log">ログイン</a>

        <a href="/member/join.html">会員登録</a>

        <a href="/order/basket.html">ショッピングカート <span class="count {$basket_count_display|display}"><span>{$basket_count}</span></span></a>

        <a href="/myshop/order/list.html">注文履歴</a>

        <a href="/myshop/index.html">マイページ</a>

        <a href="/board/index.html">掲示板</a>

    </div>

 

    <div module="Layout_stateLogon">

        <!--@css(/css/module/layout/statelogon.css)-->

        <span class="myinfo">ようこそ <strong>{$name}</strong> 様 <a href="/member/modify.html">会員情報修正</a></span>

        <a href="{$action_logout}" class="log">ログアウト</a>

        <a href="/order/basket.html">ショッピングカート <span class="count {$basket_count_display|display}"><span>{$basket_count}</span></span></a>

        <a href="/myshop/order/list.html">注文履歴</a>

        <a href="/myshop/index.html">マイページ</a>

        <a href="/board/index.html">掲示板</a>

    </div>

 

    <ul class="special">

        <li><a href="/product/list.html?cate_no=24">新商品</a></li>

    </ul>

 

    <ul module="Layout_shoppingInfo">

        <!--@css(/css/module/layout/shoppingInfo.css)-->

        <li class="{$use_mileage|display}"><a href="/myshop/mileage/historyList.html">ポイント <strong>{$mileage}</strong></a></li>

        <li class="{$use_basket_cnt|display}"><a href="/order/basket.html">カート <strong>{$basket_cnt}<span class="{$use_basket_price|display}">({$basket_price})</span></strong></a></li>

        <li class="{$use_interest_prd|display}"><a href="/myshop/wish_list.html">お気に入り <strong>{$interest_prd_cnt}</strong></a></li>

        <li class="{$use_coupon_cnt|display}"><a href="/myshop/coupon/coupon.html">クーポン <strong>{$coupon_cnt}</strong></a></li>

        <li class="{$use_deposit|display}"><a href="/myshop/deposits/historyList.html">預かり金 <strong>{$deposit}</strong></a></li>

    </ul>

 

    <div class="fee">

        <p>(価格)円以上のお買い上げで送料無料！</p>

    </div>

 

    <div class="link">

        <a module="Layout_bookmark" href="/link/bookmark.html" target="_blank" onclick="winPop(this.href); return false;"><span>お気に入り</span></a>

        <a module="Layout_shortcut" href="/link/shortcut.html" target="_blank" onclick="winPop(this.href); return false;">ショートカット</a>

    </div>

</div>

</div><hr class="layout" />

 

<div id="wrap">

    <div id="container">

        <div id="contents">

            <!--@contents-->

        </div><hr class="layout" />

 

        <div id="sidebar">

            <div id="category" module="Layout_category">

                <!--@css(/css/module/layout/category.css)-->

                <!--@js(/js/module/layout/category.js)-->

                <div class="position">

                    <ul>

                        <li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

                        <li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

                        <li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

                    </ul>

                </div>

            </div>

 

                                <div module="product_searchdata" id="searchSticky" class="searchData {$filter_class}"><!-- 参考: 固定型 searchSticky 追加 -->

                                          <!--@css(/css/module/product/searchdata.css)-->

                                          <form class="searchCondition" id="{$searchdata_form}" name="" method="get">

                                                     <input type="hidden" name="keyword" id="{$searchdata_keyword_hidden}" />

                                                     <div class="searchArea" id="ec-searchdata-area">

                                                                <h2 class="title">SEARCH</h2>

                                                                <div module="product_SearchFilterList" class="selected">

                                                                          <h3 class="title ec-searchdata-option-title">{$filter_name}</h3>

                                                                          <div class="content {$filter_type}">

                                                                                     <ul module="product_filterform">

                                                                                               <li class="{$filter_class}">{$filter_value}</li>

                                                                                               <li class="{$filter_class}">{$filter_value}</li>

                                                                                     </ul>

                                <div class="withinInput {$within_input_display|display}">{$within_input}<button type="button" class="btnResearch">検索</button>{$within_suggest}</div>

                                                                                     <div class="priceInput {$price_input_display|display}">{$price_input} <span class="btnPriceSearch"><a href="#none" id="{$searchdata_submit}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_price_search.gif" alt="検索" /></a></span></div>

                                                                                     <div class="slider {$price_slider_display|display}">{$price_slider}</div>

                                                                                     <p class="value {$price_slider_display|display}">{$price_txt}</p>

                                                                          </div>

                                                                </div>

                                                     </div>

                                          </form>

                                </div>

 

            <div module="Layout_BoardInfo">

                <!--@css(/css/module/layout/boardInfo.css)-->

                <h2>全掲示板</h2>

                <ul>

                    <li><a href="{$board_list_url}">{$board_img_name}</a> {$board_adult_icon}</li>

                    <li><a href="{$board_list_url}">{$board_img_name}</a> {$board_adult_icon}</li>

                </ul>

                <!-- 参考: テキストメニューを使用したい場合

                <ul>

                    <li><a href="{$board_list_url}">{$board_name}</a></li>

                    <li><a href="{$board_list_url}">{$board_name}</a></li>

                </ul>

                // 参考 -->

            </div>

 

            <div module="Layout_SearchSide">

                <!--@css(/css/module/layout/searchSide.css)-->

                <!--

                    $search_page = /product/search.html

                    $product_page = /product/detail.html

                -->

                <h2>商品検索</h2>

                <fieldset>

                    <legend>検索</legend>

                   {$form.keyword}<input type="image" src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /></fieldset>

                <div class="bestKeyword {$hot_keyword_display|display}">

                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>

                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>

                </div>

                <p><a href="/product/search.html">商品詳細検索</a></p>

            </div>

 

           <div module="Layout_project">

                <!--@css(/css/module/layout/project.css)-->

                <!--@js(/js/rotate.js)-->

                <!--@js(/js/module/layout/project.js)-->

                <h2>ショッピング企画展</h2>

                <ul>

                   <li><a href="/product/project.html{$param}"><img src="{$category_image}" alt="" /></a></li>

                    <li><a href="/product/project.html{$param}"><img src="{$category_image}" alt="" /></a></li>

                </ul>

                <div class="control">

                    <button type="button" class="prev" id="prevButton-project"><span>前へ</span></button>

                    <button type="button" class="stop" id="stopButton-project"><span>停止</span></button>

                   <button type="button" class="play" id="playButton-project"><span>再生</span></button>

                    <button type="button" class="next" id="nextButton-project"><span>次へ</span></button>

                </div>

            </div>

 

            <div module="Layout_login">

                <!--@css(/css/module/layout/login.css)-->

                <h2>ログイン</h2>

                <fieldset>

                    <legend>ログイン</legend>

                    <p class="check">

                        <span><label for="member_id">{$login_id_type_text}</label>{$form.member_id}</span>

                        <span><label for="member_passwd">パスワード</label>{$form.member_passwd}</span>

                    </p>

                    <p class="security">

                        {$form.check_save_id}

                        {$form.check_secret_connect}

                    </p>

                    <p class="button">

                        <input type="image" src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/btn_login.gif" alt="ログイン" onclick="{$action_func_login}" />

                    </p>

                </fieldset>

                <ul>

                    <li class="{$display_find_id|display}"><a href="/member/id/find_id.html">IDをお忘れの方</a></li>

                    <li><a href="/member/passwd/find_passwd_info.html">パスワードをお忘れの方</a></li>

                    <li><a href="/member/join.html">会員登録</a></li>

                </ul>

            </div>

 

            <div module="Layout_Info">

                <!--@css(/css/module/layout/info.css)-->

                <h2>お問い合わせ</h2>

                <ul>

                    <li class="tel"><strong>Telephone</strong><span>{$phone}</span></li>

                    <li><strong>Fax</strong><span>{$fax}</span></li>

                    <li><strong>Time</strong><span>{$runtime}</span></li>

                </ul>

            </div>

 

            <div module="Layout_Myshop">

                <!--@css(/css/module/layout/myshop.css)-->

                <h2>マイページ</h2>

                <ul>

                    <li class="order"><a href="/myshop/order/list.html"><strong>注文履歴</strong></a></li>

                    <li class="mileage"><a href="/myshop/mileage/historyList.html">ポイント</a></li>

                    <li class="member"><a href="/member/modify.html">会員情報</a></li>

                    <li class="consult {$consult_display|display}"><a href="/board/consult/list.html">1:1お問い合わせ</a></li>

                    <li class="wish"><a href="/myshop/wish_list.html">お気に入り</a></li>

                </ul>

            </div>

 

            <div module="Layout_Poll">

                <!--@css(/css/module/layout/poll.css)-->

                <h2>アンケート</h2>

                <h3><strong>質問 :</strong><span>{$poll_title}</span></h3>

                <fieldset>

                    <legend>質問項目</legend>

                    <ul>

                        <li>{$poll}{$poll_name}</li>

                        <li>{$poll}{$poll_name}</li>

                        <li>{$poll}{$poll_name}</li>

                        <li>{$poll}{$poll_name}</li>

                    </ul>

                    <p class="btnResult"><a href="#none" onclick="{$action_poll_result}">結果表示</a></p>

                    <p class="btnPoll"><a href="#none" onclick="{$action_poll_submit}">投票</a></p>

               </fieldset>

            </div>

 

            <div class="banner">

                <p module="Layout_giftBanner"><a href="/order/gift_list.html"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/bn_gift.gif" alt="ギフトイベント" /></a></p>

                <p module="Layout_sosBanner"><a href="/board/urgency/urgency.html" ><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/bn_sos.gif" alt="緊急お問い合わせ" /></a></p>

                <p module="Layout_couponzoneBanner"><a href="/coupon/coupon_zone.html"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/bn_coupon.gif" alt="クーポンゾーン" /></a></p>

                <p module="Layout_calendarBanner"><a href="{$calendar_view_page}"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/bn_calendar.gif" alt="カレンダー掲示板" /></a></p>

            </div>

        </div>

    </div><hr class="layout" />

 

    <div id="banner">

        <p><a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/img_banner1.jpg" alt="" /></a></p>

    </div>

 

    <div id="quick">

        <div module="Layout_orderBasketcount">

            <!--@css(/css/module/layout/orderBasketcount.css)-->

            <strong>カート</strong> <span><a href="/order/basket.html">{$basket_count}</a>点</span>

        </div>

 

        <div module="Layout_productRecent">

            <!--@css(/css/module/layout/productRecent.css)-->

            <h2><a href="/product/recent_view_product.html">最近見た<br />アイテム</a></h2>

            <ul>

                <li class="{$disp_recent|display}">

                    <a href="/product/detail.html{$param}"><img src="{$recent_img}" alt="" /><span>{$name}</span></a>

                </li>

                <li class="{$disp_recent|display}">

                    <a href="/product/detail.html{$param}"><img src="{$recent_img}" alt="" /><span>{$name}</span></a>

                </li>

            </ul>

            <p class="player"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/btn_recent_prev.gif" alt="前へ" class="prev" /><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/btn_recent_next.gif" alt="次へ" class="next" /></p>

        </div>

 

        <p class="pageTop"><a href="#header" title="トップへ戻る"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/btn_top1.gif" alt="top" /></a></p>

 

        <p class="banner"><a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/img_banner2.jpg" alt="" /></a></p>

    </div>

</div><hr class="layout" />

 

<div id="footer">

    <div class="inner">

        <span module="Layout_LogoBottom">

            <!--@css(/css/module/layout/logobottom.css)-->

            <a href="/index.html"><img src="{$logo}" alt="{$mall_name}" /></a>

        </span>

 

        <div module="Layout_footer">

            <!--@css(/css/module/layout/footer.css)-->

            <ul class="utilMenu">

                <li class="home"><a href="/index.html">ホーム</a></li>

                <li><a href="/shopinfo/company.html">会社概要</a></li>

                <li><a href="/member/agreement.html">利用規約</a></li>

                <li><a href="/member/privacy.html"><strong>個人情報保護方針</strong></a></li>

                <li><a href="/shopinfo/guide.html">ご利用ガイド</a></li>

            </ul>

            <p class="address">

                <span>法人名(商号) : {$company_name} </span> <span>代表者(名) : {$president_name}</span><br /><span>事業者登録番号案内 : [{$company_regno}]</span> <span>通信販売業申告 {$network_regno}</span> <span>{$biz_no_link}</span> <br />

                <span>電話番号 : {$phone}</span> <span>FAX : {$fax}</span><br /><span>住所 : {$mall_zipcode} {$mall_addr1} {$mall_addr2}</span><br />

                <span>個人情報管理責任者 : <a href="mailto:{$cpo_email}">{$cpo_name}({$cpo_email})</a></span><br />

               <span>Contact <strong><a href="mailto:{$email}">{$email}</a></strong> for more information.</span>

            </p>

            <p class="copyright">Copyright © 2011 <strong>{$mall_name}</strong>. All rights reserved.</p>

            <p class="pageTop"><a href="#header" title="トップへ戻る"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/btn_top2.gif" alt="top" /></a></p>

            <p class="hosting"><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/logo_cafe24.png" alt="hosting by cafe24 Simplex Internet Inc." /></p>

        </div>

    </div>

</div>

 

<!-- 参考: 決済のための必須エリア -->

<div id="progressPaybar" style="display:none;">

    <div id="progressPaybarBackground" class="layerProgress"></div>

    <div id="progressPaybarView">

        <div class="box">

            <p class="graph">

                <span><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/txt_progress.gif" alt="決済中です。" /></span>

                <span><img src="http://img.echosting.cafe24.com/skin/base_ja_JP/layout/img_loading.gif" alt="" /></span>

            </p>

            <p class="txt">

                この画面は決済完了後、自動に閉じられます。<br />

                決済中にはこの画面を閉じると、決済がうまく進まないことがあります。

            </p>

        </div>

    </div>

</div>

<!-- //参考 -->

 

<div module="Layout_multishopShipping">

    <!--@css(/css/module/layout/multishopShipping.css)-->

    <!--@js(/js/module/layout/multishopShipping.js)-->

    <div class="dimmed"></div>

    <div class="worldshipLayer">

        <h2>WORLD SHIPPING</h2>

        <div class="content">

            <p class="desc">PLEASE SELECT THE DESTINATION COUNTRY AND LANGUAGE :</p>

            <div class="select">

                <select module="Layout_multishopShippingCountrylist">

                    <option value="{$country_code}"{$country_default_selected}>SHIPPING TO : {$country_name}</option>

                    <option value="{$country_code}"{$country_default_selected}>SHIPPING TO : {$country_name}</option>

                </select>

            </div>

            <div class="select">

                <select module="Layout_multishopShippingLanguagelist">

                    <option value="{$shop_domain}"{$shop_default_selected}>LANGUAGE : {$shop_language_name}</option>

                    <option value="{$shop_domain}"{$shop_default_selected}>LANGUAGE : {$shop_language_name}</option>

                </select>

            </div>

        </div>

        <div class="btnArea">

            <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/link/btn_go.gif" alt="GO"/></a>

        </div>

        <a href="#none" class="btnClose"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/common/btn_close.png" width="16" height="16" alt="close"/></a>

    </div>

</div>

 

<div module="Layout_conversionPc">

    <!--@css(/css/module/layout/conversionpc.css)-->

    <a href="{$mobile_url}"><span>モバイルページ表示</span></a>

</div>

</body>

</html>


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


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


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

<!--@layout(/layout/basic/layout.html)-->
<!--@layout(/layout/basic/layout_sticky.html)-->
<div module="Product_menupackage">
<!--@css(/css/module/product/menupackage.css)-->
<!--@js(/js/module/product/menucategory.js)-->

     <div class="title" module="product_headcategory">
        ...中略
    </div>
 
<div module="product_searchdata">
        <!--@css(/css/module/product/searchdata.css)-->
        <div module="product_searchConditionData">
<button type="button" class="btnRefresh ec-product-searchdata-reset">一括削除</button>
 <ul class="list">
<li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>削除</button></li>
<li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>削除</button></li>
</ul>
</div>
        <div module="product_categoryHashtag">
            <div class="heading"><strong>タグ</strong></div>
            <ul class="list">
                <li>{$searchdata_category_hashtag}</li>
                <li>{$searchdata_category_hashtag}</li>
            </ul>
        </div>
    </div>
 
    <ul class="menuCategory">
        <li module="product_displaycategory" style="display:{$display};" class="{$selected}">


３. 商品検索画面


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


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

 div class="titleArea">
    <h2>상품검색</h2>
</div>

<div module="search_form">
    <!--@css(/css/module/product/search_form.css)-->
    <div class="ec-base-box searchbox">
        <fieldset>
            <legend>상품 검색</legend>
            <div class="item"><strong>상품분류</strong> {$form.category_no}</div>
            <div class="item">
                <strong>검색조건</strong>
                {$form.search_type}
                {$form.keyword}
            </div>
            <div class="popular" id="{$except_keyword_wrap_id}" style="display:none">
                <strong>제외검색어</strong>
                {$form.exceptkeyword}
            </div>
            <div class="popular" module="search_hotkeyword">
                <strong>인기검색어</strong>
                <p>
                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>
                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>
                </p>
            </div>
            <div class="item"><strong>판매가격대</strong> {$form.product_price1} ~ {$form.product_price2}</div>
            <div class="item"><strong>검색정렬기준</strong> {$form.order_by}</div>
            <p class="button"><input type="image" src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_search2.gif" alt="검색" /></p>
        </fieldset>
    </div>

    <div class="searchResult">
        <p class="record">총 <strong>{$total_count}</strong> 개 의 상품이 검색되었습니다.</p>
        <ul class="listType" module="search_Orderby">
            <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li>
            <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li>
        </ul>
    </div>

    <div class="noData {$search_fail_display|display}">
        <strong class="warning">검색결과가 없습니다.</strong>
        <strong>정확한 검색어 인지 확인하시고 다시 검색해 주세요.</strong>
        <ul>
            <li>검색어/제외검색어의 입력이 정확한지 확인해 보세요.</li>
            <li>두 단어 이상의 검색어인 경우, 띄어쓰기를 확인해 보세요.</li>
            <li>검색 옵션을 다시 확인해 보세요.</li>
        </ul>
    </div>
</div><!-- //参考 -->

<div module="product_searchdata">
    <!--@css(/css/module/product/searchdata.css)-->
    <form class="searchField" id="{$searchkeyword_form}" action="/product/search.html" method="get">
        <fieldset>
            <legend>상품검색</legend>
            <div class="searchInput">
                {$searchdata_keywordform}<input type="image" id="{$search_submit_button}" src="//img.echosting.cafe24.com/skin/base/product/btn_search.gif" alt="검색" class="btnSearch" /><ul class="autoDrop" id="{$search_auto_id}"></ul>
            </div>
            <button type="button" class="btnSearchOption">검색옵션</button>
            <!--  検索オプションレイヤー -->
            <div id="ec-product-searchoption" class="searchOption ec-base-layer">
                <!--@css(/layout/basic/css/ec-base-layer.css)-->
                <div class="header">
                    <h3>검색옵션</h3>
                </div>
                <div class="content">
                    <div class="boardWrite">
                        <table border="1" summary="">
                            <caption>검색옵션</caption>
                            <colgroup>
                                <col style="width:80px;" />
                                <col style="width:auto;" />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <th scope="row">검색어</th>
                                    <td>
                                        {$searchdata_detail_keywordform}
                                        <p class="desc">{$searchdata_detail_type_form}<label for="{$search_detail_type_id}"> 단어를 하나 이상 포함하고 있는 모든 상품 검색</label></p>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">제외검색어</th>
                                    <td>
                                        {$searchdata_except_keywordform}
                                        <p class="desc">검색결과에서 제외하는 단어 조건을 입력할 수 있습니다.</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="ec-base-button">
                    <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_search.gif" alt="검색" id="{$searchdata_layer_submit}" /></a>
                    <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_reset.gif" alt="초기화" id="{$searchdata_layer_reset}" /></a>
                </div>
                <a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="닫기" /></a>
            </div><!-- //参考: 検索オプションレイヤー -->
        </fieldset>
        <div module="product_RelateKeyword" class="keywordArea">
            <strong class="heading">연관검색어</strong>
            <ul class="list">
                <li><a href="{$relate_url}">{$relate_word}</a></li>
                <li><a href="{$relate_url}">{$relate_word}</a></li>
            </ul>
        </div>
        <div module="product_HotKeyword" class="keywordArea">
            <strong class="heading">인기검색어</strong>
            <ul class="list">
                <li><a href="{$hot_keyword_search_url}">{$hot_keyword_name}</a></li>
                <li><a href="{$hot_keyword_search_url}">{$hot_keyword_name}</a></li>
            </ul>
        </div>
    </form>
     
    <div module="product_searchConditionData">
      <button type="button" class="btnRefresh ec-product-searchdata-reset">전체해제</button>
<ul class="list">
<li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>삭제</button></li>
<li>{$search_condition_data}<button type="button" class="btnSearchDelete" {$search_attr}>삭제</button></li>
      </ul>
</div>
    <div class="searchResult">
        <p class="record">총 <strong>{$total_count}</strong> 개 의 상품이 검색되었습니다.</p>
        <ul module="product_searchOrderby">
            <li><a href="{$param}" {$style}>{$sort_name}</a></li>
            <li><a href="{$param}" {$style}>{$sort_name}</a></li>
        </ul>
    </div>
    <p class="noData {$search_fail_display|display}">검색 결과가 없습니다.</p>
  </div>

<div module="Search_Result" class="ec-base-product">




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 class="button" module="product_action">



5. CSSファイルの追加


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


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

/* 検索&商品カテゴリ */

.xans-product-searchdata .searchField { padding:22px 0; margin:0 0 -1px; background:url("//img.echosting.cafe24.com/skin/base/product/bg_search_field.gif") repeat-x 0 100%; }

.xans-product-searchdata .searchField fieldset { position:relative; display:table; margin:0 auto 10px; text-align:center; }

.xans-product-searchdata .searchField fieldset .searchInput { position:relative; display:inline-block; width:262px; padding:0 36px 0 0; border:1px solid #565960; border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; }

.xans-product-searchdata .searchField fieldset .autoDrop { display:none; z-index:2; position:absolute; top:100%; left:-1px; overflow:hidden; overflow-y:auto; max-height:100px; width:100%; border:1px solid #565960; text-align:left; background:#fff; }

.xans-product-searchdata .searchField fieldset .autoDrop li a { display:block; padding:6px 10px; font-size:11px; color:#1c1c1c;}

.xans-product-searchdata .searchField fieldset .autoDrop li a:hover,

.xans-product-searchdata .searchField fieldset .autoDrop li.selected a { text-decoration:none; color:#fff; background:#a1a4ae; }

.xans-product-searchdata .searchField fieldset .btnSearchOption { margin:0 0 0 7px; padding:3px 14px 3px 0; vertical-align:middle; color:#2e2e2e; font-size:12px; letter-spacing:-1px; outline:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow2.gif") no-repeat 100% 50%; }

.xans-product-searchdata .searchField .keyword { border:0; padding:0 10px; width:100%; height:32px; line-height:32px; outline:0; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

.xans-product-searchdata .searchField .btnSearch { position:absolute; top:0; right:0; outline:0; }

.xans-product-searchdata .searchField .keywordArea { max-width:600px; margin:3px auto 0; text-align:center; }

.xans-product-searchdata .searchField .keywordArea .heading { display:inline-block; padding:3px 5px; border:1px solid #cbcbcb; color:#525252; font-size:11px; font-weight:normal; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }

.xans-product-searchdata .searchField .keywordArea .list { display:inline; }

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

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

 

.xans-product-searchdata .xans-product-searchconditiondata { position:relative; padding:2px 8px 9px 127px; border:1px solid #d7d5d5; font-size:0; line-height:0; }

#searchContent.xans-product-searchdata .xans-product-searchconditiondata { border-top:0; }

.xans-product-searchdata .xans-product-searchconditiondata .list { display:inline; }

.xans-product-searchdata .xans-product-searchconditiondata .list li { display:inline-block; height:14px; line-height:14px; margin:7px 5px 0 0; padding:4px 3px 4px 8px; border:1px solid #dadada; border-radius:24px; vertical-align:top; font-size:11px; color:#508bed; word-break:break-all; word-wrap:break-word; background:#fff; }

.xans-product-searchdata .xans-product-searchconditiondata .btnSearchDelete { width:22px; height:22px; margin:-4px 0; font-size:0; line-height:0; outline:0; vertical-align:top; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_delete2.gif") no-repeat center center; }

.xans-product-searchdata .xans-product-searchconditiondata .icoColor { display:inline-block; overflow:hidden; width:14px; height:14px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; border-radius:16px; vertical-align:top; }

 

.xans-product-searchdata .xans-product-searchconditiondata .btnRefresh { position:absolute; left:19px; top:13px; padding:0 0 0 20px; text-align:left; outline:0; line-height:20px; color:#525252; background:url("//img.echosting.cafe24.com/skin/base/product/btn_refresh.gif") no-repeat 0 0; }

.xans-product-searchdata .xans-product-searchconditiondata .btnRefresh:after { content:''; position:absolute; right:-17px; top:2px; width:1px; height:11px; background:#d3d1d2; }

 

.xans-product-searchdata .xans-product-categoryhashtag { display:table; table-layout:fixed; padding:10px; }

.xans-product-searchdata .xans-product-categoryhashtag .heading { display:table-cell; width:41px; vertical-align:top; }

.xans-product-searchdata .xans-product-categoryhashtag .heading > strong { display:inline-block; padding:3px 5px; border:1px solid #cbcbcb; color:#525252; font-size:11px; font-weight:normal; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }

.xans-product-searchdata .xans-product-categoryhashtag .list { display:table-cell; width:auto; vertical-align:top; font-size:0; line-height:0; }

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

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

/* 検索*/

.xans-product-searchdata .searchResult { margin:30px 0 0; overflow:hidden; border:1px solid #d7d5d5; text-align:right; line-height:38px; }

.xans-product-searchdata .searchResult .record { float:left; padding:0 0 0 8px; color:#008bcc; }

.xans-product-searchdata .searchResult .xans-product-searchorderby { display:inline; margin:0 4px 0 0; }

.xans-product-searchdata .searchResult .xans-product-searchorderby li { display:inline; padding:0 6px 0 10px; color:#2e2e2e; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/base/product/bg_result_type.gif") no-repeat 0 50%; }

.xans-product-searchdata .searchResult .xans-product-searchorderby li:hover { color:#008bcc; text-decoration:none; }

.xans-product-searchdata .searchResult .xans-product-searchorderby li:first-child { background:none; }

.xans-product-searchdata .xans-product-searchconditiondata + .searchResult { margin-top:53px; }

.xans-product-searchdata .noData { padding:50px 0; text-align:center; line-height:1.8em; }

.xans-product-searchdata .noData > strong { display:block; color:#000; }

.xans-product-searchdata .noData > strong.warning { display:block; color:#008bcc; }

.xans-product-searchdata .noData ul { margin:10px 0 0; }

/* 検索オプションレイヤーウィンドウ */

.searchOption { display:none; top:40px; width:460px; left:50%; margin: 0 0 0 -231px; text-align:left; }

.searchOption.ec-base-layer .content { padding:15px; }

.searchOption .boardWrite { position:relative; margin:10px 0 0; color:#353535; line-height:1.4; }

.searchOption .boardWrite:first-child { margin-top:0; }

.searchOption .boardWrite tbody th { padding:9px 0 8px 10px; text-align:left; word-break:break-all; word-wrap:break-word; }

.searchOption .boardWrite td { padding:5px 10px 4px; vertical-align:middle; word-wrap:break-word; word-break:break-all; }

.searchOption .boardWrite input[type=text] { width:309px; }

.searchOption .desc { margin:7px 0 0; color:#919399; font-size:11px; }

   

/* 詳細検索サイドバー(#searchSidebar), PC 固定型(#searchSticky)  */

#searchSidebar.searchData { z-index:1001; position:fixed; top:0; left:-231px; width:230px; bottom:0; border-right:1px solid #c6cbd6; color:#2e2e2e; background:#f3f3f3; }

#searchSticky.searchData { z-index:100; width:180px; margin:-15px 0 0; background:#fff; }

#searchSticky.sticky { position:fixed; top:0; }

#searchSidebar.searchData.opened { left:0; }

#searchSidebar .btnSearch { position:absolute; top:195px; right:-28px; padding:0 7px 0 9px; width:27px; outline:0; color:#e5e5e5; font-size:12px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar.png") no-repeat 0 0; }

#searchSidebar.gRight { left:inherit; right:-231px; border-right-width:0; border-left:1px solid #c6cbd6; }

#searchSidebar.gRight.opened { left:inherit; right:0; }

#searchSidebar.gRight .btnSearch { left:-28px; right:inherit; }

#searchSidebar .btnSearch:before { position:absolute; top:-44px; left:0; display:block; content:""; width:27px; height:44px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before.png") no-repeat 0 0; }

#searchSidebar .btnSearch:after { position:absolute; top:100%; left:0; display:block; content:""; width:27px; height:29px; background:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after.png") no-repeat 0 0; }

#searchSidebar.gRight .btnSearch { right:auto; left:-28px; background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_right.png"); }

#searchSidebar.gRight .btnSearch:before { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before_right.png"); }

#searchSidebar.gRight .btnSearch:after { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after_right.png"); }

#searchSidebar.searchData .searchArea { position:relative; padding:20px 15px; }

#searchSticky.searchData .searchArea { position:relative; }

#searchSidebar.searchData .searchArea > .title { border-bottom:1px solid #565960; padding:0 0 17px; text-align:center; font-size:18px; color:#131313; }

#searchSticky.searchData .searchArea > .title { border-bottom:1px solid #565960; padding:4px 0 10px 2px; font-size:14px; color:#0e0e0e; }

.searchData .xans-product-searchfilterlist { border-bottom:1px solid #d5d5d5; }

.searchData .xans-product-searchfilterlist .title { position:relative; padding:10px 19px 10px 5px; text-transform:uppercase; font-size:12px; cursor:pointer; }

#searchSticky.searchData .xans-product-searchfilterlist .title { position:relative; padding:10px 19px 10px 5px; text-transform:uppercase; font-size:12px; color:#444; cursor:pointer; }

.searchData .xans-product-searchfilterlist .title:after { display:block; content:""; position:absolute; top:50%; right:6px; width:7px; height:5px; margin:-3px 0 0; background:url("//img.echosting.cafe24.com/skin/base/product/bg_search_toggle_title.gif") no-repeat 0 0; }

.searchData .xans-product-searchfilterlist .content { display:none; margin:0 0 13px; }

.searchData .xans-product-searchfilterlist.selected .content { display:block; }

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

  #searchSidebar.searchData .xans-product-searchfilterlist .check .xans-product-filterform { overflow:hidden; overflow-y:auto; max-height:100px; border:1px solid #dfdfdf; background:#fff; }

  #searchSticky.searchData .xans-product-searchfilterlist .check .xans-product-filterform { overflow:hidden; overflow-y:auto; max-height:90px; }

  #searchSidebar.searchData .xans-product-searchfilterlist .check li { margin:0 10px 7px 27px; line-height:14px; color:#525252; word-break:break-all; word-wrap:break-word; }

  #searchSticky.searchData .xans-product-searchfilterlist .check li { margin:0 10px 9px 27px; line-height:14px; color:#525252; word-break:break-all; word-wrap:break-word; }

  #searchSidebar.searchData .xans-product-searchfilterlist .check li:first-child { padding-top:10px; }

  #searchSticky.searchData .xans-product-searchfilterlist .check li:first-child { padding-top:7px; }

  .searchData .xans-product-searchfilterlist .check li.disabled { color:#d7d7d8; }

  .searchData .xans-product-searchfilterlist .check li label { cursor:pointer; vertical-align:top; }

  .searchData .xans-product-searchfilterlist .check li.disabled label { cursor:default; }

  .searchData .xans-product-searchfilterlist .check li input { margin:0 0 0 -17px; vertical-align:top; }

  .searchData .xans-product-searchfilterlist .check .icoColor { display:inline-block; margin:0 4px 0 0; width:12px; height:12px; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_color_circle.png"); background-repeat:no-repeat; background-position:0 0; }

/* テキストボタン */

  .searchData .xans-product-searchfilterlist .button .xans-product-filterform { margin:-6px 0 0 -5px; font-size:0; line-height:0; }

  .searchData .xans-product-searchfilterlist .button li { display:inline-block; padding:6px 0 0 5px; min-width:50%; max-width:100%; vertical-align:top; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

  .searchData .xans-product-searchfilterlist .button li button { display:inline-block; width:100%; border:1px solid #ccc; padding:6px; outline:0; font-size:12px; line-height:16px; color:#525252; word-break:break-all; word-wrap:break-word; background:#fff; }

  .searchData .xans-product-searchfilterlist .button li:hover button { border-color:#508bed; color:#508bed; }

  .searchData .xans-product-searchfilterlist .button li.disabled button { border-color:#d7d7d8; color:#d7d7d8; cursor:default; }

  .searchData .xans-product-searchfilterlist .button li.selected button { border:2px solid #508bed; padding:5px; color:#508bed; }

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

    .searchData .xans-product-searchfilterlist .button.full .xans-product-filterform { margin:0; border-top:1px solid #ccc; }

    .searchData .xans-product-searchfilterlist .button.full li { width:100%; padding:0; }

    .searchData .xans-product-searchfilterlist .button.full li button { border-top:0; }

    .searchData .xans-product-searchfilterlist .button.full li:hover button { margin-top:-1px; border-top:1px solid #508bed; }

    .searchData .xans-product-searchfilterlist .button.full li.disabled button { position:relative; margin-top:-1px; border-top:1px solid #d7d7d8; }

    .searchData .xans-product-searchfilterlist .button.full li.selected button { position:relative; margin:-1px 0 0; padding:5px; border:2px solid #508bed; }

 

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

   .searchData .xans-product-searchfilterlist .button.hashtag li { min-width:inherit; }

 

/* カラーチップ */

  #searchSidebar.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform { padding:3px 5px; margin:-8px 0 0; font-size:0; line-height:0; }

  #searchSticky.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform { padding:6px 5px 0; margin:-8px 0 0; font-size:0; line-height:0; }

  .searchData .xans-product-searchfilterlist .colorChip li { position:relative; display:inline-block; width:20%; margin:8px 0 0; text-align:center; vertical-align:middle; }

  #searchSidebar.searchData .xans-product-searchfilterlist .colorChip li .circle { display:inline-block; width:25px; height:25px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle.png"); background-repeat:no-repeat; background-position:0 0; }

  #searchSticky.searchData .xans-product-searchfilterlist .colorChip li .circle { display:inline-block; width:29px; height:29px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle_29.png"); background-repeat:no-repeat; background-position:0 0; }

  #searchSidebar.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:18px; height:15px; margin:-7px 0 0 -9px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0; }

  #searchSticky.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:18px; height:15px; margin:-8px 0 0 -9px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0; }

  .searchData .xans-product-searchfilterlist .colorChip li.disabled .circle { opacity:0.1; filter:alpha(opacity=10); cursor:default; }

  .searchData .xans-product-searchfilterlist .colorChip li.disabled:after { position:absolute; top:50%; left:50%; display:block; content:""; width:14px; height:14px; margin:-8px 0 0 -6px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_disable.png") no-repeat 0 0; }

  #searchSticky.searchData .xans-product-searchfilterlist .colorChip li.disabled:after { margin:-7px 0 0 -7px; }

       

/* 価格入力 */

  .searchData .xans-product-searchfilterlist .button .priceInput { margin:9px 0 0; }

  .searchData .xans-product-searchfilterlist .button .priceInput > input[type="text"] { width:47px; padding:5px 4px; margin:0 4px 0 0; }

  #searchSticky.searchData .xans-product-searchfilterlist .button .priceInput { position:relative; height:30px; padding-right:32px; }

  #searchSticky.searchData .xans-product-searchfilterlist .button .btnPriceSearch { position:absolute; right:0; top:0;  }

 

/* 価格範囲指定 */

  .searchData .xans-product-searchfilterlist .priceSlide .slider { position:relative; padding:0 0 5px; margin:7px 5px 5px 8px; }

  .searchData .xans-product-searchfilterlist .priceSlide .range { position:static; margin:0 0 0 0; border-radius:9px; border:1px solid #d9d9d8; height:9px; background:#e7e7e7; }

  .searchData .xans-product-searchfilterlist .priceSlide .noUi-base { position:static; }

  .searchData .xans-product-searchfilterlist .priceSlide .noUi-connect { position:absolute; top:-1px; height:9px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; font-size:0; line-height:0; background:#508bed; }

  .searchData .xans-product-searchfilterlist .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 12px; width:12px; height:21px; border:0; border-radius:0; box-shadow:none; cursor:pointer; font-size:0; line-height:0; outline:0; background:url("//img.echosting.cafe24.com/skin/base/product/btn_price_handle.png") no-repeat 0 0; }

  .searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:before, .searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:after { display:none; }

  .searchData .xans-product-searchfilterlist .priceSlide .value { overflow:hidden; margin:0 0 0 3px; text-align:right; font-size:11px; }

  .searchData .xans-product-searchfilterlist .priceSlide .value .minPrice { float:left; }

 

/* 詳細検索上段型 */

  #searchContent { position:relative; margin:-2px 0 0; }

  #searchContent .searchArea { position:relative; border:1px solid #9fa4ac; }

  #searchContent th { padding:13px 18px; border-top:1px solid #dfdfdf; border-right:1px solid #d7d5d5; font-size:12px; color:#2e2e2e; text-align:left; text-transform:uppercase; cursor:pointer; vertical-align:top; background:#f2f2f2; }

  #searchContent tr td { padding:2px 6px; border-top:1px solid #eee; }

  #searchContent tr:first-child th,

  #searchContent tr:first-child td { border-top:0; }

  #searchContent tr .extend { position:absolute; right:0; top:6px; bottom:6px; border-left:1px solid #eee; }

  #searchContent tr .btnExtend { width:10px; height:10px; margin:-2px -6px 0 0; padding:15px 18px 14px;  font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:#fff url("//img.echosting.cafe24.com/skin/base/product/btn_search_extend.png") no-repeat 50%; }

  #searchContent tr.selected .btnExtend { background:#fff url("//img.echosting.cafe24.com/skin/base/product/btn_search_fold.png") no-repeat 50%; }

  #searchContent tr .cell { position:relative; overflow:hidden; height:37px; }

  #searchContent tr .priceSlide .cell { height:45px; }

  #searchContent tr.selected .cell { height:auto; }

  #searchContent tr .content { width:700px; }

  #searchContent tr .colorChip .content { width:594px; margin:0 0 0 9px; }

  #searchContent tr .colorChip .check { height:25px; }  

  #searchContent .btnAllExtend { overflow:hidden; position:absolute; right:-1px; bottom:-17px; z-index:1; width:53px; height:17px; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:transparent url("//img.echosting.cafe24.com/skin/base/product/btn_all_extend.png") no-repeat 0 0; }

  #searchContent .btnAllExtend.open { background-image:url("//img.echosting.cafe24.com/skin/base/product/btn_all_extend_open.png"); }

 

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

  #searchContent tr .check li { display:inline-block; margin:7px 5px; word-break:break-all; word-wrap:break-word; vertical-align:top; }

  #searchContent tr .check li label { display:inline-block; height:23px; padding:0 7px; line-height:24px; color:#525252; cursor:pointer; vertical-align:top; }

  #searchContent tr .check li.disabled label { color:#d7d7d8; cursor:default; }

 

/* カラーチップ */

  #searchContent tr .colorChip .xans-product-filterform { font-size:0; line-height:0; }

  #searchContent tr .colorChip li { position:relative; display:inline-block; margin:7px 5px; text-align:center; vertical-align:middle; }

  #searchContent tr .colorChip li .circle { display:inline-block; width:23px; height:23px; outline:0; cursor:pointer; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle_23.png"); background-repeat:no-repeat; background-position:0 0; }

  #searchContent tr .colorChip li.selected .icoColorCheck { position:absolute; top:50%; left:50%; display:block; width:13px; height:10px; margin:-5px 0 0 -6px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected2.png") no-repeat 0 0; }

  #searchContent tr .colorChip li.disabled .circle { opacity:0.1; filter:alpha(opacity=10); cursor:default; }

  #searchContent tr .colorChip li.disabled:after { position:absolute; top:50%; left:50%; display:block; content:""; width:14px; height:14px; margin:-7px 0 0 -7px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_color_disable.png") no-repeat 0 0; }

  #searchContent tr .check .icoColor { display:inline-block; margin:6px 4px 0 0; width:12px; height:12px; vertical-align:top; background-image:url("//img.echosting.cafe24.com/skin/base/product/bg_color_circle.png"); background-repeat:no-repeat; background-position:0 0; }

 

/* テキストボタン */

  #searchContent tr .button li { display:inline-block; margin:7px 5px; word-break:break-all; word-wrap:break-word; vertical-align:top; }

  #searchContent tr .button li button { display:inline-block; height:23px; padding:0 7px; line-height:24px; color:#525252; cursor:pointer; vertical-align:top; background:transparent; }

  #searchContent tr .button li.selected button { border-radius:23px; color:#fff; background:#508bed; }

  #searchContent tr .button li.disabled button { color:#d7d7d8; cursor:default; outline:0; }

 

/* 価格 */

  #searchContent tr .button.full .xans-product-filterform { font-size:0; line-height:0; }

  #searchContent tr .button.full li { display:inline-block; margin:7px 5px; }

  #searchContent tr .button.full li button { display:inline-block; padding:0 7px; outline:0; font-size:12px; line-height:23px; color:#525252; word-break:break-all; word-wrap:break-word; letter-spacing:-0.06em; background:transparent; }

  #searchContent tr .button.full li:hover button { border-color:#508bed; color:#508bed; }

  #searchContent tr .button.full li.disabled button { border-color:#d7d7d8; color:#d7d7d8; cursor:default; }

  #searchContent tr .button.full li.selected button { color:#508bed; }

  #searchContent .button.full .content { width:450px; }

  #searchContent tr.selected .button.full .content { width:806px; }

  #searchContent tr.selected .button .priceInput { display:inline-block; position:static; }

 

  #searchContent tr .button .priceInput { position:absolute; right:83px; top:0; margin:7px 0 7px 12px; line-height:22px; }

  #searchContent tr .button .priceInput > input[type="text"] { width:63px; padding:2px 5px; margin:0 4px 0 0; border-color:#d9d9d9; border-radius:2px; }

  #searchContent tr .button .btnPriceSearch img { display:none; }

  #searchContent tr .button .btnPriceSearch #ec-product-searchdata-submit { display:inline-block; width:48px; height:22px; margin:0 0 0 4px; border:1px solid #b4b4b4; border-radius:2px; line-height:24px; color:#2e2e2e; text-align:center; vertical-align:top; }

  #searchContent tr .button .btnPriceSearch a:hover { text-decoration:none; }

 

/* 価格範囲指定 */

  #searchContent tr .priceSlide .slider { position:relative; width:500px; padding:0 0 5px; margin:7px 5px 5px 15px; }

  #searchContent tr .priceSlide .range { position:static; margin:0 0 0 0; border:0; border-radius:9px; border:1px solid #d9d9d8; height:9px; background:#e7e7e7; }

  #searchContent tr .priceSlide .noUi-base { position:static; }

  #searchContent tr .priceSlide .noUi-connect { position:absolute; top:-1px; height:9px; border-top:1px solid #3d7ce4; border-bottom:1px solid #3d7ce4; font-size:0; line-height:0; background:#508bed; }

  #searchContent tr .priceSlide .noUi-handle { position:absolute; top:-4px; display:block; margin:0 0 0 12px; width:12px; height:21px; border:0; border-radius:0; box-shadow:none; cursor:pointer; font-size:0; line-height:0; outline:0; background:url("//img.echosting.cafe24.com/skin/base/product/btn_price_handle.png") no-repeat 0 0; }

  #searchContent tr .priceSlide .noUi-handle:before, #searchContent tr .priceSlide .noUi-handle:after { display:none; }

  #searchContent tr .priceSlide .value { overflow:hidden; width:512px; margin:0 0 0 9px; text-align:right; font-size:11px; }

  #searchContent tr .priceSlide .value .minPrice { float:left; }


/* 結果内検索 */
  .searchData .searchForm { position:relative; height:34px; }
  .searchData .keyword { width:100%; height:34px; padding:0 44px 0 8px; box-sizing:border-box; border-radius:2px; border:1px solid #d8d8d8; }
  .searchData .btnResearch { overflow:hidden; position:absolute; right:1px; top:1px; width:34px; height:32px; border-left:1px solid #d8d8d8; font-size:1px; line-height:0; color:transparent; text-indent:-150%; background:url('//img.echosting.cafe24.com/skin/base/product/btn_research.gif') no-repeat 0 0; }
  .searchData .suggest ul { display:none; position:absolute; top:33px; z-index:10; width:100%; border:1px solid #d8d8d8; box-sizing:border-box; background:#fff; }
  .searchData .suggest li { overflow:hidden; height:28px; padding:0 8px; color:#525252; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }
  .searchData .suggest li:hover, .searchData .suggest li.selected { cursor:pointer; background:#f1f1f1; }

/* 上段型結果内検索 */
  #searchContent tr .search { padding:9px 6px 9px 9px; }   
  #searchContent tr .search .cell { overflow:inherit; height:24px; }
  #searchContent .searchForm { position:relative; }
  #searchContent .keyword { display:inline-block; width:257px; height:24px; padding:0 8px ; box-sizing:border-box; border-radius:2px; border:1px solid #d9d9d9; vertical-align:top; }
  #searchContent .btnResearch { display:inline-block; height:24px; padding:0 12px; border:1px solid #b4b4b4; border-radius:2px; line-height:24px; color:#2e2e2e; vertical-align:top; background:#fff; }
  #searchContent .suggest ul { display:none; position:absolute; top:23px; z-index:10; width:257px; border:1px solid #d9d9d9; box-sizing:border-box; background:#fff; }
  #searchContent .suggest li { overflow:hidden; height:28px; padding:0 8px; color:#525252; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }

  #searchContent .suggest li:hover, #searchContent .suggest li.selected { cursor:pointer; background:#f1f1f1; }


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


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

 .xans-product-hashtag { display:table; table-layout:fixed; width:346px; margin:30px auto 0; font-family:GulimChe,Gulim; }
.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では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。

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

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

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


前の記事

[商品管理] 商品説明項目に「Edibotで作成」追加

2019-02-13

次の記事

[商品管理] [PC]商品キュレーションのデザインソース設定ガイド(左スライド) - HTML/CSS

2019-06-19