Googleカスタム検索は、自分のサイト内をGoogleエンジンで検索できるサービスです。
検索ボックスをサイトに設置して使用します。
デフォルトのサイト内検索よりも高速に動作し、アナリティクスやアドセンスとの連携も可能です。
作成した検索ボックスを設置したところなんだか表示が崩れてしまったので、解決までを備忘録的に書き残しておきます。
表示の崩れ
Googleカスタム検索から生成したコードをそのまま貼り付けると、画像のように表示がずれてしまいました。
この原因を探ります。
（おま環なんでしょうか…）
原因
見た感じ、影や線が上乗せされているっぽい。
Firebugで眺めていると、どうも余計な値を継承しているようす。
input[type=”text”]のbox-shadowやline-heightが干渉していそうです。
これは、入力フォームを縁取る影と文字一行の縦幅を指定するパラメータです。
また、Simplicityで入力フォームを選択すると、デフォルト状態の場合濃いピンクの影と枠線がフォームのフチに現れます。
ピンクの影と枠線はinput[type=”text”]:focusで指定されています。
干渉してそうなこいつらをリセット、非表示にしてみましょう。
解決法
子テーマのstyle.cssに以下を追記します。
#gsc-iw-id1 input[type="text"] {
border: none;
box-shadow: none;
line-height: normal;
}
枠線と影を非表示、行高さをデフォルトのnormalにしてリセットを図ります。
うまいこといきましたね。
おまけ
ウォーターマークを消す
デフォルトの状態だと、検索ボックスにうっすらとGoogleカスタム検索という文字（画像）が表示されるようになっています。
input.gsc-input {
background-image:none !important;
}
背景画像の指定を無しにすると消えます。
幅の微調整
検索ボックスはpaddingで上下左右に13px程度の余白が空けられています。
サイドバーに設置したとき、幅を他の要素と合わせたかったので余白を無しにします。
div.gsc-control-cse.gsc-control-cse-ja {
padding: 0;
}
これだと上下左右すべての余白が無くなります。
padding: (上下の余白)px (左右の余白)px;
あるいは、
padding: (上の余白)px (右の余白)px (下の余白)px (左の余白)px;
で調整できます。上下・左右の順と、上から時計回りの順で値を指定します。
入力フォームの縁取り色
入力フォームに表示される枠線や影を今回の場合は非表示としましたが、検索ボックス以外の入力フォームに指定してやるとデフォルトだとピンクだった表示の色を変更できます。
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus {
background: #fff;
border: 1px solid #22c7e8;
box-shadow: 0 0 3px rgba(34, 199, 232, 1);
color: #555;
}
テキスト入力フォームだけでなく、コメント入力欄など色々な入力フォームを選択したときの動作を指定しています。
フォームの背景は白、枠線と影の色を青っぽい色（このブログで多用している色）にしています。
この記事の件ともはや関係ないですね。
おわり。
コメント