サーチフォームのカスタマイズ(ショップサーブ編)

ショップサーブを利用していてどうにもならないのが商品検索。

何がどうにもならないかというと、普通にサイドエリアに表示させようとすると、
デザイン設定→全体のレイアウト→商品のカテゴリ+ 商品検索っていう形でしか表示できません ^^;

自分でカスタムして商品カテゴリーとかを並べて、別に商品検索を
表示しようとしても、????? ってことになりますよね。。。

そこで今回はサーチフォームを独自にサイドエリア等に設置する方法です。

私が使っているテーマ(桜)を基準にして記事にしているので、
使っているテーマによっては、IDとかクラスが違う可能性もあります。

カスタムされる場合は、同様の位置にあるID・クラスを変えれば同じだと思いますが、
あくまでも自己責任でお願いします。 ^^;

さてまずはこれがデフォルトの商品検索↓

そしてこれがカスタム後の商品検索↓

余計なものを省きシンプルにわかりやすく設置しています。

実際に設置している様子↓

それでは、実際のhtmlとcssをもとに説明します。

デフォルトhtml ↓

カスタム後のhtml ↓

デフォルトで関連しているcss ↓

そして変更後のcss ↓

#search label っていうのはカスタム後消しちゃっているので、何も変更していないので記述していません。

サーチフォームのテキストエリアに、商品を検索するという文字がフォーカスされていて、
文字列を入れようとポインタを合わせると消えるようになっています。

そうすることで、デフォルトの

っていう部分は不要になりシンプルでわかりやすいものになります。

ついでに、ボタン部分ではデフォルトでポインタしたときに矢印のままなので、

を追加しました。

IE6 / IE7 だとボタンの大きさとテキストエリアの大きさが変なので、ハックをあててあります ↓

IE6 / IE7 だとテキストエリアの大きさが変なので、ハックをあててあります ↓

背景とかマージン、パディングなんかは使う状況に応じて適宜変えればOK。

これだと、どこにでも単独で設置することができます。

備忘録を兼ねてますので、カスタムはくれぐれも自己責任で 笑

追記 : ショップサーブでサーチフォームをカスタムすると同時にメルマガ登録フォーム、
カート画面のボタンも変更されます。(ボタンについては見た目上問題ないと思います)

っていう部分が重なります。
外枠のエリアは、

ってなっているので、そこは変わりません。

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)