Yahoo!ショッピングPCトップページに設置する検索窓のデザインについて

Question

お世話になっております。

Yahoo!ショッピングPCトップページ（トリプルではなくストアエディタでのページ使用）に、ストアデザイン機能を使い、ヘッダー・看板部分に「ストア内検索」のパーツを設置しました。

現在の状態は以下のようになっています。
https://store.shopping.yahoo.co.jp/modealacarte/

上記の今の状態から、検索窓のデザインを以下のように変更したいです。
https://shopping.geocities.jp/modealacarte/ecstation/spc/top_search.html

「検索」のボタン画像は現状のままでも構わないのですが、キーワード入力欄の高さと幅を、上記のトリプルページと同じ（幅は親要素の100％ほど）ようにしたいのです。あわせて、入力欄の大きさにあわせて入力フォントも少し大きくしたいです。

看板部分で以下のCSSファイルを読み込ませてあるのですが、どのようなセレクタにどのようなプロパティを追加したらよろしいでしょうか。
https://shopping.geocities.jp/modealacarte/css/y_style.css

または、先述のトリプルの検索窓は、ECステーションの丸ごとスマホを使って作ったのですが、
以下のようにタグを記載しても、


  var oElements  = document.getElementsByTagName("a");
  for (var i = 0; i < oElements.length; i++) {
    var oElement = oElements[i];
    oElement.target = '_top';
  }


検索結果ページがフレームの中に表示されてしまい、うまく行きませんでした。

また、トリプル内で検索するので、あとで検索ワードのデータが拾えなくなるかも、と思い、ストアエディタの機能を使おうと考えました。
ですが、表示とデータの問題が解決できれば、そのままトリプルで作っても良いと思っています。

アドバイスいただけたら助かります。
どうぞよろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

> 看板部分で以下のCSSファイルを読み込ませてあるのですが、どのようなセレクタにどのようなプロパティを追加したらよろしいでしょうか。

https://www.buildinsider.net/web/chromedevtools/01
上記のChrome用など、各ブラウザの開発者ツールをご利用いただくと
検索窓を囲むdivにTopStrSearch1というidが、また検索窓自体にelTextというclassが
それぞれ割り振られていることがおわかりいただけると思います。

なので、「#TopStrSearch1 .elText」に対して
font-sizeやwidth、heightなどのプロパティをご設定ください。
既存の規則が上書きできない場合は、「body #TopStrSearch1 .elText」などとして
優先度を既存の規則よりも若干上げてあげることで適用させることができます。

> 検索結果ページがフレームの中に表示されてしまい、うまく行きませんでした。 

いただいたタグはタグのtargetを修正するものですが、
今回は、タグに対してtargetをご指定いただく必要がございます。

「top_search.html」に記載されたタグに対して、
target="_top"
上記属性の追記をお願いします。

> トリプル内で検索するので、あとで検索ワードのデータが拾えなくなるかも、と思い、ストアエディタの機能を使おうと考えました。 

ストアクリエイターProトップ→統計→検索流入→ストア内検索
にて記録されるかどうか、ということですね。

基本的には同じシステムに対して同じデータを送信して検索を行うため、
問題なく記録されるのではないかと思いますが、

念の為、me&hiroさんにて実際に、
お客様がストア内検索で使わないようなキーワードで検索していただき、
（商品の種類とショップ名、など）
翌日、ストア内検索に掲載されているかご確認いただきますようお願いします。

Answer

ありがとうございます。
トリプルでもデータ上問題がなければ、後々のカスタマイズやデザインの自由度はトリプルの方がずっと良いので、トリプル（ECステーションのまるごとスマホ）で設置して、データを見てみることにしました。

「検索されないキーワード」と入れて検索してのですが、ちゃんと統計の「店内検索」のデータに上がってきました。

デザイン的にも満足なものが設置できました。ありがとうございました。
今後ともよろしくお願いいたします。