Googleカスタム検索のデザインを変更する方法

さて、今回のブログデザイン変更に伴い、これはもしかしてかなり使える? と思ったので、ちょっと公開してみようかなぁと。
うちではブログの検索用に以前からGoogleカスタム検索を導入しているんですが、如何せん通常の検索フォームのデザインがあまりにイケてないんですよね。で、今回このカスタマイズって出来ないのかなぁとソースをベロベロ開いては考え、開いては考えしていたんです。

スポンサードリンク

そうしたらですね、Googleカスタム検索ってボタンは変更出来るんだけど、入力フォーム自体はscript側でスタイルを指定しているってことが解りました。なら、その指定部分を変更できればいいんじゃないかなぁと思っていじくってみた結果、

で・き・た!
プログラミングはズブズブのド素人ですが、やってみるもんですねぇ。

というわけで、以下方法を。

まずは書き換えの前に検索ボックスをデザイン。
今回僕は入力フォームのバックグラウンドイメージを作成。Submitボタン部分は｢Iconfinder｣というアイコン検索サイトからよさげなものを引っ張ってきました。
バックグラウンドイメージのサイズは160px×24pxで作成しました。アイコンは19px×18pxにしてあります。

次にGoogleカスタム検索のソースを書き換えます。
デフォルトのソースはこのようになっているはず。

<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-{独自のIDコード}" />
<input class="search-text" type="text" name="q"/>
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

Submitボタンを画像に変更するために、以下のように変更します。

<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-{独自のIDコード}" />
<input class="search-text" type="text" name="q"/>
<input type="image" src="任意の画像パス" width="19" height="18" class="search-go" alt="Search" title="Search" />
</div>
</form>

そして今度はScript部分を変更。スクリプトの中身は”http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja”をたたくと中身が閲覧できるので、変更はこの中身を元に行いました。

<script type="text/javascript">
(function() { var f = document.getElementById('cse-search-box'); if (!f) { f = document.getElementById('searchbox_demo'); } if (f && f.q) { var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') { q.style.cssText = ''; } var b = function() { if (q.value == '') { q.style.background = '#transparent url(http:¥x2F¥x2Fwww.google.com¥x2Fcoop¥x2Fintl¥x2Fja¥x2Fimages¥x2Fgoogle_custom_search_watermark.gif) left no-repeat'; } }; var f = function() { q.style.background = 'none'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();
</script>

これでHTML側の準備はOK。今度はCSSに以下を追加します。

#search_box {
     background: #fff url("http://img.mbdb.jp/20090426_619452.png") no-repeat right top;
     margin-top: 8px;
     width: 160px;
     height: 40px;
     text-align: right;
     }
#search_box input.search-text {
     float: left;
     margin-top: 5px;
     margin-left: 1px;
     padding-left: 1px;
     border: 0;
     width: 120px;
     }
#search_box input.search-go {
     float: right;
     margin-top: 3px;
     margin-right: 3px;
     padding-right: 2px;
     }

あくまでもこれらの数値や設定はうちのブログで使ったものなので、使用する場合は適宜変更を加えてください。必ずしもピッタリにはならんはずなので。

と、ここまで変更すれば、味気ないつまらないデザインのGoogleカスタム検索がオリジナルのデザインに変わっているはず。まぁ一応今のところ動作も問題なく出来ているので、多分大丈夫だとは思いますが、仮にこれで何か問題が発生しても一切責任は持てませんのでご了承ください。

あ、あとGoogle側の何かに抵触する可能性っていうのもあるかも。その辺どうなんだろうなぁ。