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

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

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

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

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

カスタム検索の見ためを整える
1. 本来のデザインを尊重バージョン
2. ほんの少し調整バージョン（2019.01.30更新）
あとがき

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

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

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

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

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

/* カスタム検索 全体 */
table.gsc-search-box {
  height: 32px;
}

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

/* カスタム検索 検索ボタン */
table.gsc-search-box button.gsc-search-button {
  margin-bottom: 0;
  width: 69px;
}

修正内容：

入力欄へ文字を入力したときに、カスタム検索全体の高さが変わらないように、32pxに固定した
入力欄の中の邪魔な影を消した
検索ボタンの下のマージンを消して、入力欄と検索ボタンの位置を合わせた
検索ボタンの中にアイコン（虫めがね）が表示されるように幅を広げた（69px=1+27+13+27+1、ボーダー：1px、パディング：27px、画像：13px）

ほんの少し調整バージョン（2019.01.30更新）

普通のままだとつまらないので、ほんの少しだけ調整してみました。

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

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

table.gsc-search-box td.gsib_a {
  padding-bottom: 4px;
}

table.gsc-search-box input.gsc-input {
  box-shadow: none;
}

table.gsc-search-box .gsc-input-box {
  border-radius: 4px 0 0 4px / 4px 0 0 4px;
}

/* カスタム検索 検索ボタン */
table.gsc-search-box button.gsc-search-button {
  margin: 0;
  padding: 5px 0;
  width: 48px;
  border-radius: 0 4px 4px 0 / 0 4px 4px 0;
}

table.gsc-search-box button.gsc-search-button:hover {
  opacity: .7;
}

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

修正内容：