賢威 検索ボックス

さて、今回のWordpressのデザイン変更は「検索ボックス」です。

賢威のデフォルトの検索ボックスは、わりとスッキリしたデザインで使いやすいですが、やっぱり少々味気ないですよね。

これをCSS変更して、お洒落で素敵な検索ボタンに変更してしまいましょう。
また、マウスを乗せたときに色が変わるようにすることも簡単に実装できます。

細かいところですが、ぜひこういったところも工夫して、サイト訪問者に「おお~」と思われるようにしていきしょう!

CSSのサンプルコードもご紹介しますので、どうぞ自由に使ってみてくださいね^^

 

 

検索ボックスのボタンの文字を変更する

賢威の検索ボックスのデフォルトのデザインはこのような感じになっていますね。

633_2

まず、このボタンの「検索」という文字を変更してみましょう。

 

ダッシュボードメニュー>外観>テーマの編集>検索フォーム (searchform.php)

にアクセスしてください。

この中のコード、 id=searchsubmit の次に書かれている value の記述を変更していきます

633_3

 

デフォルトでは「検索」となっているので、これを例として「Search」と記述してみましょう。

633_4

 

変更したら、「ファイルを更新」を押して、サイトを確認すると・・・

633_5

検索ボックスのボタンの文字が「Search」に変更されました^^

 

 

検索ボックスのボタンのデザインをCSSで変更する

それでは、やや味気ないこのデフォルトボタンのデザインをCSS変更して、ちょっと素敵なボタンにしてみましょう。

変更するファイルは、design.cssです。

ダッシュボードメニュー>外観>テーマの編集>design.css

テーマファイルの検索フォーム (searchform.php)を見ると、検索ボタンはsearchsubmitというid属性が指定されているので、design.cssに#searchsubmit でcssを追加すればOKということになります。

design.cssの一番下に書かれている、

/*————————————————————
template created by web-rider
————————————————————-*/

の直前にコードを追加していきましょう。

ここに、

#searchsubmit {   

(cssコード)

}

の形で記述していきます。

 

 

検索ボタンCSS変更例

スタイリッシュでシンプルな黒ボタン

シンプルだけどカッコイイ黒ボタン。
スッキリとした印象で使いやすいですね。

633_14

 

#searchsubmit {
     border: 1px solid #333;
     background: #333;
     color: #fff;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     text-shadow: 1px 1px 1px #ffffff;
     text-decoration: none
     padding: 1px 10px; 
     cursor: pointer; 
     display: inline-block;
}

 

Twitter風のボタン

ボタンの下に影をつけてちょっと浮き上がった印象に。
Twitterのソーシャルフラットアイコン風です。

633_16

 

#searchsubmit {
     border: 1px solid #006489;
     background:#00acee;
     color: #fff;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;    
     box-shadow:0 2px 0 #006E96;
     text-shadow: 1px 1px 2px #000000;
     text-decoration: none
     padding: 5px 10px; 
     cursor: pointer; 
     display: inline-block;
}

 

 

シャドウ&ハイライトの入った立体感のあるボタン

やっぱりボタンは少しの立体感があったほうが押しやすいですよね。
下にシャドウ、上にハイライトが入ったボタンです。

633_22

 

#searchsubmit {
     background: #E75685;
     color: #fff;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-bottom: 3px solid rgba(0,0,0,0.2);
     border-top: 3px solid rgba(255,255,255,0.2);  
     text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
     text-decoration: none
     padding: 1px 10px; 
     cursor: pointer; 
     display: inline-block;
}

 

グラデーションの華やかなボタン

グラデーションを入れて華やかに。
さすがに目立ちますね^^

633_18

 

#searchsubmit {
     border: 1px solid #333;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     background-image: -moz-linear-gradient(top, #2ee9ff, #6a29ff);
     background-image: -ms-linear-gradient(top, #2ee9ff, #6a29ff);
     background-image: -o-linear-gradient(top, #2ee9ff, #6a29ff);
     background-image: -webkit-gradient(linear, center top, center bottom, from(#2ee9ff), to(#6a29ff));
     background-image: -webkit-linear-gradient(top, #2ee9ff, #6a29ff);
     background-image: linear-gradient(top, #2ee9ff, #6a29ff);
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
     color: #fff;
     text-shadow: 1px 1px 2px #000000;
     text-decoration: none
     padding: 5px 10px; 
     cursor: pointer; 
     display: inline-block;
}

 

 

マウスをボタンに乗せた時に色が変わるようにするには?

マウスを検索ボタンに乗せた時に、色や形などのデザインを変化させるようにするには、

#searchsubmit:hover {   

            (cssコード)

}

の形でコードを記述すればOKです。

例えば、先ほどのシンプル黒ボタンにマウスを置いたときの動作を加えたコードは次のようになります。

#searchsubmit {
     border: 1px solid #333;
     background: #333;
     color: #fff;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     text-shadow: 1px 1px 1px #ffffff;
     text-decoration: none
     padding: 1px 10px; 
     cursor: pointer; 
     display: inline-block;
}

#searchsubmit:hover {
     border: 1px solid #0000ff;
     background: #0000ff;
     color: #000000; 
     padding: 5px 10px; 
     cursor: pointer; 
     display: inline-block;
}

いろいろいじってみて、ぜひサイトに合ったカッコイイ検索ボタンを作ってみてくださいね^^

次回は、検索ボックスのテキスト入力欄のデザインも変更してみたいと思います。
お楽しみに!