大きな検索フォームの設置について

Question

お世話になります。

先日清水さんが検索フォームにについて言及されていました。
当店も設置はしておりますが、サイドナビであまり目立たない感じです。

清水さんの言うように目立たせようかと思います。
950pxくらいの大きな幅で設置するコードをご教授頂けませんでしょうか。

よろしくお願い致します。

Answer

ECマスターズの田中です。

横幅950px程度ということは、サイドナビ以外に表示させたいということですね。
その場合はまず、サイドナビにある検索窓用の一連のタグを、
表示させたい位置にコピーしていただきますようお願いします。

検索窓用のタグは、機能面では

Answer

田中さん、ありがとうございます。

サイドナビではなくヘッダーに表示しようと思います。
例えば楽天の検索フォームの感じにしたい場合の、コピペで設置できるようなサンプルはないでしょうか。###HR######IMG041729ba2f5353a6ddedc2d5b51cebd94.pngIMG0######BR###

Answer

ECマスターズの田中です。

> 例えば楽天の検索フォームの感じにしたい場合の、コピペで設置できるようなサンプルはないでしょうか。

それでは、下記ソースをお試しいただけますでしょうか。
ご利用の前に一箇所、「店舗ID」のみ、
店舗内検索のURLに含まれる６桁の数字、 
または、商品編集画面でご確認いただけるRAC番号の上６桁に
置き換えをお願いします。

「.shopSearchForm {」直下の
width: 100%;
の、数字を減らしたり、「400px」などの固定値に変えることで、
検索窓全体の幅を調整することができます。

= この下の行から ====================

.shopSearchForm {
    width: 100%;
    margin: 0;
}
.shopSearchForm > * {
    vertical-align: bottom;
}
.shopSearchInput {
    width: calc( 100% - 45px );
    border: 2px solid #bf0000;
    border-radius: 3px;
    text-indent: 8px;
    font-size: 12px;
    font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
    line-height: 32px;
}
.shopSearchButton {
    border: none;
    border-radius: 3px;
    width: 45px;
    height: 38px;
    margin-left: -3px;
    cursor: pointer;
    background: #bf0000 url(https://r.r10s.jp/com/img/home/itempage/haeder_sprite.png) no-repeat 1px -239px;
}





= この上の行まで ====================

Answer

田中さん、ありがとうございます！
無理を言ってすみませんでした。
掲載場所を吟味する必要がありますが、無事できました。

清水さんが、サイトを見て検索窓がないとかなりテンションが下がる、とおっしゃってたので
そういう意味では必須事項としてデザインレシピコーナーにあってもいいTipsかなぁとも思います。

ありがとうございました。