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

ワードプレス
この記事は約4分で読めます。
スポンサーリンク

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

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

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

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

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

サイドメニュー > 外観 > 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;
}

修正内容:

  • 入力欄の右のパディングを 0 にした
  • 入力欄の文字の下に、パディング(4px)を追加した
  • 入力欄の中の邪魔な影を消した
  • 入力欄と検索ボタンを合体した形で丸くした(4px)
  • 検索ボタンの周りのマージンを消して、入力欄と検索ボタンの位置を合わせた
  • 検索ボタンの左右のパディングを無くして、幅を狭くした(48px)
  • 検索ボタンにマウスポインターを乗せたとき、半透明になるようにした
  • 検索ボタンの中のアイコン(虫めがね)が、大きく表示されるようにした(20x20px)

あとがき

検索窓(青)

今回の修正は、Google カスタム検索の本来のスタイルに戻しただけです。
さらに自分の好みにするためには、スタイル定義(CSS)の追加が必要になります。

とりあえず、これで様子見です。

コメント

タイトルとURLをコピーしました