商品検索窓のカスタマイズについて

Question

いつもお世話になっております。

既存の商品検索窓を、デザインのあるものし、レフトナビの上に貼り付けをしたいのですが、タグとかで変えるのでしょうか？

宜しくお願い致します。

Answer

はい、HTMLタグを修正する形になります。

最初に、商品検索窓用のHTMLタグを、
埋め込みたい場所（レフトナビの先頭など）に
貼り付けていただきます。

商品検索窓用のタグがわからない場合は、
実際のショップのソースから抜き出してください。

以下の様に記載してある部分です。
（*****となっている3箇所は店舗によって異なりますので、
　必ずショップから探してご利用ください。）

======================








======================

このままですと、入力欄も検索ボタンも通常の見た目になりますので、
入力欄は　　このタグに、
検索ボタンは　　このタグに
それぞれスタイルシートを設定することで、
見た目を修正することができます。

例）入力欄を画像に変えるには

↓


まずは商品検索窓を貼り付けてから、
スタイルシートによるデザイン変更をお試しください。

なお、貼り付けていただいた画像をそのまま使おうとすると
レフトナビの幅より広く、横にはみだしてしまいますので
ご注意ください。

Answer

お世話になっております。
遅くなりましたが、やってみましたが・・・。
うまくいかないです。

商品検索窓は何とか貼り付けました。
しかし検索ボタンがをどのようにしたらよいのでしょうか？
検索窓の虫眼鏡の横から入力したいのですが、左端から
カーソルがきてしまいます。

　
この部分のどこに検索ボタンの画像を貼るのでしょうか？

あと、
（*****となっている3箇所は店舗によって異なりますので、
 　必ずショップから探してご利用ください。）
　　↑
こちらの意味がよくわからないのですが・・・？
すみません。
理解するのに時間がかかりますが、ご指導お願い致します。

Answer

> 商品検索窓は何とか貼り付けました。
> しかし検索ボタンがをどのようにしたらよいのでしょうか？
> 検索窓の虫眼鏡の横から入力したいのですが、左端から
> カーソルがきてしまいます。

例に示したstyle指定の、margin-left を padding-left に変えてください。


↓



> 　
> この部分のどこに検索ボタンの画像を貼るのでしょうか？
検索ボタンの画像も、同様にスタイルシートで変更します。


↓



> あと、
> （*****となっている3箇所は店舗によって異なりますので、
> 　必ずショップから探してご利用ください。）
> 　　↑
> こちらの意味がよくわからないのですが・・・？
> すみません。
> 理解するのに時間がかかりますが、ご指導お願い致します。

ショップを確認したところ、下記のHTMLタグをそのまま貼り付けられている模様です。 


======================








======================

それでは、上記タグに含まれる3つの******を、
実際のショップの値にご変更お願いします。


の*****には、数字6桁のショップIDを、

の*****には、ショップ名を入れてください。

ショップID（sid）・ショップ名（sn）は、
一度店舗内で商品検索を行っていただくと
添付画像の丸のついた位置でご確認いただけます。


の*****には、ショップURLを入れてください。
例えば、http://www.rakuten.co.jp/sample/ の場合は、
sample と入れてください。

Answer

色々ありがとうございます。
教えて頂いた通りにやってみたのですが・・・。
上手くいかないです。
どこが違うのかがわからないです。

検索窓の横に検索ボタンをつけたいのですが。

商品検索も文字が重なってしまっています。
商品検索を削除してみましたが、ダメでした。

下記は貼り付けたタグです。


 
 
 
 
　　

 
 
 
 


何度も申し訳ございません。
ご指導お願い致します。

Answer

> 検索窓の横に検索ボタンをつけたいのですが。
入力欄と検索ボタンの間に、初期状態で空間が空いてしまうようです。
商品検索ボタンに margin-left: -25px; の指定を加えて、
検索ボタンを左に詰めてみてください。

> 商品検索も文字が重なってしまっています。
> 商品検索を削除してみましたが、ダメでした。
半角または全角スペースをお試しいただけますでしょうか。

また、入力欄の文字も虫眼鏡にかぶってしまうため、
padding-left の数値を増やして、
入力の始まる位置をもう少し右に寄せる必要が有る模様です。

以上の変更を適用するために、
下記のようにご変更お願いします。


　　

↓

Answer

いつもお世話になっております。

完璧に出来ました！
本当にありがとうございます。
何度も何度もご返答頂きまして感謝致します。

ちなみにもう一点教えてください。

既存の商品検索窓が下にあるのですが、これは消せますか？

宜しくお願い致します。

Answer

既存の商品検索窓は、RMS上の設定では
消すことができませんので、
スタイルシートを利用して消す形になります。

以下のHTMLタグを、
トップ説明文の中に貼り付けてください。


/* 既存の商品検索窓を削除 */
body > div:nth-child(13) > table > tbody > tr > td > table:nth-child(2) > tbody > tr:nth-child(2) > td:nth-child(3) > table:nth-child(15) > tbody > tr > td * { display: none; }