Googleカスタム検索をスタイルシートでカスタマイズ-コードは変更しないよ

　Googleアドセンスのカスタム検索のボックスの表示が気に入らない。

　Googleアドセンスの設定画面では枠線の色とか検索ボックス（検索フォーム）の幅は変えることができるのだが検索ボックス（検索フォーム）の高さは指定できない。

　でも、ほかのWordpressのテーマにGoogleアドセンスのカスタム検索のコードを入れたらデフォルトの状態と違った表示になった。

　コードそのものは変えていないのでテーマのスタイルシートの影響らしい。

　ということは、どのテーマでもスタイルシートの設定を変えるだけでGoogleカスタム検索の見た目を変えることができるんじゃないだろうか？

コードの記述は変えてはいけません！

　Googleアドセンスのコードは設定後収得したコードをそのまま使わないとGoogleのプライバシーポリシーに引っかかる。

　下手するとGoogleアカウントの停止とかにつながる可能性もある。

　ということで、Googleカスタム検索のコードの記述は変えてはいけない。

　カスタマイズするのはテーマのスタイルシートのみ！

Googleカスタム検索のコードを見てみよう

　Googleカスタム検索のコードをじっくり見てみよう。

　ポイントはid="cse-search-box"という部分。

　この部分のスタイルシートを指定すれば、Googleカスタム検索の概観を変えることができるんじゃないだろうか？

　で、スタイルシートの検索フォームの指定を書き換えてみた。

Googleカスタム検索をスタイルシートでカスタマイズ

　書き換え後のスタイルシートの記述は↓

/****  Google検索ボックス  ****/
#cse-search-box {
	width: 400px !important;
}
#cse-search-box table.gsc-search-box td.gsc-input {
	padding: 20 !important;
}
#cse-search-box input[type="text"] {
	padding: 0 !important;
	height: 50px;
	width: 150px;
	border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	-webkit-appearance: none;
}
#cse-search-box input[type="submit"] {
	margin-left: 0 !important;
	background-color: #0062AC;
	border: 1px solid #0062AC;
	color: #FFFFFF;
	height: 50px;
	width: 40px;
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	-webkit-appearance: none;
}

　デフォルトのGoogleカスタム検索が下のようになった。

↓

　スタイルシートの各項目の数字を変えたりすればもっと別の見かけにできる。

　でもなぜかサイドバーの検索ボックスの前に「検索」の文字が出てる。

　メインカラムの検索ボックスは別になんとも無いんだけど。