スマホ用のインラインフレームで設置する検索窓用のHTMLファイル

Question

スマホの商品ページでスクロールしても付いてくるショップ内検索窓を設置したいと希望しております。
以下の、他の方の質問に対する解答を拝見させて頂きました。

【過去の解答】
「たとえば、インラインフレームで設置する検索窓用のHTMLファイルをご用意の上、
https://forum.ec-masters.net/post_view.php?id=5413
上記URLにて回答した方法で、商品画像の上に追加したり、
https://forum.ec-masters.net/post_view.php?id=6001
上記URLにて回答した方法で、スクロールすると表示されるヘッダーとして設置したり
することが可能となっております。」

【上記ご解答に対する新たな質問です】
HTML初心者でお恥ずかしいのですが、、
「インラインフレームで設置する検索窓用のHTMLファイル」が
どのようなHTMLになるのかが、わかりません。
現在すでにあるようなごくプレーンなスマホの幅の検索枠、「(店名）から探す」【検索】
が、スクロールしても付いてくるようにしたいのですが、ご教授頂けますようよろしくお願い致します。

Answer

ECマスターズの田中です。

ショップ内検索窓の設置について、
確認の上、改めてご返答いたします。

Answer

ECマスターズの田中です。

それでは、基本的なショップ内検索窓を設置するための
HTMLファイルの内容を添付いたしますので、
必要に応じてとの間に
スタイルシートを加えていただくなどして、
見た目の調整を行ってご利用ください。

ご利用の際、ご注意いただく点が２つございます。

最初に、
楽天で検索を行う場合は
データを「EUC」という文字コードを利用して
送信しないと、文字化けを起こしてしまいますので、
HTMLファイルを作成される際に

Mery
http://forest.watch.impress.co.jp/library/software/mery/

などの、高機能なテキストエディタを
ご利用の上、EUCの形式で保存してください。

たとえば、上記Meryの場合は、
名前を付けて保存を行う際に、
「エンコード」を「日本語 (EUC)」にして
保存していただく形になります。

次に、
ソースの中にある
ショップID・ショップURLを、
クロネコさんのショップの情報にご変更ください。

ショップIDは、RAC番号の上6桁、
もしくは店舗内検索画面のURLに含まれる数字6桁をご記載ください。
ショップURLは、https://www.rakuten.co.jp/◯◯◯/の、
◯◯◯の部分をご記載ください。
例）https://www.rakuten.co.jp/soukai/ の場合、
　　ショップIDは203677、ショップURLはsoukaiになります。


===下の行よりHTMLソース===========




.body {
  margin: 5px;
}
input, button {
  font-size:  15px;
  height: 30px;
  vertical-align: bottom;
}
#sitem {
  width: calc( 100% - 70px );
}











検索

Answer

ご連絡ありがとうございます。

■【質問１】保存してGOLDにアップするファイル名の決まりを教えて下さい。
末尾(拡張子?)は何を使うのでしょうか？
今回お知らせ頂いた上記のHTML,、また、以下の次の手順で使うファイルもお願いします。


■その次の手順の確認ですが、以下で間違いはないでしょうか？
　以前ご回答された内容を引用しています。
　一部良くわからず、質問を記入しました。

１、検索窓ヘッダーとして表示させるためのHTMLファイルを、楽天GOLD内に設置。
　(頂いて上記でファイル名を確認させて頂くHTMLソースのファイル）

２、下記の内容でCSSファイルを作成し、
楽天GOLD内に設置。　　
【質問２】CSSのファイル名の決まりを教えて下さい。
               

===== この下の行から ============
.spHeader {
display: block;
position: fixed;
left: 0px;
top: 0px;
z-index: 2;
width: 100%;
height: HTMLの内容の高さpx;　　　　　　　　　←30を入力？
}
#ipnsh-header, #rstTopSearch {
position: relative;
z-index: 3;
background: white;
}
===== この上の行まで ============
※HTMLの内容の高さは、実際の数値にご変更ください。

３、スマートフォン用共通説明文に
下記のHTMLタグを貼り付ける。
スライドすると出てくる独自ヘッダーを設定することができます。

===== この下の行から ============
　　　

===== この上の行まで ============

【質問３】以下の入れ替えがどの部分になるかが確信が持てません。
CSSファイルのURL　　　　　２、のファイルのURLで宜しいですか？
ヘッダー用ページのURL　　　１、のファイルのURLで宜しいですか？

以上、質問のご返答とご確認、間違っている箇所はお知らせ下さいますよう
どうぞよろしくお願い致します。

Answer

ECマスターズの田中です。


＞■【質問１】保存してGOLDにアップするファイル名の決まりを教えて下さい。
＞末尾(拡張子?)は何を使うのでしょうか？
「.html」をご利用ください。

＞【質問２】CSSのファイル名の決まりを教えて下さい。
拡張子は「.css」をご利用ください。

両ファイルにかぎらず、
楽天GOLDにアップロードされるファイル全てにおいて、
文字化けによるトラブルを避けるため、
ファイル名の部分も半角英数字でご記載をお願いします。


＞←30を入力？
余白部分も若干ございますので、
height: 40px;
で一度ご設定の上、実際の表示を見て増減していただきますようお願いします。


＞【質問３】以下の入れ替えがどの部分になるかが確信が持てません。
＞CSSファイルのURL　　　　　２、のファイルのURLで宜しいですか？
＞ヘッダー用ページのURL　　　１、のファイルのURLで宜しいですか？
はい、両方とも、仰るとおりのURLをご設定ください。

Answer

無事設置できました！
ファイル名は拡張子以外は任意でよかったのですね。
おすすめのエディタをご紹介いただき、余白部分など細かな点までご教授いただけて
HTML初心者でも無事設置できました。
ありがとうございました。