Google カスタム検索は、発行されたJavaScriptのコードを貼るだけで、簡単に検索機能を導入できるので、とても便利ですよね。でも見た目をCSSで調整したいと思ったとき、このJavaScriptを貼るだけというやつは扱いづらくないですか。

そんなときはHTML版に変更すれば大丈夫。以下のコードが用意されています。

<form id="cse-search-box" action="http://google.com/cse">
  <input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
  <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版に変更すれば、CSSでの見た目の調整はしやすくなりますね。

参考サイト

• HTML フォームを使用した検索ボックスの作成 – カスタム検索 ヘルプ