最近、Google カスタム検索エンジンのコードが変更されたみたいです。それも大幅に。
以前までは HTML ソースを直接貼り付ける方法だったんですが、新しいコードは JavaScript を使って HTML を呼び出しています。
前まではこんな感じ↓だったんですが、
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>新しいコードはこんな感じ↓。
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'ja'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly("http://google.com/cse?cx=XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY");
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />（※「XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY」は検索エンジン ID）
え……。何これ……。
と思わず言いたくなる変わりっぷりですね。
こうなると、直接 HTML を編集することができないので、「検索」ボタンを自作の画像に差し替えたり、細々とデザインを調整したりすることが非常に難しくなってしまいました。
ただ、コードが新しくなったのは後から追加した検索エンジンだけですから、以前に設定した検索エンジンは、もちろん以前のコードのままでちゃんと動作してるんですよね。
という訳で、新しく追加した検索エンジンについても、実は以前のコードをベースにすれば、新しいコードは使わなくても検索エンジンは動作してくれます。
具体的な方法としては、コードの中にある「検索エンジン ID」を変更するだけ。
上記コードの「value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY"」の値を、設定したい検索エンジンの ID にすれば、それだけで問題なく動作します。
（恐らく「name="cx"」が検索エンジンを特定するためのデータなんでしょうね）
あとは、input タグの name 属性と value 属性にだけ気を付ければ、自由に HTML を編集できます。
（もちろん form タグの値も変えないように）
ちなみに、検索エンジン ID は「マイ検索エンジン」から、設定したい検索エンジンの「コントロールパネル」にアクセスすれば確認できます（「基本」タブ内）。
但し、あくまで「以前の」コードであることは認識しておいた方がいいと思います。
いつ使えなくなるか分かりませんからね。
まぁいきなり「ハイ終わり！」ってことはないと思いますが、「新しく追加した検索エンジンは、新しいコードじゃないと使えないよ！」なんて言われたら終わりですし。
新しいコードを使う場合の対応も、考えておきましょう。
考えます。考えますとも。
新しい方のコードについてもちょっとだけ試してみた
という訳で、新しいコードについても少し触ってみました。
が、結論から言うと、良さげな方法は見付けられていません。
呼び出された HTML を Firebug でコピペしてきて編集……ということも試してみたんですが、どうやらそれも無視されて、後から JavaScript で呼び出された HTML で上書きされてしまうっぽい感じ。
「<div id="cse-search-form">」がキー（トリガー？）になっていて、その中身が強制的に書き替えられてしまうんですね。
しかもこの id は検索のキーにもなっているため、削除することもできません（削除すると検索できない）。
うわぁ、八方ふさがり。
そんな訳なので、もし HTML をいじりたければ、生成されたソースを更に JavaScript で書き替えたりする必要がありそうです。
まだそこまでは試してないので、本当にできるかどうか分かりませんが。
また、CSS でもいろいろとスタイルが設定されているようなので、ボックスのサイズやらボタンの色やらを設定・変更するだけでも一苦労しそうな予感。
「!important」の山にならなければ良いなぁ……。
いずれにしても、かなりややこしいというかメンドくさいことになりそうです。
（っていうか、どちらのコードを使うか選べるようにしてくれたら良いのに！）
念のため、Firebug で拾ってきた HTML も残しておきます。長いですけど。
あまりにもわかりづらかったので、適当に改行を追加してます。
class 名などのご参考にどうぞ。
<div style="width: 100%;" id="cse-search-form">
<div class="gsc-control-searchbox-only gsc-control-searchbox-only-ja" dir="ltr">
<form class="gsc-search-box" accept-charset="utf-8">
<table cellspacing="0" cellpadding="0" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input">
<input type="text" autocomplete="off" size="10" class=" gsc-input" name="search" title="検索" style="background: url("http://www.google.com/cse/intl/ja/images/google_custom_search_watermark.gif") no-repeat scroll left center rgb(255, 255, 255);">
</td>
<td class="gsc-search-button">
<input type="submit" value="検索" class="gsc-search-button" title="検索">
</td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="結果をクリア"> </div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gsc-branding">
<tbody>
<tr>
<td class="gsc-branding-user-defined">
</td>
<td class="gsc-branding-text">
<div class="gsc-branding-text">powered by</div>
</td>
<td class="gsc-branding-img">
<img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load('search', '1', {language : 'ja'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly("http://google.com/cse?cx=XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY");
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<script type="text/javascript" src="http://www.google.com/uds/?file=search&v=1&hl=ja">
</script>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/api/search/1.0/2371ff5421fb183209ed1396775bee26/default+ja.css">
<script type="text/javascript" src="http://www.google.com/uds/api/search/1.0/2371ff5421fb183209ed1396775bee26/default+ja.I.js">
</script>
<link type="text/css" href="http://www.google.com/cse/style/look/default.css" rel="stylesheet">