2008/02/28 (木) 検索バーのカスタマイズその1
難易度 : ★☆☆☆☆
私自身が妙に気になる、この公式プラグインの検索バー。
デフォルトだと↓こういう表示になるんですが.........。
うーん、マンダム･･･じゃなくて、ちょいとイマイチなので、↓こんなバリエーションを用意してみました。
このカスタマイズ方法を一例として載せておきます。
私自身が妙に気になる、この公式プラグインの検索バー。
デフォルトだと↓こういう表示になるんですが.........。
うーん、マンダム･･･じゃなくて、ちょいとイマイチなので、↓こんなバリエーションを用意してみました。
このカスタマイズ方法を一例として載せておきます。
- プラグインの設定→プラグイン管理→設定の詳細→【HTML編集】を開いて、そこの記述を全部削除し、
上記に書き換えて変更（保存）して下さい。
※更に、value="検索" の「検索」の部分を書き換えると実際にそれが反映されますので、 「search」等、お好みで変えてみて下さい。
- 次に、テンプレートの設定→編集→スタイルシート編集で、
.search_box {
上記を追加して変更（保存）します。（場所は何処でもいいです）
border:1px solid #dcdcdc;
width:120px;
}
.search_btn {
margin-left:3px;
background:#dcdcdc;
border: 2px solid #ccc;
width: 任意の数字px;
height: 任意の数字px;
}
これを応用すると色々できますので、コダワリ派の方は是非どうぞ。
【解説編】
.search_box {
border:1px solid #dcdcdc; 検索バーのボーダー
width:120px; 検索バーの長さ
}
.search_btn {
margin-left:3px; 検索バーと検索ボタンの間の空白部分
background:#dcdcdc; 検索ボタンの背景色
border: 2px solid #ccc; 検索ボタンのボーダー
width: 任意の数字px; 検索ボタンの幅
height: 任意の数字px; 検索ボタンの高さ
}
あっ、手がすべっちゃった装置（嘘） : 
