Googleカスタム検索をカスタマイズ

2016年9月11日

あまり使っていただいている方はおられないと思うんですが、このサイトに設置しているGoogleカスタム検索の窓について、カスタマイズを試みました。

Googleカスタム検索のデザインを変更

Googleさんから指定いただいた通りに設置していたんですが、テキストラインが下にズレ落ち、ボックスの下線が消えていたので、何とかして修正しようと試みてみたんですが、JavaScriptで構成されていたので何ともカスタマイズできず、ネット上を検索してみても特定の原因でこのような表示になっているのではないようだったので、修正をあきらめていました。

所が、Googleさんのヘルプページの中に「HTMLフォームを使用した検索ボックスの作成」というページを発見し、「サポートは提供していない」とか、「Googleブランドを記載してください」等の指示はあるものの、HTMLのフォームを使用した実装が可能なのでGoogleカスタム検索について、JavaScript仕様での利用から抜け出し、従来のHTMLフォームによる埋め込みに変更しました。

フォームの内容は......

  1. <div id="SEARCH-BOX">
  2. <form id="cse-search-box" action="http://google.com/cse">
  3. <input type="hidden" name="cx" value="Googleカスタム検索エンジンID">
  4. <input type="hidden" name="ie" value="UTF-8">
  5. <input type="text" name="q">
  6. <input type="submit" name="sa" value="Search" class="right_all">
  7. </form>
  8. <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>
  9. </div>

こんなです。
Googleさんのヘルプページに記載されていたフォームの下にあるgifファイルについては、Googleの検索エンジンを利用していますっていう著作表示なんですが、この部分にいついては、テキスト入力フィールドの中に入れたかったので、JavaScriptで実装しました。

このように、HTMLフォームで実装すれば、デザインをCSSで自由に変更することが可能になるので、まずはシンプルに設置し、今後どのようになっていくかは、、、判りませんが、わたし的には、自由度が増したって感じです。

問題は、表示されているページの上に覆いかぶさったような表示(今風の...... ^^)になっていたんですが、今回の変更で、検索を実行すると、このサイトから一旦、Googleカスタム検索ページに遷移して結果が表示され、広告をクリックされなかったら、このサイトに戻っていただけるようになったことです。
Googleアナリティクスの分析結果が変わるかと、ちょっと気になります。