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

2010 年 2 月 24 日 by     No Comments    Posted under: css, ショップサーブ

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

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

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

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

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

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

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

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

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

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

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

デフォルトhtml ↓

1
2
3
4
5
6
7
<div id="search">
<label>商品検索</label><br>
<form name="form1" method="post" action="/SHOP/list.cgi">
<input name="Search" size="18" class="text1" style="width: 100px">
<input type="submit" value="検索" name="submit" class="button1">
</form>
</div>

カスタム後のhtml ↓

1
2
3
4
5
6
<div id="search">
<form name="form1" method="post" action="/SHOP/list.cgi">
<input name="Search" size="18" class="text1" value="商品名を入力" onfocus="if(this.value=='商品名を入力'){this.value='';}" onblur="if(this.value==''){this.value='商品名を入力';}">
<input type="submit" value="検索" name="submit" class="button1">
</form>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#search {/* サイド商品検索枠設定 */
width: auto;
background: url(<EBBlogThemeImgBase>/search_img01.gif) #DDDDDD;
margin: 0px;
padding: 8px 4px 10px 5px;
}

#search label {
color:#404040;
padding:0px;
margin:0px;
color:#404040;
font-weight:bold;
}

.button1 {/* inputボタン設定 */
color: #FFFFFF;
background: #725734;
border: 1px solid #463723;
cursor:hand;
margin:1px;
}

.text1 {/* テキストエリアデザイン設定 */
border:1px solid #616161;
}

そして変更後のcss ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#search {
width: auto;
margin: 0px auto;
padding: 8px 0 10px 3px;
}

.button1 {
color: #FFFFFF;
background: #725734;
border: 1px solid #463723;
font-size: 12px;
cursor: hand;
cursor: pointer;
*padding: 1px 0 -2px;
}

.text1 {
border:1px solid #616161;
width: 110px;
*width: 120px;
font-size: 12px;
color: #5a5a5a;
padding: 2px 0 0 2px;
*padding: 2px 0 1px 2px;
}

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

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

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

1
<label>商品検索</label><br>

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

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

1
cursor: pointer;

を追加しました。

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

1
2
*padding: 1px 0 -2px;
*padding: 2px 0 1px 2px;

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

1
*width: 120px;

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

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

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

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

1
2
class="text1"
class="button1"

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

1
<div class="fieldarea">

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


posted by そば富泉


こちらも合わせてご覧ください - このページの内容と関連がある記事 -

  1. ショートハンド
  2. ショップ作成で使えそうなCSSのテクニック!? part 1
  3. ワードプレスでトラックバックURI(URL)を表示・簡単にコピーできるようにする
  4. WP-PageNavi を使わずにナビゲーション表示 備忘録
  5. 個人的に便利なCSSタグの簡単コピペのページ
TrackBack URL for this entry

コメントをいただけると励みになります！よろしくお願いします。

11 + 2 =
Please leave these two fields as-is: