【ワードプレス】コクーンに設置した、カスタム検索のデザインを調整しました

ボクのブログでは、Google AdSense（グーグル・アドセンス）の広告の設置しています。

今回は、WordPress（ワードプレス）のテーマ「Cocoon（コクーン）」で、 Googleカスタム検索（検索向け広告）を設置してみました。

ところが Googleカスタム検索の表示を確認すると、表示がおかしくなっていました。
スタイル定義（CSS）を追加して、そのおかしくなった表示を調整します。

カスタム検索のコードは、JavaScript版を利用しています。

カスタム検索の見ためを整える
1. 本来のデザインを尊重バージョン
2. 標準の検索ボックス類似バージョン
あとがき

カスタム検索の見ためを整える

サイドメニュー > 外観 > CSS編集へと移動して、カスタム検索（JavaScript版）の表示がきれいに見えるように、スタイル定義（CSS）を追加してみました。

本来のデザインを尊重バージョン

とりあえず、本来のデザインを尊重して、必要最低限の修正をしてみました。

/******************************
 * Google カスタム検索
 *****************************/

/* カスタム検索 全体 */
table.gsc-search-box tr {
  background-color: #fff;
}

修正内容：

カスタム検索の背景色を白色（#fff）に戻した。

標準の検索ボックス類似バージョン

WordPress 標準の検索ボックスのデザインに、似せてみました。

なお入力欄の中に表示される「Google ブランド表示」のサイズが固定なので、入力欄のフォントサイズはそのままにしてあります。

スタイル定義

スタイル定義（CSS）でおおよそのところまで調整してみました。

カスタム検索の入力欄を横幅いっぱいまで広げて、その中に検索ボタンを配置しています。
文字を入力したときに表示される「×」ボタンも、隠れてしまわないように、左へずらしてあります。

/******************************
 * Google カスタム検索
 *****************************/

/* カスタム検索 全体 */
form.gsc-search-box.gsc-search-box-tools {
  margin-bottom: 2em;
}

table.gsc-search-box {
  position: relative;
}

table.gsc-search-box tr {
  background-color: transparent;
}

/* カスタム検索 入力欄 */
.gsc-search-box-tools table.gsc-search-box .gsc-input {
  padding: 0;
}

table.gsc-search-box .gsc-input-box {
  border-radius: 4px;
  background-color: #fff;
}

table.gsc-search-box .gsib_a {
  padding: 11px;
}

table.gsc-search-box .gsib_b {
  padding-right: 36px;
}

/* カスタム検索 検索ボタン */
table.gsc-search-box .gsc-search-button {
  position: absolute;
  padding: 0;
  border-style: none;
  width: 36px;
  top: 1px;
  right: 1px;
  bottom: 1px;
}

table.gsc-search-box button.gsc-search-button:hover {
  cursor: pointer;
}

table.gsc-search-box svg {
  width: 21px;
  height: 21px;
}

修正内容：