PCのフローティングバナー　検索窓付

Question

いつも大変お世話になっております。

PCの方で楽天の検索窓を隠そうと

https://ec-masters.club/forum/post_view.php?id=2463&word[]=%E6%A4%9C%E7%B4%A2%E7%AA%93


上記を参考にしてとりあえずの
画像（横700px　×　縦200px）を作って、


 
 div.pcfloatheader {
 z-index: 9999999999;
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 200px;
 }
 
 
 
 
 




ヘッダーにupしたところ、左よりになってしまい、楽天のバナーを隠すことが出来ませんでした。

そこで質問です。

1）作りたいのは下記でも見本として出てきた画像は中央配置で余白はピンクなのですが、画像の大きさ、設定はどのようにしたらよかったのでしょうか。

2）一緒に「店舗内検索窓」をつけることは可能でしょうか。



お手数をおかけいたしますがよろしくお願いいたします。

Answer

ECマスターズの田中です。

＞1）作りたいのは下記でも見本として出てきた画像は中央配置で余白はピンクなのですが、画像の大きさ、設定はどのようにしたらよかったのでしょうか。

最初に、設定に関してご説明いたします。

いただいたHTMLタグの中に、インラインフレームで埋め込むURLとして
画像ファイルのURLが指定されておりますが、
本来は、HTMLファイルを埋め込んで表示させるのが、正しい使い方となります。

ご参考いただいた過去質問の例の場合、



このように、src属性に
http://www.rakuten.ne.jp/gold/auc-ruirue/header/topbar/topbar.html
を指定することで、topbar.htmlの内容を、ページ内に埋め込んでおりますので、
あいぴーさんも、ヘッダーに表示させるためのHTMLファイルを
楽天GOLD内にご用意ください。
HTMLファイル作成の上で、不明な点がありましたら、
再度ご返信いただきますようお願いします。

上記、topbar.htmlでは、スタイルシートを駆使して、
表示幅に合わせて表示するバナーが変化するようになっておりますが、
表示させるバナーが１つだけであれば、
背景色を指定したタグの中央に、タグでバナーを埋め込んでいただく形式ですと、
バナーの見た目を損なわずに表示させることができます。

なお、画像の大きさについてですが、
今回は画面上に固定させるバナーを設置しようとしておりますので、
あまり高さが高すぎるバナーを設置しようとすると、
お客様の視界を大きく遮る形になり、
不快感と不便さを感じさせる可能性がありますのでご注意ください。

ご参考までに、
先述のtopbar.htmlに設置されたバナーの高さは80px、
topbar.html全体の高さは102px、
楽天の画面固定ヘッダーの高さは56px、
あいぴーさんのショップ用看板の横幅は800px、
となっております。

＞2）一緒に「店舗内検索窓」をつけることは可能でしょうか。

HTMLファイルの中に、検索窓を設置するHTMLタグを挿入することで可能です。
下記HTMLタグをご参照ください。

===== この下の行から ================









===== この上の行まで ================

ショップID、ショップURLを、実際の値に置き換えてご利用ください。
ショップIDは、RAC番号の上6桁、もしくは店舗内検索画面のURLに含まれる数字6桁です。
例）http://www.rakuten.co.jp/soukai/ の場合、
　　ショップIDは203677、ショップURLはsoukaiになります。

なお、

上記タグを入れることで、在庫あり・注文可能商品のみを検索することができます。
全商品を対象にしたい場合は、同タグを削除してください。

最後から2行目、送信ボタン用のinputタグは、
いただいたHTMLタグのように、
をご利用いただいても結構です。
送信ボタンを画像で設置する場合や、type="submit"だと表示ズレが起こる場合に便利です。

Answer

田中様

　お世話になっております。


　全く違うことをしていたようで・・お手数おかけいたします。



 ＞あいぴーさんも、ヘッダーに表示させるためのHTMLファイルを

 ＞楽天GOLD内にご用意ください。

まずはGOLDに「topbar.html」ファイルをupするということですよね。

