今回は楽天サイトを一から作る際の足掛かりとして利用できる、
楽天ショップヘッダーのテンプレートをいくつか作ってみました。
最終的にはこのような形のデザインやこのような形のデザインが実現できるテンプレートの作成方法＆配布までお伝えしようと思います。
Sponsored Link
こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。
「MGSV TPP」が面白すぎて睡眠を削ってます。
今後は「ブラッドボーンのDLC」に「MHX」、来年には「ダークソウル3」に「スターオーシャン5」に「FF15」に「キングダムハーツ3」に…
僕の妻も「アサシンクリード シンジケート」と「龍が如く 極」「龍が如く6」とテレビとPS4の奪い合いによる、家族間の血で血を洗う骨肉の争いが加速しそうです。
さてさて今回は先ほどお伝えしたとおり「楽天ショップのヘッダーデザインテンプレート」をいくつか作成してみました。
店舗をオープン、またはリニューアルしたいけども…デザインとかはちょっと苦手だな…
という方の助けになれればとてもとても幸いに思います。
というわけでシンプルに楽天を運営する上での定石をおさえた5つの形をご用意しました。
- 1. 必要最低限の情報を！すべての基本になるヘッダーの形。
- 2. 大きな背景画像を利用することでイメージを豊かに。
- 3. 一つステップアップ。店舗の情報やお勧めしたいキーワードへの導線を確保。
- 4. 大きな写真を動きのあるスライドショーで！イメージをダイレクトに伝えるデザイン。
- 5. 見せたい商品が多すぎる！バナーサイズに緩急をつけて視線誘導＆すべてを見せる試み。
※一言
楽天GOLD(無料)と契約している必要があります。
すべてに共通してリセットCSSを使用しています。
こちらのCSSを使用してください。
@charset "utf-8";
/* CSS Document */
/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
それではやってみましょう。
1. 必要最低限の情報を！すべての基本になるヘッダーの形。
まずはHTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天ヘッダーテンプレート</title> <link rel="stylesheet" href="common/css/reset.css" media="all"> <link rel="stylesheet" href="common/css/head_01.css" media="all"> </head> <body> <div class="gray top"> <ul> <li><a href="#">楽天TOP</a></li> <li><a href="#">お買い物カゴ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">ガイド/返品</a></li> <li><a href="#">会社概要</a></li> </ul> </div> <h1><a href="#"><img src="img/logo_01.png"></a></h1> <div class="gray navi"> <ul> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> </ul> </div> </body> </html>
続いて7行目で読み込ませている「head_01.css」がこちら
.gray {
background-color:#ccc;
}
.gray ul {
width:1000px;
margin:0 auto;
}
.top ul {
height:20px;
}
.top li {
height:15px;
margin-top:2px;
float:right;
font-size:10px;
line-height:16px;
padding:0 10px;
border-left:1px solid #333;
}
.top li:first-child {
padding-right:0;
}
.top li:last-child {
padding-left:0;
border-left:none;
}
.top li a {
text-decoration:none;
color:#333;
}
h1 {
text-align:center;
height:30px;
margin:45px auto 55px;
}
.navi ul {
height:60px;
text-align:center;
}
.navi li {
display:inline-block;
padding:0 10px;
}
以上でこちらの形が実装できます！
テキストの打ち替え、画像の差し替え、リンクの設定で簡単にカスタマイズできます。
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
2. 大きな背景画像を利用することでイメージを豊かに。
まずはHTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天ヘッダーテンプレート</title> <link rel="stylesheet" href="common/css/reset.css" media="all"> <link rel="stylesheet" href="common/css/head_02.css" media="all"> </head> <body> <div id="wrapper"> <div class="gray top"> <ul> <li><a href="#">楽天TOP</a></li> <li><a href="#">お買い物カゴ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">ガイド/返品</a></li> <li><a href="#">会社概要</a></li> </ul> </div> <div class="search"> <h1><a href="#"><img src="img/logo_01.png"></a></h1> <form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_blank"> <input class="text_box" type="text" name="sitem" placeholder="商品名などで検索"> <input value="検索" type="image" src="img/search_btn.gif" class="searchBtn" alt="検索"> <input value="311213" type="hidden" name="sid"> <input value="float" type="hidden" name="su"> <input value="時計・雑貨FLOAT" type="hidden" name="sn"> <input type="hidden" name="sv" value="6"> <input type="hidden" value="3" name="v"> <input type="hidden" name="g" value"0"> <input type="hidden" value="0" name="h"> <input type="hidden" value="腕時計 " name="u"> <input name="sitem" id="sitem" type="hidden"> <input type="hidden" name="min"> <input type="hidden" name="max"> </form> </div> <div class="gray navi"> <ul> <li><a href="#"><img src="img/button_02.png"></a></li> <li><a href="#"><img src="img/button_02.png"></a></li> <li><a href="#"><img src="img/button_02.png"></a></li> <li><a href="#"><img src="img/button_02.png"></a></li> <li><a href="#"><img src="img/button_02.png"></a></li> <li><a href="#"><img src="img/button_02.png"></a></li> </ul> </div> </div> </body> </html>
続いて7行目で読み込ませている「head_02.css」がこちら
#wrapper {
background-image:url(../../img/bg.jpg);
background-position:center;
}
.gray {
background-color:rgba(255,255,255,0.6);
}
.gray ul {
width:1000px;
margin:0 auto;
}
.top ul {
height:20px;
}
.top li {
height:15px;
margin-top:2px;
float:right;
font-size:10px;
line-height:16px;
padding:0 10px;
border-left:1px solid #333;
}
.top li:first-child {
padding-right:0;
}
.top li:last-child {
padding-left:0;
border-left:none;
}
.top li a {
text-decoration:none;
color:#333;
}
.search {
width:1000px;
height:30px;
margin:45px auto 55px;
}
.search * {
float:left;
line-height:30px;
}
h1 {
margin-right:10px;
}
.text_box {
width:865px;
height:19px;
border:3px solid #ccc;
line-height:25px;
font-size:10px;
margin-top:2px;
margin-right:10px;
text-indent:10px;
}
.searchBtn {
margin-top:2px;
}
.navi ul {
height:60px;
text-align:center;
}
.navi li {
display:inline-block;
padding:0 10px;
}
以上でこちらの形が実装できます！
テキストの打ち替え、画像の差し替え、リンクの設定で簡単にカスタマイズできます。
背景を表示している領域もCSSで高さを調整すればよりダイナミックで大胆なデザインに変更可能ですよ。
それが楽天の店舗にとってプラスになるかどうかは別ですが！
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
3. 一つステップアップ。店舗の情報やお勧めしたいキーワードへの導線を確保。
まずはHTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天ヘッダーテンプレート</title> <link rel="stylesheet" href="common/css/reset.css" media="all"> <link rel="stylesheet" href="common/css/head_03.css" media="all"> </head> <body> <div class="top"><p>店舗について簡単に説明をするテキストなどを入れます。テキストテキストテキストテキストテキスト。</p></div> <div class="info"> <h1><a href="#"><img src="img/logo_02.gif"></a></h1> <div class="shop"> <p><img src="img/tell.gif"></p> <p>営業時間 : 10：00 ～ 19:00 (土日祝休業)<br> MAIL : sampleaddress@sample.com</p> </div> <div class="center"> <p><img src="img/head_text.gif"></p> <ul> <li><a href="#">楽天TOP</a></li> <li><a href="#">お買い物カゴ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">ガイド/返品</a></li> <li><a href="#">会社概要</a></li> </ul> </div> </div> <div class="navi"> <ul> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> </ul> </div> <div class="search"> <div class="wrapper"> <form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_blank"> <input class="text_box" type="text" name="sitem" placeholder="商品名などで検索"> <input value="検索" type="image" src="img/search_btn.gif" class="searchBtn" alt="検索"> <input value="311213" type="hidden" name="sid"> <input value="float" type="hidden" name="su"> <input value="時計・雑貨FLOAT" type="hidden" name="sn"> <input type="hidden" name="sv" value="6"> <input type="hidden" value="3" name="v"> <input type="hidden" name="g" value"0"> <input type="hidden" value="0" name="h"> <input type="hidden" value="腕時計 " name="u"> <input name="sitem" id="sitem" type="hidden"> <input type="hidden" name="min"> <input type="hidden" name="max"> </form> <dl> <dt><img src="img/key_word.gif"></dt> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">はみ出さない範囲で個数調整</a></dd> </dl> </div> </div> </body> </html>
続いて7行目で読み込ませている「head_03.css」がこちら
.top {
background-color:#f5f4ea;
height:20px;
line-height:20px;
font-size:10px;
}
.top p {
width:1000px;
margin:0 auto;
}
.info {
width:1000px;
height:60px;
margin:45px auto;
}
.info h1 {
float:left;
}
.info .center {
width:346px;
margin:0 auto;
padding-top:15px;
}
.info .center li {
float:right;
font-size:10px;
padding:0 10px;
border-left:1px solid #333;
}
.info .center li:first-child {
padding-right:0;
}
.info .center li:last-child {
padding-left:0;
border-left:none;
}
.info .center li a {
text-decoration:none;
color:#333;
}
.info .shop {
float:right;
font-size:10px;
text-align:right;
}
.navi {
clear:both;
background-color:#ccc;
}
.navi ul {
height:60px;
text-align:center;
}
.navi li {
display:inline-block;
padding:0 10px;
}
.search {
margin-top:10px;
height:60px;
background-color:#f9f8f2;
}
.search .wrapper {
width:1000px;
height:60px;
margin:0 auto;
}
.search .wrapper * {
float:left;
}
.text_box {
width:234px;
height:19px;
border:3px solid #ccc;
line-height:25px;
font-size:10px;
text-indent:10px;
margin-top:17px;
}
.searchBtn {
margin-right:15px;
margin-top:17px;
}
.search .wrapper dt {
margin-right:15px;
}
.search .wrapper dd {
height:20px;
font-size:10px;
margin-top:22px;
margin-right:10px;
padding-right:10px;
border-right:1px solid #ccc;
}
.search .wrapper dd:last-child {
margin-right:none;
padding-right:none;
border-right:none;
}
以上でこちらの形が実装できます！
テキストの打ち替え、画像の差し替え、リンクの設定で簡単にカスタマイズできます。
おすすめキーワードという形で簡単にレコメンドを変更できるところが個人的に気に入っています。
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
4. 大きな写真を動きのあるスライドショーで！イメージをダイレクトに伝えるデザイン。
まずはHTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1"> <title>コピペで使える楽天ヘッダーテンプレート</title> <link rel="stylesheet" href="common/css/head_js_style.css" type="text/css" media="screen"> <link rel="stylesheet" href="common/css/reset.css" media="all"> <link rel="stylesheet" href="common/css/head_04.css" media="all"> <script src="common/js/jquery-1.10.2.min.js"></script> </head> <body> <div class="top"><p>店舗について簡単に説明をするテキストなどを入れます。テキストテキストテキストテキストテキスト。</p></div> <div class="info"> <h1><a href="#"><img src="img/logo_02.gif"></a></h1> <div class="shop"> <p><img src="img/tell.gif"></p> <p>営業時間 : 10：00 ～ 19:00 (土日祝休業)<br> MAIL : sampleaddress@sample.com</p> </div> <div class="center"> <p><img src="img/head_text.gif"></p> <ul> <li><a href="#">楽天TOP</a></li> <li><a href="#">お買い物カゴ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">ガイド/返品</a></li> <li><a href="#">会社概要</a></li> </ul> </div> </div> <div class="navi"> <ul> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> </ul> </div> <div class="search"> <div class="wrapper"> <form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_blank"> <input class="text_box" type="text" name="sitem" placeholder="商品名などで検索"> <input value="検索" type="image" src="img/search_btn.gif" class="searchBtn" alt="検索"> <input value="311213" type="hidden" name="sid"> <input value="float" type="hidden" name="su"> <input value="時計・雑貨FLOAT" type="hidden" name="sn"> <input type="hidden" name="sv" value="6"> <input type="hidden" value="3" name="v"> <input type="hidden" name="g" value"0"> <input type="hidden" value="0" name="h"> <input type="hidden" value="腕時計 " name="u"> <input name="sitem" id="sitem" type="hidden"> <input type="hidden" name="min"> <input type="hidden" name="max"> </form> <dl> <dt><img src="img/key_word.gif"></dt> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">はみ出さない範囲で個数調整</a></dd> </dl> </div> </div> <div id="slider" class="clearfix"> <ul class="clearfix"> <li> <a href="" target="_top"><img src="img/js01.gif" alt="image1"></a> </li> <li> <a href="" target="_top"><img src="img/js02.gif" alt="image1"></a> </li> <li> <a href="" target="_top"><img src="img/js03.gif" alt="image1"></a> </li> <li> <a href="" target="_top"><img src="img/js02.gif" alt="image1"></a> </li> <li> <a href="" target="_top"><img src="img/js03.gif" alt="image1"></a> </li> </ul> <p id="prev"><img src="img/arrow_prev.png" alt="" width="70" height="100" class="rollover" /></p> <p id="next"><img src="img/arrow_next.png" alt="" width="70" height="100" class="rollover" /></p> <!-- /slider --> </div> <script src="common/js/slider.js" type="text/javascript"></script><!-- /slider --> <script src="common/js/jquery.easing.1.3.js" type="text/javascript"></script><!-- /slider --> </body> </html>
続いて9行目で読み込ませている「head_04.css」がこちら
.top {
background-color:#f5f4ea;
height:20px;
line-height:20px;
font-size:10px;
}
.top p {
width:1000px;
margin:0 auto;
}
.info {
width:1000px;
height:60px;
margin:45px auto;
}
.info h1 {
float:left;
}
.info .center {
width:346px;
margin:0 auto;
padding-top:15px;
}
.info .center li {
float:right;
font-size:10px;
padding:0 10px;
border-left:1px solid #333;
}
.info .center li:first-child {
padding-right:0;
}
.info .center li:last-child {
padding-left:0;
border-left:none;
}
.info .center li a {
text-decoration:none;
color:#333;
}
.info .shop {
float:right;
font-size:10px;
text-align:right;
}
.navi {
clear:both;
background-color:#ccc;
}
.navi ul {
height:60px;
text-align:center;
}
.navi li {
display:inline-block;
padding:0 10px;
}
.search {
margin-top:10px;
height:60px;
background-color:#f9f8f2;
}
.search .wrapper {
width:1000px;
height:60px;
margin:0 auto;
}
.search .wrapper * {
float:left;
}
.text_box {
width:234px;
height:19px;
border:3px solid #ccc;
line-height:25px;
font-size:10px;
text-indent:10px;
margin-top:17px;
}
.searchBtn {
margin-right:15px;
margin-top:17px;
}
.search .wrapper dt {
margin-right:15px;
}
.search .wrapper dd {
height:20px;
font-size:10px;
margin-top:22px;
margin-right:10px;
padding-right:10px;
border-right:1px solid #ccc;
}
.search .wrapper dd:last-child {
margin-right:none;
padding-right:none;
border-right:none;
}
他にも複数CSSやjsが含まれますが、
一式ダウンロードの中に含まれているものをそのまま読み込ませてください。
以上でこちらの形が実装できます！
先ほどのテンプレート3に大きなバナーを追加したことでより魅力的なサイトになりますよね。
最近では多くの店舗がこういった形を取り入れているのでぜひとも押さえておきたいデザイン。
HTML、CSS、js、画像を一式ダウンロードはこちらから。
Download
5. 見せたい商品が多すぎる！バナーサイズに緩急をつけて視線誘導＆すべてを見せる試み。
まずはHTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天ヘッダーテンプレート</title> <link rel="stylesheet" href="common/css/reset.css" media="all"> <link rel="stylesheet" href="common/css/head_05.css" media="all"> </head> <body> <div class="top"><p>店舗について簡単に説明をするテキストなどを入れます。テキストテキストテキストテキストテキスト。</p></div> <div class="info"> <h1><a href="#"><img src="img/logo_02.gif"></a></h1> <div class="shop"> <p><img src="img/tell.gif"></p> <p>営業時間 : 10：00 ～ 19:00 (土日祝休業)<br> MAIL : sampleaddress@sample.com</p> </div> <div class="center"> <p><img src="img/head_text.gif"></p> <ul> <li><a href="#">楽天TOP</a></li> <li><a href="#">お買い物カゴ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">ガイド/返品</a></li> <li><a href="#">会社概要</a></li> </ul> </div> </div> <div class="navi"> <ul> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> <li><a href="#"><img src="img/button_01.gif"></a></li> </ul> </div> <div class="search"> <div class="wrapper"> <form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_blank"> <input class="text_box" type="text" name="sitem" placeholder="商品名などで検索"> <input value="検索" type="image" src="img/search_btn.gif" class="searchBtn" alt="検索"> <input value="311213" type="hidden" name="sid"> <input value="float" type="hidden" name="su"> <input value="時計・雑貨FLOAT" type="hidden" name="sn"> <input type="hidden" name="sv" value="6"> <input type="hidden" value="3" name="v"> <input type="hidden" name="g" value"0"> <input type="hidden" value="0" name="h"> <input type="hidden" value="腕時計 " name="u"> <input name="sitem" id="sitem" type="hidden"> <input type="hidden" name="min"> <input type="hidden" name="max"> </form> <dl> <dt><img src="img/key_word.gif"></dt> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">テキスト</a></dd> <dd><a href="#">はみ出さない範囲で個数調整</a></dd> </dl> </div> </div> <div class="bnrs"> <table width="1000" height="360" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="5"><a href="#"><img src="img/bnr_01.gif"></a></td> <td rowspan="5" width="10" height="360"> </td> <td rowspan="5" width="190" height="360"><a href="#"><img src="img/bnr_02.gif"></a></td> <td rowspan="5" width="10" height="360"> </td> <td width="330" height="120"><a href="#"><img src="img/bnr_03.gif"></a></td> <td rowspan="5" width="10" height="360"> </td> <td width="110" height="120"><a href="#"><img src="img/bnr_06.gif"></a></td> </tr> <tr> <td width="330" height="10"> </td> <td width="110" height="10"> </td> </tr> <tr> <td width="330" height="110"><a href="#"><img src="img/bnr_04.gif"></a></td> <td rowspan="3" width="110" height="230"><a href="#"><img src="img/bnr_07.gif"></a></td> </tr> <tr> <td width="330" height="10"> </td> </tr> <tr> <td width="330" height="110"><a href="#"><img src="img/bnr_05.gif"></a></td> </tr> </table> </div> </body> </html>
続いて7行目で読み込ませている「head_05.css」がこちら
.top {
background-color:#f5f4ea;
height:20px;
line-height:20px;
font-size:10px;
}
.top p {
width:1000px;
margin:0 auto;
}
.info {
width:1000px;
height:60px;
margin:45px auto;
}
.info h1 {
float:left;
}
.info .center {
width:346px;
margin:0 auto;
padding-top:15px;
}
.info .center li {
float:right;
font-size:10px;
padding:0 10px;
border-left:1px solid #333;
}
.info .center li:first-child {
padding-right:0;
}
.info .center li:last-child {
padding-left:0;
border-left:none;
}
.info .center li a {
text-decoration:none;
color:#333;
}
.info .shop {
float:right;
font-size:10px;
text-align:right;
}
.navi {
clear:both;
background-color:#ccc;
}
.navi ul {
height:60px;
text-align:center;
}
.navi li {
display:inline-block;
padding:0 10px;
}
.search {
margin-top:10px;
height:60px;
background-color:#f9f8f2;
}
.search .wrapper {
width:1000px;
height:60px;
margin:0 auto;
}
.search .wrapper * {
float:left;
}
.text_box {
width:234px;
height:19px;
border:3px solid #ccc;
line-height:25px;
font-size:10px;
text-indent:10px;
margin-top:17px;
}
.searchBtn {
margin-right:15px;
margin-top:17px;
}
.search .wrapper dt {
margin-right:15px;
}
.search .wrapper dd {
height:20px;
font-size:10px;
margin-top:22px;
margin-right:10px;
padding-right:10px;
border-right:1px solid #ccc;
}
.search .wrapper dd:last-child {
margin-right:none;
padding-right:none;
border-right:none;
}
.bnrs {
width:1000px;
margin:10px auto 0;
clear:both;
line-height:0;
}
以上でこちらの形が実装できます！
動きのあるスライダーは店舗に彩を添えてくれますが、見逃されるバナーがあるということも忘れてはならないポイント。
そういった部分が気になる際は今までどおり、バナーをすべて表示したテンプレートがいいかもしれませんね。
もちろん両方の合わせ技もアリだと思います！
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
最後に
いかがでしたでしょうか。
店舗をオープン、またはリニューアルに際した初期の段階で、足掛かりになるようなテンプレートがあればなぁ。
と思い立ち作ってみました。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。
東京ゲームショウ行きたい東京ゲームショウ行きたい東京ゲームショウ行きたい。
楽天サイトでフルスクリーン商品ページをつくる！背景画像を使ったデザインの方法。
ショップ運営でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。
ショップ運営のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）
06-6271-7761
ABOUT ME
- 外部デザイナーTwitter:@zeelesan
- 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧
Recent Posts
2016.04.18ECたったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.04.13EC楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.02.04EC独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
2016.01.14ECデフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
楽天の限界を超える！様々な指定が可能なユーザビリティの高い検索フォームの実装方法。
コピペでOK！楽天サイドナビのテンプレートを作ってみました。縦長解消ですっきりシンプルに！
![[1/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【カゴボタン編】](http://www.billionplan.com/wp/wp-content/uploads/2015/07/rakuten_cart_css_01-150x150.jpg)
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。
初心者です。
いろいろと参考にさせていただいております。
テンプレートの１、４を試してみたのですが、
css、html(画像、文字、リンク等変更済)を楽天GOLDへアップロードし、
RMSのヘッダーに、↓↓
を入力し確認すると、きれいに表示されるのですが、
ヘッダーのリンクをクリックすると、
一つのウィンドウの中にまた少し小さめのウィンドウがでてきてしまいます。
それを繰り返すと、どんどん小さなウィンドウができてしまいます。
ウィンドウの中に、スクロールする小さなウィンドウがでます。
説明がへたくそですみません、、。
ヘッダーの上の楽天の検索バーが一つのウィンドウにたくさんでてきます。
手間な質問してしまい申し訳ないですが、
ぜひよろしくお願いいたします。
すいません
無事できました！
加藤さん、無事できたようでよかったです。
リンクにターゲット設定が出来ていなかったんですかね？
初めまして★
初心者ですが宜しくお願いします。
テンプレート４のナビ部分をドロップダウンメニューにしたいのですが、なかなか上手くいきません…。
お手数ですが何かアドバイスをお願い致します(>_<)
めぐさんこんにちは。
ドロップダウンメニューですか、最近がメガドロップダウンの店舗も増えてきて
楽天でもトレンドとして目立つようになってきましたね。
ちょっとこのコメントエリアで具体的にコーディングの指示などは難しいですが
以下のようなページのサンプルを参考にされてはいかがでしょうか？
http://weboook.blog22.fc2.com/blog-entry-408.html
あまりにも行き詰りすぎてついつい質問しちゃいました(>_<)
教えて頂いたページを参考に頑張ってみます♪
もし出来なかったら依頼させて頂きます(笑)
ご丁寧にありがとうございました★
めぐさん
いえいえ、具体的にお役に立てず申し訳ないです。
最近はメガドロップダウンでのご依頼も数件頂いておりまして
やはりヘッダーで店舗の導線を確保する形がトレンド化してきてそうですね。
初めまして
いつも拝見させていただいております。
丁寧な解説でとても助かっております。
こちらスライダー画像の表示数を2枚か3枚にすることは可能でしょうか？
大変お手数をおかけいたしますがよろしくお願いいたします。
ナリさんこんにちは。
コメントありがとうございます！
スマートなやり方ではありませんがスライダーを構成している＜li＞を
＜li＞＜a href=”” target=”_top”＞＜img src=”img/js01.gif” alt=”image1″＞＜/a＞＜/li＞
＜li＞＜a href=”” target=”_top”＞＜img src=”img/js02.gif” alt=”image1″＞＜/a＞＜/li＞
＜li＞＜a href=”” target=”_top”＞＜img src=”img/js01.gif” alt=”image1″＞＜/a＞＜/li＞
＜li＞＜a href=”” target=”_top”＞＜img src=”img/js02.gif” alt=”image1″＞＜/a＞＜/li＞
＜li＞＜a href=”” target=”_top”＞＜img src=”img/js01.gif” alt=”image1″＞＜/a＞＜/li＞
＜li＞＜a href=”” target=”_top”＞＜img src=”img/js02.gif” alt=”image1″＞＜/a＞＜/li＞
上記のように同じ画像を複数並べることで対応可能だと思われます。
ご確認をお願いします！