【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました!こちらからご確認できます。

【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法

こんにちは!小学生の時、産卵期のカラスに頭をつつかれて、額から血を流したオガリア中村です。マタニティブルーな野生の動物には、近寄っちゃいけませんね、ホント。。

さて、前回の記事では楽天GOLDでスマートフォンページを作成する際必ず使うべき「viewport」についてお話させて頂きましたが。

今日は、楽天GOLDで作成したスマートフォンページに、「検索窓」を設置する方法についてご案内します。

検索窓設置前に必ず「文字コード」確認を!

文字コードとは?

文字や記号をコンピュータで扱うために、文字や記号一つ一つに割り当てられた固有の数字のこと。(IT用語辞典)

と言われてもよく分からないですが、HTMLの冒頭でよく見かける
 ・<meta charset="utf-8">
この箇所が、文字コードを指定する記述となります。

一般的にはutf-8が使用されていますが、楽天さんの場合はEUC-JPを使用しており、左記文字コードと異なる文字コードにてHTMLページを作成した場合、検索窓へ入力した文字が文字化けする可能性があります。

文字コードが異なる為に文字化けする楽天スマホ検索窓

HTMLのMETA情報が下記になっているか、一度ご確認ください。

<meta charset="EUC-JP">

手順

それでは早速、検索窓を設置していきましょう!

  1. 以下の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>
    
  2. 次に、以下の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"> <!-- ショップの店舗ID -->
        
        <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)にてお受付しております。オガリア中村までどうぞ~それではまた!

  1. コメントはまだありません。

  1. トラックバックはまだありません。