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

ワードプレス
この記事は約6分で読めます。

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

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

【収益化】アドセンスの検索向け広告をワードプレスのサイドバーに設定しました
ボクのブログでは、Google AdSense(グーグル・アドセンス)の広告の設置しています。 今回は、WordPress(ワードプレス)のテーマ「Simplicity2(シンプリシティー2)」で、 Googleカスタム検索(検索向け広告)を設置してみました。 カスタム検索のコードは、Jav...

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

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

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

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

修正内容:

  • カスタム検索の下に、マージン(2em)を追加した。
  • 入力欄の中に検索ボタンを配置するため、カスタム検索のポジションを相対位置(relative)にした。
  • カスタム検索の背景の不要な色を消した。
  • 入力欄の周囲のパディングを 0 にした。
  • 入力欄のボーダーの角を丸くし(4px)、背景色(#fff)を指定した。
  • 入力欄の中のパディングを調整した(11px)。
  • 入力欄の「×」ボタンが隠れてしまわないように、右パディング(36px)を調整した。
  • 入力欄の中に検索ボタンを配置するため、検索ボタンのポジションを絶対位置(absolute)にした。
  • 検索ボタンの周囲のパディングを 0 にして、ボーダーを消した。
  • 検索ボタンの幅を指定して(36px)、右端に寄せ、垂直中央に配置した。
  • 検索ボタンにマウスポインターを乗せたとき、形が変わるようにした。
  • 検索ボタンの中のアイコン(虫めがね)が、大きく表示されるようにした(21x21px)。

カスタム検索のスタイル(デザイン)

残りは Google AdSense のカスタム検索のスタイル(デザイン)のカスタマイズで修正しました。

【デザイン】アドセンスの検索向け広告のスタイルのうち、変更したのはボタンの色ぐらい
ブログを収益化(マネタイズ)するため、Google AdSense(グーグル・アドセンス)の広告の設定をしています。 Googleカスタム検索(検索向け広告)の設置と CSS による調整が済みました。 つぎは、レイアウト、テーマ、ボタンや枠線の色などのスタイルを変更してみます。 カ...

カスタム検索 カスタマイズ 検索ボックス

作業手順:

  1. 検索ボックスの枠線の色を「CCCCCC」に変える。

カスタム検索 カスタマイズ 検索ボタン

作業手順:

  1. 検索ボタンの枠線の色を「FFFFFF」に背景色を「FFFFFF」にアイコンの色を「CCCCCC」に変える。
  2. 「保存」ボタンをクリック。

モバイルでの表示を確認

カスタム検索のモバイル表示

一応、モバイルでの表示も確認しましたが、カスタム検索の表示は崩れていませんでした。

あとがき

検索窓(灰)

今回の修正では、背景色を白色にするだけだと簡単過ぎるので、WordPress標準の検索ボックスに似せるところまで、やってみました。

さらに自分の好みにするためには、スタイル定義(CSS)の追加が必要になります。
しばらくは、これで様子見です。

コメント

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