【完全版】スマホページに「検索窓」を簡単設置する！4デザインのコピペテンプレート

楽天
Yahoo!

【完全版】スマホページに「検索窓」を簡単設置する！4デザインのコピペテンプレート

2016/10/14

お気に入りに追加する

「もう一声ッ!!!!」と大衆から言われてる夢を見たオガリア中村です。それ以外の状況が全く思い出せなくて悔しい。夢はよく「記憶の整理」だと言われますが、人生においてこの台詞を使ったケースが思い当たりません。

さて今日は、楽天GOLDを使って作成したスマホページに設置できる、「ショップ内検索まど」の作り方をご説明しますー！過去記事でも案内してましたが、今回はより簡単＆シンプルにしてみましたよッ!! しかも4デザインあるので、お好きにお使いくださいー。

そもそも楽天GOLDでスマホページってどうやって作るのよ！という方は↓のエントリーからご参考くださいまっせ。

■【1-1】楽天GOLDの仕組み
■【2-1】テキストエディタ「TeraPad」を設定しよう！
■【2-2】基本構成HTMLテンプレート
■【3-1】楽天GOLD接続ソフト「Ribrary」
■【3-2】HTMLファイルをアップロードして完了！

デモ

%e6%a5%bd%e5%a4%a9gold%e7%94%a8%e6%a4%9c%e7%b4%a2%e3%81%be%e3%81%a9

4デザインご用意しました！ショップの雰囲気に合わせて選べます。検索まどの下には「キーワード」を並べられますので、流行キーワード等お客様を引きつけるキーワードに書き換えてお使いくださいー。

ベースのHTML/CSS

<style type="text/css">
<!--
#search-form {
    padding: 12px;
    margin: 0 auto;
    font-family: メイリオ;
}
#search-form form {
    width: 100%;
    display: table;
    table-layout: fixed;
    font-size: 14px;
}
#search-form input[type=text] {
    display: table-cell;
    width: 100%;
    height: 38px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
}
#search-form .search-button {
    display: table-cell;
    vertical-align: top;
    width: 20%;
}
#search-form .search-button input[type="submit"] {
    width: 100%;
    height: 38px;
    font-weight: bold;
    color: #444;
    border: none;
    background: #ddd;
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
}
#search-form .search-keyword {
    list-style: none;
    padding: 0;
    margin: 12px auto 0;
}
#search-form .search-keyword li {
    display: inline-block;
    margin: 8px;
    font-size: 12px;
}

/* --↓ここに利用するデザインに合わせてCSSを追記-- */

-->
</style>

<div id="search-form" class="design-1">
  <form name="myForm" method="get" action="https://esearch.rakuten.co.jp/rms/sd/isearch/vc" accept-charset="EUC-JP">
    <input type="hidden" name="sid" value="******">
    <input type="text" name="sitem" id="sitem" placeholder="ショップ内から探す">
    <div class="search-button"><input type="submit" value="検索"></div>
  </form>
  <ul class="search-keyword">
    <li><a href="https://search.rakuten.co.jp/search/mall/検索キーワード1/?sid=******">キーワード1</a></li>
    <li><a href="https://search.rakuten.co.jp/search/mall/検索キーワード2/?sid=******">キーワード2</a></li>
    <li><a href="https://search.rakuten.co.jp/search/mall/検索キーワード3/?sid=******">キーワード3</a></li>
    <li><a href="https://search.rakuten.co.jp/search/mall/検索キーワード4/?sid=******">キーワード4</a></li>
  </ul>
</div>

まずは上記ソースをまるっとコピーして、HTMLファイル内の<body>～</body>タグ内に貼り付けます。CSSとHTMLはセットで貼っちゃって大丈夫ですよ！(HTMLの基本構成が分からない方はこちらのエントリーをどうぞ。)

あとは、ソース内で赤字の箇所を書き換えます。

書き換え箇所