　upするのは出来ると思いますがどのようなファイルを作るのかがわかりません。

また、up先に指定がありましたらお教え願います。

お手数をおかけいたしますがよろしくお願いいたします。

Answer

ECマスターズの田中です。


＞どのようなファイルを作るのかがわかりません。

画面に固定表示させたい見た目を、実際に表示させるためのHTMLファイルをご用意ください。

HTMLファイルを手書きで作成される際は、
編集中の見た目をリアルタイムで確認できる、
Liveweaveというサービスが便利です。
http://liveweave.com/

たとえば、１つのバナーを中央に置き、左右を1色（今回はpinkとします）でベタ塗りにするような見た目でしたら、
下記のような内容でHTMLファイルを作成してください。

===== この下の行から ================



TopBanner

body{ margin:0; padding:0; }
#banner{ background-color:pink; text-align:center; }






  





===== この上の行まで ================
※バナー画像URLを実際のURLに変えて、また、
背景色をピンク以外にする場合は、タグ中の「pink」を別の色に変えて
ご利用ください。


＞また、up先に指定がありましたらお教え願います。

GOLD内であれば、特に指定はありません。
整理しやすいフォルダに設置していただいた後、
タグのsrc属性に、HTMLファイルのURLをご記入ください。

Answer

田中様
　
　ありがとうございます！
とりあえず、バナーは出来て隠すことが出来ました！


ただ、検索窓が表示されません。




＞HTMLファイルの中に、検索窓を設置するHTMLタグを挿入することで可能です。
 ＞下記HTMLタグをご参照ください。

これは下記のhtmlの中に



===== この下の行から ================
 
 
 
 TopBanner
 
 body{ margin:0; padding:0; }
 #banner{ background-color:pink; text-align:center; }
 
 
 
 

 
 
 

 
 
 
 ===== この上の行まで ================


下記を挿入するという意味とは違いますか？
===== この下の行から ================
 
 
 
 
 
 
 
 
 
 ===== この上の行まで ================

上記の方法で、RMSのプレビューの中では「バナー下の左端」に小さく
検索窓が表示されたのですが、実際の画面では表示されず、色々試してみたのですが、
バナー本体がおかしくなってしまうと大変なので、
今は検索窓部分は削除しました。

何度も申し訳ございませんが検索窓を表示する方法をもう一度お願いします。

Answer

ECマスターズの田中です。

検索窓を表示する方法は、おっしゃる通りの方法で間違いなく、
実際にお作りいただいたHTML内にも
問題なく入っていることを確認いたしました。

実際に表示されていない原因についてですが、
HTMLファイルを埋め込むタグの高さが
バナーの高さと一致しているため、
検索窓が見えない部分に隠れてしまっております。

そのため、iframeを表示させる高さを高くする、
バナーを表示させる高さを低くする、などして、
検索窓の部分まで見えるようにする必要があります。

なお、今のバナーの高さでも、
画面上部に固定される圧迫感が強いので、
バナーの高さを低くして表示させることをオススメします。

Answer

田中様

　お世話になっております。
高さを調整して見えるようになりました。
ありがとうございます。

ただ、検索窓で検索をかけると表示が崩れ検索できない状態です。
どこを修正すればよろしいでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

失礼しました、
検索窓を設置する際に必要な注意点が1点ありました。

楽天の検索は、文字コードがEUC-JPのデータを送信しない場合、
日本語が入力されると文字化けしてしまいますので、
HTMLの中に「このファイルはEUC-JPで作成されています」ということを示す
記述を行っていただいた後に、
HTMLファイルの文字コードをEUC-JPにして
保存しなおしていただけますでしょうか。

また、HTMLの中に「このファイルはEUC-JPで作成されています」ということを示す
記述を加えていただくのとは別途で、
iframeで埋め込んだ検索窓の結果を、
iframe内ではなく、ページ全体で表示させる設定も必要なので、

HTMLソース、タグの直後に、


