楽天でオリジナル 商品検索用の窓を作ろう

楽天　検索枠の作り方を紹介しようと思います～

楽天の標準検索枠では物足りない！
ヘッダーの下にとりつけてお客様に分かりやすく表示したい！
もっとオシャレにしたい！などなど、、、、

オリジナルの検索枠を作りたい方にお勧めです。

私は一から作成したので、
他サイト様や解説頂いているサイト様を見つつ、
作成したものなので至らぬ所があるかもしれませんが・・・

HTML、CSSの理解がある方なら作れると思います＾＾

まずパーツを作ります。
どのくらいの大きさの検索枠にするか、
どのくらいの大きさの検索ボタンにするか決めましょう！

そして、こんな感じで作ります！

gif形式かpng形式が好ましいでしょう。

HTMLに以下を貼り付けます

<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" class="search" target="_top">
<input type="hidden" name="sv" value="6" />
<input type="hidden" name="sid" value="●（店舗ID）" />
<input type="hidden" name="su" value="▲（店舗URL）" />
<input type="hidden" name="sn" value="■（店舗名）" />
<input class="waku" type="text" onfocus="if (this.value == '★（初期テキスト）') this.value = '';" onblur="if (this.value == '') this.value = '★（初期テキスト）';" name="sitem" value="★（初期テキスト）">
<input type="hidden" name="f" value="A" />
<input type="submit" value="" class="btn" />
</form>

楽天のサポートページでも、紹介されていました。

上記のサンプルでご案内しているHTMLタグは
このままでは使用できません。

必ず●（店舗ID）は6桁の店舗ID（受注番号の最初の6桁）、
▲（店舗URL）は店舗URL（店舗のトップページのrakuten.co.jp/の後ろの部分）、
■（店舗名）は店舗名に書き換えてください＾＾

★（初期テキスト）は、「キーワードを入れてください」「●●（ショップ名）で検索」など
最初に表示させるテキストを入れてください。

因みに、上のサンプルは枠をクリックした時に、初期テキストが消える仕様ですので
ご安心を！

次にCSSです。

画像を、それぞれsearch.gifとbtn.gifとします。

form.search{
    width: 420px;
    height: 35px;
    background:url(search.gif) no-repeat scroll 0% 0% transparent;
    padding: 0px 0px 5px 40px;
}

input.waku{
    font-size:18px;
    font-weight:bold;
    width: 355px;
    height: 35px;
    float: left;
    background: none repeat scroll 0% 0% transparent;
    border: 0px none;
    color: #666;
}

input.btn{
    width: 60px;
    height: 35px;
    float: right;
    background:url(btn.gif) no-repeat scroll 0% 0% transparent;
    border: 0px none;
    cursor: pointer;
}

form.searchでは、検索枠の大きさを決めます。
作った画像と同じ縦幅を指定します。（じゃないとずれて見えるよ）
横幅は、お好きな長さになるように調節してください。
そして、背景にsearch.gifを載せます。

input.wakuでは、枠の中に表示されているテキストなどの装飾を決めます。
ここでも、search.gifと同じ縦幅を指定します。
横幅は、お好きな長さになるように調節してください。

input.btnでは、検索ボタンの装飾を決めます。
btn.gifと同じ大きさを指定してください。
背景をbtn.gifを載せます。
あとはポインタの設定などなど・・・

因みに、検索枠と検索ボタンはフロートしています。ので、

<div id="searchframe" class="cf">
</div>

などで挟むなどしてください。
そして、クリアしてくださいね。

class=”cf”　は

/* micro clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
	overflow: hidden;
}

となっています。クリアフィックスの詳しい説明はこちら
http://kojika17.com/2013/06/clearfix-2013.html

検索枠の大きさは、ターゲットによって変更してください。
年齢層が高いサイトは、やはり検索枠も文字も大きいほうが見やすいですし、
自分が何を入力しているか一目で分かりますので、入力ミスがなくなります。

是非是非！作ってみてくださいね～＾＾