/* –↓ここに利用するデザインに合わせてCSSを追記– */
この後に出てくる、各デザイン用のCSSをここにコピペします。↑の目印はまるごと消しちゃっても残しても影響ありません。
design-1
末尾の番号を利用したいデザインの番号に書き換えます。デザイン2番なら「design-2」になります。
******
ここには「ショップナンバー」を入れます。ショップナンバーは数字5～9桁ほどのものです。分からない場合、自ショップの商品を買い物かごに入れた時の買い物かごページURLを見れば確認できます。
例えば
```
https://ts.basket.step.rakuten.co.jp/rms/mall/bs/cart/?shop_bid=212145
```
の場合は「212145」がショップナンバーです。
<a href="">キーワード1</a>
ここは検索まど下に表示される、注目キーワードのテキスト・リンク先に書き換えます。リンク先URLには予め検索結果ページのURLが入っています。
```
https://search.rakuten.co.jp/search/mall/検索キーワード/?sid=******
```
「検索キーワード」は実際の検索キーワードに置き換えます。(日本語でおk）
URL末尾の「******」は、先ほどのショップナンバーに書き換えます。

それでは、各デザインの追記用CSSを↓でご確認くださいー！

デザイン1の追記用CSS

/* design-1
-------------------*/
#search-form.design-1 form{
    font-size: 16px;
}
#search-form.design-1 input[type=text] {
    border: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}
#search-form.design-1 .search-button input {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
#search-form.design-1 .search-keyword li a {
    color: #555;
}

デザイン2の追記用CSS


/* design-2
-------------------*/
#search-form.design-2 {
    background: url("背景画像のURL");
}
#search-form.design-2 input[type=text] {
    border: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
#search-form.design-2 .search-button input {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #111;
    color: #fff;
}
#search-form.design-2 .search-keyword {
    background: rgba(255,255,255,.9);
    border-radius: 4px;
    padding: 16px;
}
#search-form.design-2 .search-keyword li a {
    color: #333;
}

デザイン3の追記用CSS

/* design-3
-------------------*/
#search-form.design-3 input[type=text] {
    border: 1px solid #111;
}
#search-form.design-3 .search-button input {
    background: #111;
    color: #fff;
    margin-left: 2px;
}
#search-form.design-3 .search-keyword li {
    background: #aaa;
    padding: 8px;
    margin: 1px;
}
#search-form.design-3 .search-keyword li a {
    text-decoration: none;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

デザイン4の追記用CSS

/* design-4
-------------------*/
#search-form.design-4 {
    background: #232F3E;
}
#search-form.design-4 input[type=text] {
    border: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
#search-form.design-4 .search-button input {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #FCBB6A;
    color: #232F3E;
}
#search-form.design-4 .search-keyword li a {
    color: #fff;
}

お気に入りに追加する

この記事を書いた人

中村茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています！

繁盛レシピの人気記事3選！

4 件のコメント

wata より:

2019年8月9日 10:20 AM

こちらのページを利用させて頂いております、
いつもお世話になっております。
すみません、iframeの中にいれて、RMSの商品ページ内（スマホ用）に差し込むと検索がうまくできません。
なぜでしょうか、、、なぜだか全くわからず、、教えてください、よろしくお願い致します。

返信
- 中村茉実より:
  
  2019年8月22日 11:05 AM
  
  こんにちは、ご質問ありがとうございます^^
  こちらこそお世話になっております！
  
  iframeの中にいれて、RMSの商品ページ内（スマホ用）に差し込むと検索がうまくできません。
  
  こちらなのですが、上手く行かない時の症状を教えて頂いても宜しいでしょうか…？
  例)文字化けしている。画面が見切れる。押しても反応しない。
  
  また、対象ページのURLをご教示頂けますとスムーズです！
  (お差支え御座いましたら、ogaria@ogaland.com までメールにてご連絡くださいませ)
  
  よろしくお願い致します。
  
  返信
ケンより:

2020年3月18日 3:55 PM

こんにちは。

こちらのページを利用しようと思っていますが…、
作ったhtmlをどこにどのように設置したいいのかが分かりません。

勉強不足で…、教えて頂けませんか？
宜しくお願いいたします。

返信
- 中村茉実より:
  
  2020年3月19日 9:15 AM
  
  > ケンさま
  
  ご質問ありがとうございます！ogaRiaチームの中村です。
  記事をご参考いただき有難うございます。
  
  こちらのHTMLは、「楽天GOLDで作成したページ」へのみ設置ができます。
  (「楽天GOLD」についてはこちらの記事へまとめました。
  /sell_knowhow/smart_phone/2750 )
  
  ご連絡いただいたURLから貴社ショップを拝見したのですが、現在の貴社スマホトップは、楽天GOLDでなく「RMSから」作成されているようです。
  大変恐縮なのですが、RMSへは当記事のHTMLを設置することができません、、、
  
  先に挙げた記事にて、「楽天GOLDでスマホページを作る方法」と「テンプレート」をご紹介していますので、よろしければこちらより、楽天GOLDページをご作成くださいませ。
  どうぞよろしくお願い致します！
  
  返信