検索窓　色を変更したい、画像は？

Question

検索窓の設置で、ツールから作ると楽天のような赤になっていますので違う色にしたいです。
その際、#bf0000をしたい色#9b9690にしました。
虫眼鏡（白・周り赤）は画像でしょうか？
url(/com/img/home/itempage/haeder_sprite.png)のところでしょうか？
その際の画像サイズ？
画像の保存場所？（Rキャビネットではだめですか？）
はどうしたらよいでしょうか？

そもそも上記の思ってる内容が違ったらすみませんがよろしくお願いします。

Answer

追加でお願いします。
レフトナビを新しくしたくてビルダーで作ってて、ソースとか詳しいことはわからないのですが。




KEYWORD SERCH





ここに入れたいです


バケット｜ローズカット
プリンセスカット






のような形で～ここに入れたいです～に入れたいのですが、うまく入りません。
ツールで作った【貼り付け用HTMLタグ】をそのまま入れればよいのでしょうか？

Answer

ECマスターズの田中です。

楽天標準のようなショップ内検索窓を表示させる方法
https://club.ec-masters.net/index.php?design_page18

では、楽天公式に近い形で虫眼鏡ボタンを設置しているのですが、
http://image.rakuten.co.jp/com/img/home/itempage/haeder_sprite.png
上記、複数のボタンがつながった１つの画像から
虫眼鏡の部分だけを切り出して表示する、
という仕組みになっております。

簡単に差し替えを行われる際は、
横48px・高さ38pxの画像をR-Cabinetにアップロードしていただき、
元ソースの
background:#bf0000 url(/com/img/home/itempage/haeder_sprite.png) no-repeat 1px -239px;
を
background:#9b9690 url(画像URL) no-repeat;
のように差し替えていただきますようお願いします。

上記の変更を行っていただいた上で

> ツールで作った【貼り付け用HTMLタグ】をそのまま入れればよいのでしょうか？

その通りで表示されるはずなのですが、
どのような表示になりましたでしょうか。

実際の表示を見ながら調整する必要がございますので、
実際の見た目を確認できるページなどございましたら、
URLをお知らせいただきますようお願いします。

Answer

SSが終わったら新しくしようと思っています。
非表示でテストページ作ったので試しました。
まだ途中ですが、
https://item.rakuten.co.jp/koff-j/test/
です。

検索もできましたが、虫眼鏡がずれてしまいました。
画像サイズは横48px・高さ38pxでR-Cabinetにアップロードしました。
ずれを直したいです。
よろしくお願いします。

また、レフトナビもですがカテゴリも分かりにくいので修正したいと思っています。
カテゴリを新しく作り直し今までのを移そうと思っていますが、修正したからと言って検索に影響するとかはありませんか？

以上よろしくお願いいたします。

Answer

ECマスターズの田中です。

ページ内の貼り付け用HTMLタグを確認したところ、
タグとタグの間に改行が追加されており、
ずれの原因となっておりました。
minさんにて追加されたものでなければ、
ホームページビルダーによって自動的に整形された可能性がございます。

下記ソースに差し替えていただくことで
ズレがなくなりますので、差し替えてご確認いただきますようお願いします。


.shopSearchForm{width:100%;max-width:190px;display:flex;}.shopSearchForm > *{vertical-align:bottom;box-sizing:border-box;height:38px;}.shopSearchInput{flex:1;width:calc(100% - 48px);border:2px solid #9b9690;border-radius:3px;text-indent:8px;font-size:12px;font-family:"Meiryo", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;line-height:32px;}.shopSearchButton{flex:none;border:none;border-radius:3px;width:48px;margin:0 0 0 -3px;cursor:pointer;background:#9b9690 url(https://image.rakuten.co.jp/koff-j/cabinet/05242973/05830907/imgrc0099349193.jpg) no-repeat;}





> また、レフトナビもですがカテゴリも分かりにくいので修正したいと思っています。
> カテゴリを新しく作り直し今までのを移そうと思っていますが、修正したからと言って検索に影響するとかはありませんか？

検索される商品自体の情報ではなく、
各商品が属する店舗内カテゴリも、検索対象ではありませんので、
検索結果への影響はほとんど無いかと思います。

Answer

ありがとうございます。
おかげ様でできました！
また、検索対象外ということで、お客様に探しやすく出来るよう直していきたいと思います。
またよろしくお願いします。

検索窓 色を変更したい、画像は？

検索窓　色を変更したい、画像は？