Googleサイト内検索のデザインをカスタムした。

2022年3月8日

　先日Google検索の埋め込み方についての記事を掲載いたしました。

サイト内Google検索を埋め込む

埋め込むだけならば、「Googleサイト内検索」から設定すればそれなりにできます。

そこで今回は「Googleサイト内検索のデザインを変更します」

ある程度のデザインは、Google管理画面からできますが、がっつり変更はできません。
何とかできないかとググり、試行錯誤して思う形にできました。
忘備録として記録いたします。

やりたいことはこのような感じです。

埋め込み型Google標準フォームを次のようにデザイン変更します。

見た目が変わると印象も変わります。
サイト内検索もデザインを変えられれば、サイトに同化します。

論より証拠。完成したものがこちら

Google埋め込み検索は、タグ等が表示されないためデザイン変更ができなさそうですが、存在しているCSSならば、値を変更することができます。

実際にスタイルシートだけでデザインしたものがこちらです。

検索すると、google検索が動きます。

デザイン変更はCSSの「上書き」で実現

Google埋め込み検索はタグもスタイルシートもグーグル側にあります。
そのため、タグの変更はできません。

そこで、使われているCSSの値を上書きしてデザイン変更を実現しています。

正直使われているCSSを調べるのに苦労しました。
何しろタグ表示されません。

根性でググって使用されているスタイルシートをしらべ、上書きしてゆきました。

ソースはこちら

今回のソースはこちらです。

!important　記述が多いのは、強制上書きしなければならない部分が多いためです。
全体を見ると、何をやっているのかさっぱりわからないので、部分的に見ていきます。
結構力業のやり方になります。

具体的なデザイン変更の方法解説

それでは、具体的な方法について解説いたします。
今回デザインを変更するのは大きく以下の3つになります。

1. 外枠のデザイン変更（角丸で青線）
2. キーワード入力部分のデザイン変更（枠を消して角丸）
3. ボタンデザインの変更（背景を消す）

（１）外枠のデザインを変更します。

外枠を角丸にして青色にします。
キーワード入力欄と、ボタンがひとくくりになるとかっこいいです。

■CSSの記述はこちらです。

.gsc-control-cse　は外枠のスタイルシートです。
この部分を書き換えると、以下のようになります。

いろいろはみ出ていますが、外枠は青色線、角丸になりました。
下の部分に隙間があるのが気になるので、隙間をなしにします。

（２）不要な隙間を消す

キーワード入力部分を囲っているスタイルシートがあるので、マージンを0にします。

■CSSの記述はこちらです。

これを適用するとこのような表示になります。

隙間がなくなりぴったりはまりました。
外枠部分の調整は以上になります。

次は、キーワード入力部分を調整します。
線が邪魔なのと、せっかくの青色の外枠からはみ出ているので何とかします。

（３）キーワード入力部分のデザインを変更する

キーワード入力部分が四角いので、角丸にして線を消します。

■CSSの記述はこちらです。

これを適用するとこのように表示されます。

だいぶそれらしくなってきました。
ただ外枠を角丸にした分、キーワード入力部分が左に寄っているように見えるので、右へずらします。

（４）キーワード入力部分を右へずらす

外枠の内側に.gsib_a　というスタイルシートがあるので、これに左余白を設定します。

■CSSの記述はこちらです。

このスタイルシートを適用すると、次のように表示されます。

これでキーワード入力部分の調整ができました。
次は、ボタンのデザインをカスタイマイズします。

（５）ボタンの枠線と背景を消す

ボタンをアイコンだけにするために、背景の灰色と枠線を消します。

■CSSの記述はこちらです。

.gsc-search-button-v2　はボタンのデザインを指定しているので、片っ端から色なし、線なしにしてゆきます。ついでに余白も調整します。

適用すると次のように表示されます。

全部消したので、真っ白になります。
ボタンは存在していますが見えないので、検索アイコンに色を付けます。

（６）検索アイコンに色を付ける

Googleの検索ボタンは、画像ではなく埋め込みSVGであるため、スタイルシートでの色変更ができます。埋め込み画像ならば詰んでいました・・。

■CSSの記述はこちらです。

このスタイルシートを適用すると、次のように表示されます。

ここまで来たら、ほぼ完成です。
あとは、デフォルト文字を指定します。

（７）「サイト内検索」の文字を埋め込む

検索窓に、デフォルト文字を入れれば、デザイン上完成といえます。
しかし、Google埋め込み検索はタグが表示されません。
そのため、「placeholder」を直接変更することができません。

そこで、Jqueryを使って間接的に設定します。

■CSSとスクリプトの記述はこちら

スタイルシートで指定しているのは、placeholderの色です。
デフォルトは黒味が強いので薄くします。
この部分はブラウザにより、指定方法が千差万別なので、たくさん記述します。

Jqueryは、attr()関数を使用します。
window.onloadにしているのは、Google埋め込み検索の読み込みが終わるのを待つためです。

これを適用すると、次のように表示されます。

これで意図したデザインになりました。
一見不可能ではないかとも思えましたが、何とかなるものです。

結論：やればできる

今回は外的要因が強く、直しても直しても意図した形になかなかできませんでした。
しかも、スマホで表示したら崩れたりなど、試行錯誤もたくさんしました。

なんどもくじけそうになりましたが、ググリ、ググリ、調整、調整、ググリを繰り返してようやくうまくできました。

何事も、辛抱強くトライすればできるものです。

本記事がまた皆様のお役に立てば幸いです。