【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法
こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。
こんにちは！小学生の時、産卵期のカラスに頭をつつかれて、額から血を流したオガリア中村です。マタニティブルーな野生の動物には、近寄っちゃいけませんね、ホント。。
さて、前回の記事では楽天GOLDでスマートフォンページを作成する際必ず使うべき「viewport」についてお話させて頂きましたが。
今日は、楽天GOLDで作成したスマートフォンページに、「検索窓」を設置する方法についてご案内します。
検索窓設置前に必ず「文字コード」確認を！
文字コードとは？
文字や記号をコンピュータで扱うために、文字や記号一つ一つに割り当てられた固有の数字のこと。(IT用語辞典)
と言われてもよく分からないですが、HTMLの冒頭でよく見かける
・<meta charset="utf-8">
この箇所が、文字コードを指定する記述となります。
一般的にはutf-8が使用されていますが、楽天さんの場合はEUC-JPを使用しており、左記文字コードと異なる文字コードにてHTMLページを作成した場合、検索窓へ入力した文字が文字化けする可能性があります。
HTMLのMETA情報が下記になっているか、一度ご確認ください。
<meta charset="EUC-JP">
手順
それでは早速、検索窓を設置していきましょう！
- 以下のCSSをコピペで<head>～</head>内へ貼り付けます。
<style type="text/css"> <!-- /* [search] ----------------------------------------*/ #rstSearch { padding: 10px 5px; margin: 5px 0 0 0; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8f8f8), color-stop(1, #e0e0e0)); background: -webkit-linear-gradient(-90deg, #f8f8f8 0%, #e0e0e0 100%); background: -moz-linear-gradient(-90deg, #f8f8f8 0%, #e0e0e0 100%); background: -ms-linear-gradient(-90deg, #f8f8f8 0%, #e0e0e0 100%); background: linear-gradient(-90deg, #f8f8f8 0%, #e0e0e0 100%); text-align: left; } #rstSearch form { display: -webkit-box; display: -moz-box; display: -ms-box; display: box; } #rstSearch form > span { margin-right: 2%; width: 78%; } #rstSearch form > span > div { right: 0px !important; } #rstSearch input[type=text] { font-size: 15px; width: 100%; padding: 5px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #rstSearchSubmit { width: 20%; } #rstSearchSubmit input[type=submit] { padding: 0 10px; border: solid 1px black; font-weight: bold; font-size: 14px; color: #444; width: 100%; height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #ffffff), color-stop(0.5, #EDECF2)); background: -webkit-linear-gradient(-90deg, #ffffff 50%, #EDECF2 50%); background: -moz-linear-gradient(-90deg, #ffffff 0%, #EDECF2 100%); background: -ms-linear-gradient(-90deg, #ffffff 0%, #EDECF2 100%); background: linear-gradient(-90deg, #ffffff 0%, #EDECF2 100%); } --> </style> - 次に、以下のHTMLをコピペします。
<div id="rstSearch"> <form name="myForm" method="get" action="http://esearch.rakuten.co.jp/rms/sd/isearch/vc"> <input value="*******" type="hidden" name="sid"> <!-- ショップの店舗ＩＤ --> <span style="display: block; position: relative; overflow: hidden;"> <input type="text" placeholder="ショップ内から探す" name="sitem" id="sitem" class="clearValueButton" style="padding-right: 31px;"> <div style="position: absolute; height: 31px; width: 31px; top: 0px; cursor: pointer; display: none; right: 1269px;"> <img src="http://a.ichiba.jp.rakuten-static.com/com/img/home/iphone/top/btn.gif" style="position:absolute;top:50%;left:50%;margin-top:-10px;margin-left:-10px;"> </div> </span> <div id="rstSearchSubmit"> <input value="検索" type="submit"> </div> </form> </div>
※上記ソース着色箇所内、【*******】欄を「ショップID(数字5～7桁)」に必ず書き換える必要があります。
以上で検索窓の設置完了です！
えー本当に検索出来るの？ってときは、PCブラウザからスマフォ画面を閲覧する「smartphone simulator」をご活用くださいませ。
ご不明な点は、コメント欄やメール(ogaria@ogaland.com)にてお受付しております。オガリア中村までどうぞ～それではまた！
コメントはまだありません。