「Googleカスタム検索」のデザインをCSSレベルで変更するテクニック
WordPressにリプレイスしてから、普通にWP標準の機能を使ってブログ内のキーワード検索を実装させていましたが、検索フォームのレイアウト変更にともなって、Googleカスタム検索に再び切り替えることにしました。
で、そうなるとやっぱり納得いかないのがGoogleカスタム検索のデザインです。
もうずいぶん前になりますが、Googleカスタム検索のデザインを変更する方法について書いたことがありました。
今思うとだいぶひどい方法を採っていたんですよね。。
何が酷いってかなり無理矢理変更してましたからねぇ。よくあれで引っかからなかったもんだと思うほど。
まぁ今の自分が見て「ひでぇな」って思えるということは、それなりに成長したってことなんでしょうか。
とかなんとかそんなことはどうでもよくて、今回はCSSだけでデザインを変えるテクニックをば。
Googleカスタム検索のフォームのコードは以下のような感じになっています。
<form action="https://mbdb.jp/search/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXX:XXXXXXXXXX" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja"></script>
以前はデザインを変えるためにソース改変したり、jsのコードを開いていじくってみたりとギリギリすぎることやってましたが、今回はそんなことはいたしません。
鍵になるのはコードの中にある
- cse-search-box
というid属性。
このid属性をフックにしてやれば、それなりの見栄えに変更することができます。うちの固定ヘッダーくらいにはなります。頑張ればそれ以上にもなるはず。
おおまかには以下をCSSに追加してやって、任意のスタイルを指定してやればいいだけです。
/* =================================== */
/* Google Custom Search Settings */
/* =================================== */
#cse-search-box {
width: 180px !important;
}
#cse-search-box div {
padding: 0 !important;
}
#cse-search-box input[type="text"] {
font-size: 14px;
padding: 0 !important;
}
#cse-search-box input[type="submit"] {
background: #dddddd;
border: 0 none;
}
ってな感じ。あとはCSSの理解度次第ってところですね。
つっても、これだけあればさほど難しくもないとは思いますが。
ちなみにうちの場合はCSS3も組み合わせてフォームを角丸にしたりしてます。
CSS3に対応しているブラウザでないと意味はありませんけどね。
一応、うちのCSSをさらしとくと下のようになっています。
/* =================================== */
/* Google Custom Search Settings */
/* =================================== */
#cse-search-box {
width: 180px !important;
}
#cse-search-box div {
padding: 0 !important;
}
#cse-search-box input[type="text"] {
font-size: 14px;
height: 28px;
padding: 0 !important;
width: 175px;
background: #f9f9f9;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #dddddd;
-moz-box-shadow: 0 0 5px #dddddd;
-webkit-box-shadow: 0 0 5px #dddddd;
}
#cse-search-box input[type="submit"] {
background: url("img/icon_search.png") no-repeat scroll 50% 50% #f9f9f9;
border: 0 none;
color: #ffffff;
height: 20px;
margin: 0 0 -10px -27px;
overflow: hidden;
text-indent: -9999px;
width: 20px;
-webkit-appearance: none;
}
もう少しいじる予定ですけど、今のところはこんな感じです。
ちなみに検索結果はブログのページで表示するよう、固定ページを1枚作って、そこに結果表示用のコードを入れ込んでいます。
なんかこの表示方法は近いうち対応終了するそうなので、その際にはまた表示方法の切り替える必要があるわけですが、それはそれこれはこれ。
そうなったらそうなったときに考えるっていうスタイル。
ちょっと話はそれましたが、いずれにしてもデフォルトのカスタム検索のフォームデザインはイヤなんじゃ! って人の参考になれば幸いです。