Googleカスタム検索の検索窓を好きなようにデザインしたい

過去にGoogleカスタム検索の検索窓をCSSなどを使って好きにデザインを変更した記憶があります。
しかし、最近、新規でカスタム検索のコードを取得したところ、Javascriptで記述されており、また、検索窓のフォームがiframeで読み込む形式になっているため、容易にデザインをカスタマイズというわけにはいきません。

iframeタイプの検索窓

現在、Googleカスタム検索で登録すると、以下のようなコードが取得できます。

<div id="cse" 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', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '（検索エンジン ID）', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>

このコードをページに貼り付けると、以下のような検索窓が表示されます。


特にデザイン的に悪いわけではないので、このままでも良いような気もします。
しかし、いざデザイン調整の必要性が発生した場合に、その作業は容易ではありません。管理画面より細かい色味の調整などが可能なようですが、いずれにせよ限界はありそうです。

HTML フォームを使用した検索ボックスの作成

実はGoogleでは、Javascriptでiframe表示するのではなく、HTMLフォームを直接埋め込む方法も展開されています。
HTML フォームを使用した検索ボックスの作成
参照サイトによると、以下のようなコードでもGoogleカスタム検索のサービスを受けることができるそうです。

<form id="cse-search-box" action="http://google.com/cse">
  <input type="hidden" name="cx" value="（検索エンジン ID）" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="31" />
  <input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

こちらを設置した場合は以下のようになります。

先ほどよりデザイン性は落ちますが、これだけシンプルなHTMLなので、知識さえあれば自身でどうにでもカスタマイズできそうです。

さらにカスタマイズ

下についている「Google Custom Search」の画像が邪魔な気がする方もおられると思いますが、サービスを受けている以上さすがにこれは外せません。ただ、先ほどの

<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

の部分を、以下のように置き換えると、

<script type="text/javascript" 
　src="http://www.google.com/coop/cse/brand?form=cse-search-boxamp;lang=ja"></script>

ロゴを検索窓の中に収めることができます。

さらには「Search」ボタンの部分を、inputのタイプをsubmitからimageにすることで、画像ボタンに置き換えることもできます。

これで方法を活用すれば、ほぼ理想の検索窓を自由にカスタマイズできますね。