HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法

HTMLフォームを使用したGoogleカスタム検索のデザインカスタム方法を紹介します。

WordPressサイトにGoogleカスタム検索を設置する方法はこちらを参考にしてください。
» Googleカスタム検索の設置方法

デザインがくずれる問題

Googleカスタム検索は、作成した時に取得できるJavascriptコードを設置したい場所に貼り付けるだけで、簡単に利用できます。

しかも、シンプルでかっこいい！

しかし、このようにWordPressのテーマ（CSSの設定）によっては、Googleカスタム検索ボックスのデザインがくずれる場合があります。

HTMLフォームを使用

HTMLフォームを使用すれば、検索ボックスのデザインがくずれる心配はありません。また、サイトのテーマに合わせて自由にカスタマイズすることができます。

Googleカスタム検索のヘルプによると、以下のコードで記述すれば、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">

「YOUR SEARCH ENGINE ID goes here」の部分には、カスタム検索のIDを記述すればOKです。IDは、Googleカスタム検索のJavascriptコード内に記述されています。

<script>
  (function() {
    var cx = 'YOUR SEARCH ENGINE ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

Googleカスタム検索のJavascriptコードの取得については「Googleカスタム検索の設置方法」を参照してください。

HTMLフォームを使用した「カスタム検索ボックス」はこのようなデザインになります。検索ボックスの下にあるGoogleブランドの画像が表示されており、削除することは禁止されています。しかし、Googleブランド表示をJavascriptのコードに変更するのはOKです。コード例。

<form action="http://www.google.com/cse" id="cse-search-box">
<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>
<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

Googleブランド表示をJavascriptのコードに変更すると、このように検索ボックス内にGoogleブランドが表示されます。

以上で、HTMLフォームを使用したGoogleカスタム検索のデザイン変更の準備が整いました。あとはテーマやサイトに合わせてCSSを変更すれば、こんなデザインにも変更できます。

http://webkaru.net/より。