ヤフー検索窓について

Question

お世話になっております。

ヤフーのトリプルを利用し、楽天のトップページをヤフーへ同じデザインで移行したのですが、
検索窓だけうまく出来ませんでした。

検索窓は表示されているのですが、検索をかけてもうまく検索されません。

以下の様なタグを入れているのですが、
何を修正すればよいか教えて頂けませんでしょうか。
---------------------------------








---------------------------------

因みに下記がヤフーのショップURLになります。
▼ヤフーショップURL
https://shopping.geocities.jp/eroeroe/

何卒宜しくお願い致します。

Accepted Answer

ECマスターズの伊藤です。

> 早速、下記の様に少しカラーや位置を変えて設置してみたのですが、
> 検索結果が上手く表示されませんでした。

ご対応いただき、ありがとうございます。

検索のデータ自体は飛んでいるようですが、
正常な文字コードでデータが飛んでいないため、
ページ全体の文字コードを

euc-jp
から
UTF-8

に変更していただき、
再度ご確認いただけますでしょうか。

Answer

ECマスターズの中野です。

お世話になっております。
いただいたこちらの質問につきまして、
休み明けに担当より回答させていただきます。

8/15（日）まで夏季休業のため通常より
お時間をいただき大変申し訳ございませんが
お待ちくださいますようよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> ヤフーのトリプルを利用し、楽天のトップページをヤフーへ同じデザインで移行したのですが、
> 検索窓だけうまく出来ませんでした。

ヤフーと楽天では、検索窓の構造が異なりますので、
下記コードをご参考に、修正をお願いいたします。

【ストアURL】
と、

#ff0451;
が色になりますので、お好みの色に変更いただき
ご利用くださいませ。

配色参考
https://www.colordic.org/

なお、設置可能な箇所は、トリプルのみとなりますので、
ご注意くださいませ。







ストア内検索





.elSearch-hd {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
overflow: hidden;
border: 2px solid #ff0451;
border-radius: 5px;
width: 400px;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.elSearchInput-hd {
-ms-flex-positive: 1;
-webkit-box-flex: 1;
flex-grow: 1;
padding: 0 8px;
border: 0;
border-radius: 0;
min-width: 1px;
line-height: 45px;
height: 45px;
-webkit-transition: all .5s;
transition: all .5s;
}
.elSearchSubmit {
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 8px 0 12px;
border: 0;
border-radius: 0;
background-color: #ff0451;
color: #fff;
font-weight: 700;
line-height: 26px;
}

Answer

伊藤様

お返事をありがとうございます！

早速、下記の様に少しカラーや位置を変えて設置してみたのですが、
検索結果が上手く表示されませんでした。
何度もページを更新したのですが、結果は同じでした。
※トップページヘッダー部分の検索窓を変更してみました。

色と枠の大きさや位置を触っただけなのですが、
何か間違えている箇所はございますでしょうか。
大変お手数ではございますが、ご確認の程よろしくお願い致します。











.elSearch-hd {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
overflow: hidden;
border: 1px solid #000;
border-radius: 5px;
width: 180px;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
position: relative;
}
.elSearchInput-hd {
-ms-flex-positive: 1;
-webkit-box-flex: 1;
flex-grow: 1;
padding: 0 8px;
border: 0;
border-radius: 0;
min-width: 1px;
line-height: 35px;
height: 35px;
-webkit-transition: all .5s;
transition: all .5s;
}
.elSearchSubmit {
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 8px 0 12px;
border: 0;
border-radius: 0;
background-color: #fff;
color: #fff;
font-weight: 700;
line-height: 26px;
}

Answer

伊藤様

euc-jp　から　UTF-8　へ変更したところ、
検索出来るようになりました！！

ありがとうございました！！

今後共どうぞよろしくお願い致します。