Googleカスタムサーチのカスタマイズ方法

|

以前までGoogleのサイト内検索を利用していたのですが、新しくリニューアルされたためか表示がおかしくなっていたので、自分でカスタマイズしてみました。

表示を変更する際、HTMLフォームを利用してカスタマイズする方法が一般的かと思いますが、今回はJavascriptのタイプをCSSでカスタマイズしています。

このカスタマイズ方法についてですが、Chromeのデベロッパーツールなどでカスタム検索の要素IDなどを調べ、CSSで表示を調整するという方法です。

ただ、スタイルがHTMLタグに直で記述されているため、CSSに記載するだけではデフォルトの表示が上書きされないようです。そのため、わたしは「!important」を多用して強制的に上書きしてみましたが、この方法でうまくいきました。

あくまで参考までになりますが、わたしはCSSを以下のようにカスタマイズしてみました。

検索結果をサイト内で表示するか、それともGoogleにするかで1行目などのコードが違うかと思いますが、おおむね、以下のような感じでカスタマイズしていけばよいかもしれません。

.gsc-control-cse {padding: 0 !important;}
table.gsc-search-box {border-left: none !important;border-top: none !important;}
table#gs_id50 {border-left: none !important;border-top: none !important;}
table.gsc-search-box td {border-right: none !important;border-bottom: none !important;}
.gsc-search-button-v2 {border-color: #ccc !important;background-color: #666 !important;}

わたしがやったのは、ボーダーをなくし、検索ボタンを白黒にしてシンプルな形で表示しましたが、ほかにもボーダーを丸くしたりするとよいかもしれません。

新しいタイプのサイト内検索の方が、Googleのブランドロゴがかっこよかったため、最新のものを使用してカスタマイズした方が良いかと思います。ブランドロゴは必ず表示しなければならないため、デフォルトの「ENHANCED BY Google」の表示を消すのはNGになるはずです。

また、アドセンスのサイト内検索で収益化している場合、カスタマイズによって規約違反になってしまうのかは不明ですので、通常の一般的なカスタム検索で利用されることをおすすめします。