【STINGER5】検索窓の色を変える方法（STINGER3風にチェンジ！）

どうもこんにちは！@dearwalker_yuyaです。

現在愛用している大人気無料WordPressテーマ『STINGER5』にはデフォルトで検索窓が付いています。

デフォルトでは1色の検索ボックスなので、ユーザーが気付きにくいのではと思っていました。この検索ボックスの色をカスタマイズしてユーザーに優しい検索にする方法をご紹介します！

『STINGER5』のCSSを少しイジる！参考はSTINGER
3！

STINGER5のスタイルシート（style.css）にある『検索フォーム』を変えたあげるだけです。

検索フォームは『Box部分』と右側の『アイコン部分』に分かれていてCSSによって微調整が可能となっています。ページ内検索を使うとCSS検索も快適。

検索フォーム内CSS

#s {
	height: 33px;
	color: #333;
	font-size: 14px;
	border-radius: 0;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #ccc;
	z-index: 10;
	padding: 5px 65px 10px 5px;
	width: 100%;
	box-sizing: border-box;
}

検索アイコン

#searchsubmit {
	border-radius: 0;
	background-color: #363B3F;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50px;
	height: 33px;
	z-index: 20;
}

右側の検索アイコンの背景色（background-color）を変更して『STINGER3風』にしてみました。

ポイント

変更してみて気付いたポイントですが、『検索フォーム』と『検索アイコン』の高さがデフォルトでは違っているので色を変えると少しズレてしまいます。気になる人は双方の、

height: 33px;

ここを揃えてあげましょう。

まとめ

何で『STINGER3風』にしたかというと目立つのはもちろんSTINGERらしいからです。

STINGER人気に火が付いた当初、使ってるテーマを『STINGER3』と判別する場所として『検索窓』がとても印象的だったのでSTINGERらしいというだけのことですｗ

まぁ、間違いなく検索窓としてのユーザビリティは上がるでしょうし、サイトに合わせて自由自在の配色が出来ますね！参考になると嬉しいです。でわでわ。