という二行を加えていただきますようお願いします。

文字コードを変更して保存する際は、

Mery
http://www.forest.impress.co.jp/library/software/mery/

のような、高機能でフリーなテキストエディタをご利用いただくと便利です。

Meryを起動し、HTMLの内容を貼り付けて、
名前を付けて保存する際に、
「エンコード(E):」を「日本語(EUC)」に変更して保存してください。

Answer

田中様

早速の回答ありがとうございます。

過去質問を見て文字コードだろうなと思い、保存をEUCに変えてみたのですが、変わらなくて。
ありがとうございました直りました！

フリーテキストエディタも違うものを使っていたのですが、使いづらかったのでありがとうございます。

バナーの高さはギリギリ隠れるように設定しましたが、まだ圧迫感はありますか？

また、題名を「フローティングバナー」としましたがこれは「固定バナー」の作り方に変更した方がよろしいでしょうか？
（題名の変更ができるのであれば）

Answer

ECマスターズの田中です。

＞バナーの高さはギリギリ隠れるように設定しましたが、まだ圧迫感はありますか？

圧迫感については前回よりは少なくなっておりますが、
常に画面上に表示されているので完全に無くすことはできないことと、
クリックできるバナーのように見えてクリックできない、
検索窓の背景がないためにページ内容に混ざって見えづらい、
といった問題がありますので、

他のショップが設置している固定バナーをご覧いただき、
どのような情報やリンクを掲載しているか
ご参考の上、改善していただきますようお願いします。

＞題名を「フローティングバナー」としましたがこれは「固定バナー」の作り方に変更した方がよろしいでしょうか？

過去質問にも、題名を「フローティングバナー」としている質問は多数ありますので
現在のままで結構です。

Answer

田中様

ありがとうございます。

バナーの中身はこれから改善していきます。

ちなみに検索窓をバナーの中（画像の左　ピンクの背景場所）に表示させることは可能でしょうか？
また検索窓のサイズも大きくしたいのですが。

お手数をおかけいたしますがよろしくお願いいたします。

Answer

ECマスターズの橋本です。

当ご質問に関しては、追って担当より回答させていただきますが、
少しお時間をいただければと思います。宜しくお願いいたします。

Answer

ECマスターズの田中です。

＞検索窓をバナーの中（画像の左　ピンクの背景場所）に表示させることは可能でしょうか？
可能ですが、ブラウザの表示幅が狭い場合、
検索窓がバナーの上に乗る、もしくはバナーに隠れることを
予めご承知おきください。
（下記方法の場合は、必ず検索窓がバナーの上に乗るようになります）

最初に、topbar.htmlのタグを中身ごと、
バナー用のタグとタグの間に
移動させてください。

次に、タグとタグの間を
下記のように修正することで、
検索窓がピンク背景部分の左下に移動します。

===== この下の行から ================
body{ margin:0; padding:0; }
#banner{ background-color:pink; text-align:center; position: relative; }
#banner img{ vertical-align: bottom; }
#banner form{ position: absolute; bottom: 0px; left: 0px; }
===== この上の行まで ================

＞また検索窓のサイズも大きくしたいのですが。

上記と同様、タグとタグの間に、
「input[type="text"]」に対する規則を加えることで大きくできます。

文字の大きさを変えることで、自動的にサイズが変化します。
例）input[type="text"]{ font-size: 15pt;  }

widthとheightで、高さと横幅に固定の値を指定することもできます。
例）input[type="text"]{ width: 100px; height: 30px; }

なお、送信ボタンの見た目も合わせて変更される際は、
スタイルシートで修正しようとすると複雑になるので、
先述のをご利用いただき、
ボタン用の画像ファイルを設置していただく方法を
オススメいたします。

Answer

田中様

ありがとうございます。
設置できました。
バーの内容はこれから変えていきますが、希望通りになりました、
色々お手数をおかけいたしました、ありがとうございました。

PCのフローティングバナー 検索窓付

PCのフローティングバナー　検索窓付