以前までGoogleのサイト内検索を利用していたのですが、新しくリニューアルされたためか表示がおかしくなっていたので、自分でカスタマイズしてみました。
カスタムサーチのデザインを変更する際、HTMLフォームを利用してカスタマイズする方法が一般的かと思いますが、今回はJavascriptタイプのサイト内検索をCSSでカスタマイズしています。
このカスタマイズ方法についてですが、Chromeのデベロッパーツールなどでカスタム検索のID要素などを調べ、サイトのCSSで表示を調整するという方法です。
ただ、カスタム検索のデフォルトのスタイルがHTMLタグに直で記述されているため、サイトのCSSに記載するだけでは上書きされません。スタイル適用の優先度はHTMLタグに直接記載したstyle属性の方が高いため、CSSに記述した内容は適用されないからです。
そのため、わたくしはCSSに「!important」を多用して強制的に上書きしてみましたが、この方法でうまくいきました。
あくまで参考までになりますが、CSSを以下のようにカスタマイズしてみました。
検索結果をサイト内で表示するか、それともGoogleにするかで１行目などのコードが違いますが、おおむね、以下のような感じでカスタマイズしていけばよいと思います。
.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」の表示を消すのはＮＧになります。
また、アドセンスのサイト内検索で収益化している場合、カスタマイズによって規約違反になってしまうのかは不明ですので、通常の一般的なカスタム検索を利用されることをおすすめします。