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

今回のブログデザイン変更に伴い、実装してみたカスタマイズなのですが、これはもしかしてかなり使える? と思ったのでご紹介。

検索用に以前からGoogleカスタム検索を導入しているんですが、如何せん通常の検索フォームのデザインがあまりにイケてないんですよね。で、今回このカスタマイズってできないのかなぁとソースをベロベロ開いては考え、開いては考えしていたんです。

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

で・き・た!

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

というわけで、以下カスタマイズの流れ。

まずは書き換えの前に検索ボックスをデザイン

書き換えをする前に、まずはざっくりとどんなボックスにするのかデザイン案を考えておきましょう。

今回僕は入力フォームのバックグラウンドイメージを作成しました。
Submitボタン部分は「Iconfinder」というアイコン検索サイトからよさげなものを引っ張ってきました。

バックグラウンドイメージのサイズは160px×24pxで作成。アイコンは19px×18pxにしてあります。

素材を準備したらコーディング

次にGoogleカスタム検索のソースを書き換えます。

デフォルトのソースはこのようになっているはず。

<form id="cse-search-box" action="http://www.google.co.jp/cse" target="_blank">
<div><input name="cx" type="hidden" value="partner-pub-{独自のIDコード}" />
<input class="search-text" name="q" type="text" />
<input name="sa" type="submit" 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 id="cse-search-box" action="http://www.google.co.jp/cse" target="_blank">
<div><input name="cx" type="hidden" value="partner-pub-{独自のIDコード}" />
<input class="search-text" name="q" type="text" />
<input class="search-go" title="Search" alt="Search" height="18" src="任意の画像パス" type="image" width="19" /></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 &amp;amp;&amp;amp; 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 (!/[&amp;amp;?]q=[^&amp;amp;]/.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側の何かに抵触する可能性っていうのもあるかも。その辺どうなんだろうなぁ。