新デザイントップページ構成(PC)
※テンプレートに設定するHTMLは、「テンプレート内の特殊キーワードでイベント情報に置換する」機能により、イベントによる管理も可能。→新デザインテンプレート中にイベントフリースペース埋め込み設定
1. ヘッダロゴ横バナー
共通ヘッダー ロゴ・バナー(新デザイン用)テンプレート内に記載。
<div id="logo_side_banner">
<a href="リンク先URL"><img src="バナー画像URL" alt=""></a>
</div>
2. ヘッダ右枠
共通ヘッダー ロゴ・バナー(新デザイン用)テンプレート内に記載。
<div id="header_ad">
<a href="リンク先URL"><img src="バナー画像URL" alt=""></a>
</div>
(番号なし) ヘッダ タブ型リンク
共通ヘッダー タブ型リンク(新デザイン用)テンプレート内に記載。
下記は、現時点の内容。
<ul id="content_tab" class="rainbow_tab">
<li><a href="/category/25/">グルメ</a></li>
<li><a href="/category/29/">コンタクト</a></li>
<li><a href="/category/23/">家電</a></li>
<li><a href="/category/26/">おもちゃ</a></li>
<li><a href="/category/21/">ファッション</a></li>
<li><a href="/category/27/">インテリア・雑貨</a></li>
<li><a href="/category/28/">コスメ・健康</a></li>
<li><a href="/category/30/">ペット・花・DIY</a></li>
<li><a href="/category/31/">車・バイク</a></li>
<li><a href="/category/22/">スポーツ</a></li>
<li><a href="/category/24/">エンタメ</a></li>
<li><a href="/category/32/">サービス</a></li>
</ul>
3. 注目のキーワード
トップページの注目キーワードは、[モール設定]→[モールコード1のモール設定を開く]→「注目のキーワード」欄に設定する。
この項目は、モールフリースペースインポートにも存在する。
<div id="hot_keyword">
<dl class="float_left">
<dt>注目のキーワード：</dt>
<dd><a href="リンク先URL">キーワード</a></dd>
<dd><a href="リンク先URL">キーワード</a></dd>
</dl>
</div><!-- /#hot_keyword -->
4. 右サイド上バナー
右メニュー上部(新デザイン用)テンプレートに設定する。
ログイン時と未ログイン時でテンプレートが分かれている。
未ログイン時は会員登録誘導のバナーを設定し、ログイン中は広告バナーを設定する。
未ログイン時
<div id="side_ad">
<ul class="banner_list">
<li><a href=""><img src="http://img.ymall.jp/image/ymdweb/ymall/pc/common/banner_entry.png" alt="banner_entry" /></a></li>
</ul>
</div><!-- /#side_ad -->
ログイン時
<div id="side_ad">
<ul class="banner_list">
<li><a href="リンク先URL"><img src="バナー画像URL" alt=""></a></li>
<li><a href="リンク先URL"><img src="バナー画像URL" alt=""></a></li>
</ul>
</div>
5. メインバナー
HTML表示用イベントで表示する。4枚を超えて設定可能。
拡大表示用画像と、スライド表示用画像それぞれに、同じ画像を設定する必要がある。
(10/28高崎では1つの画像設定で良いという話をしてしまいましたが、同じ画像を2つ設定する必要がありました)
→新デザインHTML表示用イベントの設定
<div id="main_banner">
<div class="focus_image">
<ul class="images">
<li class="current"><a href="リンク先URL1"><img src="バナー画像URL1" alt=""></a></li>
<li><a href="リンク先URL2"><img src="バナー画像URL2" alt=""></a></li>
<li><a href="リンク先URL3"><img src="バナー画像URL3" alt=""></a></li>
<li><a href="リンク先URL4"><img src="バナー画像URL4" alt=""></a></li>
</ul>
</div>
<div class="thumbnails">
<div>
<div class="panel_wrapper current"><div><img src="バナー画像URL1" alt=""></div></div>
<div class="panel_wrapper"><div><img src="バナー画像URL2" alt=""></div></div>
<div class="panel_wrapper"><div><img src="バナー画像URL3" alt=""></div></div>
<div class="panel_wrapper"><div><img src="バナー画像URL4" alt=""></div></div>
</div>
</div>
</div><!-- /#main_banner -->
6. 今日のイチオシ
HTML表示用イベントで表示する。
<div id="todays_pickup">
<h2 class="title_underline">今日のイチオシ！</h2>
<ul class="horizontal_list">
<li><a href="リンク先URL">キーワード</a></li>
<li><a href="リンク先URL">キーワード</a></li>
<li><a href="リンク先URL">キーワード</a></li>
<li><a href="リンク先URL">キーワード</a></li>
</ul>
</div><!-- /#todays_pickup -->
7. タイムセール
価格設定は、キャンペーン価格設定を利用する。
ポイント設定は、期間限定ポイント設定を利用する。
表示には、タイムセール用のイベントを設定する。
→新デザインタイムセール表示用イベントの設定
8. 注目のイベント
HTML表示用イベントで表示する。3個より多く設定可能。
※11/24追記 id="pickup_event"を外しました
<div>
<h2 class="title_underline">注目のイベント</h2>
<div class="banner_list_horizontal">
<div class="panels" col="3">
<div><div class="panel_wrapper"><a href="リンク先URL"><img src="画像URL" alt=""></a></div></div>
<div><div class="panel_wrapper"><a href="リンク先URL"><img src="画像URL" alt=""></a></div></div>
<div><div class="panel_wrapper"><a href="リンク先URL"><img src="画像URL" alt=""></a></div></div>
</div>
</div>
</div><!-- /#pickup_event -->
12,13 注目ショップの商品
HTML表示用イベントで表示する。
※2014/12/04 ショップ部分を下揃えのため、class="pickup_text"指定を追記。
<div id="pickup_shop">
<h2 class="title_underline">注目ショップの商品</h2>
<div class="shop_items">
<div class="panels" col="2">
<div>
<div class="panel_wrapper">
<div class="shop_image"><img src="商品画像" alt=""></div>
<p class="pickup_text"><a href="リンク先URL" class="overflow">商品名</a></p>
<div class="pickup_item">
<a href="リンク先URL"><img src="ショップ画像" alt="">ショップ名</a>
</div>
</div>
</div>
<div>
<div class="panel_wrapper">
<div class="shop_image"><img src="商品画像" alt=""></div>
<p class="pickup_text"><a href="リンク先URL" class="overflow">商品名</a></p>
<div class="pickup_item">
<a href="リンク先URL"><img src="ショップ画像" alt="">ショップ名</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- /#pickup_shop -->
14. おすすめ特集
HTML表示用イベントで表示する。HTMLは注目のイベントのタイトル部分を変えたもの。
16,17 サイド下部バナー
左サイドはモールツリー下部(新デザイン用)テンプレート、右サイドは右メニュー中部(新デザイン用)テンプレートに設定する。
<div id="side_banner_list">
<ul class="banner_list">
<li><a href="リンク先URL"><img src="画像URL" alt=""></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt=""></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt=""></a></li>
</ul>
</div><!-- /#side_banner_list -->
