こちらの検索窓の設置の仕方を教えてください。

Question

お世話になっております。
こちらのページの一番下のフロート部分の水色の帯の検索窓の設置の仕方を教えてください。

[【楽天市場】【送料無料】IHにも対応 フライパン セット！ 鋳物製＋ 内面4層＋外面3層のがっちりコート！ ストロングマーブル キャスト システム フライパン セット ガラス蓋 フライパン マルチポット 鍋 セット 鍋セット パール金属 【H\-4061】：グットライフショップ](https://item.rakuten.co.jp/goodlifeshop/ph-4061/)###HR######IMG0e1605ae3fdfa61df7053fba482d7a24a.jpegIMG0###

Accepted Answer

ECマスターズの土屋です。

>お世話になっております。
>こちらのページの一番下のフロート部分の水色の帯の検索窓の設置の仕方を教えてください。

事務局側で
ソースコードを作成させていただきました。

下記のソースコードを以下の手順で
「PC用商品説明文」等、HTMLが記述可能な箇所に
反映をお願いいたします。

(1)
htmlファイルを作成し
下記のソースコードをコピーし貼り付けを行う。

(2)
作成したhtmlを楽天GOLDにアップロードを行う。

(3)
iframeタグを用意して頂き
下記の様に記載する。


◯は、店舗URL
✖、はhtmlファイルの名前

(4)
作成したiframeタグを
RMSの
「PC用商品説明文」に貼り付けを行い更新をお願いします。

またhtmlファイルをアップロードする際の注意点が
２つございます。
１つ目は
楽天GOLDの同じ階層に同じhtmlのファイル名が存在しないか、
ご確認の上アップロードをお願いいたします。

２つ目は
正しくサイト内検索を行う為に
下記のソースコードの
「店舗内検索のURLに含まれる６桁の数字」
を
さて様の数字に置き換え
ご利用くださいませ。

どうぞよろしくお願いします。

【ソースコード】







    
    
    
    Document
    
        li {
            list-style-type: none;
        }
        .none {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .search {
            background-color: aqua;
            overflow: hidden;
        }
        .search form {
            float: right;
            margin-right:120px;
        }
        .search form span {
            margin-right: 10px;
            float: left;
        }
    



    
        
            
            
                商品検索はこちら

Answer

土屋さんありがとうございます。

イメージ通り無事設置することできました。
ありがとうございました。

Answer

お世話になっております。

問題なくいい感じに使えているのですが、帯の縦の幅をもう少し短くしたいのですがサイズはどこで変更すれば良いのでしょうか？

Answer

ECマスターズの土屋です。

>問題なくいい感じに使えているのですが、帯の縦の幅をもう少し短くしたいのですがサイズはどこで変更すれば良いのでしょうか？

こちらですが
iframeタグに直接記述されている
style属性の中に、
height: 〇〇px;を記述して頂けますと、
高さを変更することができます。

〇〇の部分は
さて様の任意の高さを指定してくださいませ。

どうぞよろしくお願いします。

Answer

お世話になっております。

今やっているサービスで下の方にキャンペーンバーナーが出るため
前回いただいた検索窓を上に移動したいと思っています。

やり方のアドバイスお願いいたします。###HR######IMG0e06d8f9ced5d787c92665a19881ae243.jpegIMG0###

Answer

ECマスターズの田中美帆です。

> 今やっているサービスで下の方にキャンペーンバーナーが出るため
> 前回いただいた検索窓を上に移動したいと思っています。

> やり方のアドバイスお願いいたします。

ご案内しているソースコードに
以下の記述があり、

-----
.none {
position: fixed;
bottom: 0;
width: 100%;
}
-----

bottom: 0;
は、下部からの位置を０にする
という指定をしていますので、

top: 0;
に修正していただくことで、
上部からの位置を０にする
という指定になります。

また、RMSに登録するiframeは、
以下のように変更してください。

-----

-----

iframe内のtopの数値を修正することで
ページ上部からの距離を調整できますので、
実際に表示をご確認いただきながら
調整をお願いいたします。

Answer

田中美帆さんありがとうございます。

無事設置できました！
こちら左側寂しいのでイベントバナーくん入れたいのですがどの用に入れたらいいでしょうか？
よろしくお願いいたします。###HR######IMG094968d4dc704f540e9ef7db77bacce9d.jpegIMG0###

Answer

ECマスターズの田中美帆です。

> こちら左側寂しいのでイベントバナーくん入れたいのですがどの用に入れたらいいでしょうか？

以下のような表示イメージで
お間違いないでしょうか。

https://ec-masters.gyazo.com/4d3ed59e17951ea21bbac5bd198952ee

HTMLを修正しましたので、
ご確認よろしくお願いいたします。


----- 以下から -----








Document

li {
list-style-type: none;
}
.none {
position: fixed;
top: 0;
width: 100%;
background-color: aqua;
}
.search {
overflow: hidden;
}
.event {
float: left;
margin-left: 120px;
}
.search form {
float: right;
margin-right:120px;
}
.search form span {
margin-right: 10px;
float: left;
}











商品検索はこちら













----- 以上まで -----



︙


の中に、イベント告知君のHTML
（iframeタグ）を記述してください。

なお、仕様上、イベント告知君の部分は
背景が白色になってしまいますので、
あらかじめご了承ください。