Googleカスタム検索フォームは発行されたコードを貼りつけてjavascriptにより表示させますが、
デフォルトの仕様では余白付き・ボタンが灰色と、設置した際に妙に浮いてしまう場合があります。
既存のデザイン・レイアウトに馴染ませる為に、余白や検索ボタンの色を変更します。
Google側のCSSを自動で読んでしまうため、important指定で優先的に効くように記述をしました。
■余白を失くす
.gsc-control-cse { padding: 0em!important; }
上記を既存のCSSに追記します。
今回は余白を消したいだけだったので余白のみ指定しておりますが、
他の調整をしたい場合は同様に!important指定をしてスタイルを併記すればOKです。
■ボタンの色変更
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #E98B36!important;
background-color: #EB984A!important;
}
ボタンの色を変更するのみであればボーダーと背景色変更のみでOK。
Twitter、facebookウィジェット等のiframeで表示させる系はデザイン変更が面倒なのですが、
今回のGoogleの様なjavascriptで表示させる系はデザインが自由に変更出来て大変良いです。
※Googleカスタム検索やSNSウィジェットなど他社のサービスの自動表示は
プログラムやcssを引っ張ってきて表示させているので、
仕様変更によってはガラッと見た目が変わってしまう可能性もあります。
そのため、定期的に見た目を確認する必要があります。
また、表示の仕様が変更になった際は、手動調整が必要になる場合もあります。
