ボクのブログでは、Google AdSense(グーグル・アドセンス)の広告の設置しています。
今回は、WordPress(ワードプレス)のテーマ「Simplicity2(シンプリシティー2)」で、 Googleカスタム検索(検索向け広告)を設置してみました。
ところが Googleカスタム検索の表示を確認すると、表示が崩れていました。
スタイル定義(CSS)を追加して、その崩れた表示を調整します。
カスタム検索の見ためを整える
サイドメニュー > 外観 > CSS編集 へと移動して、カスタム検索(JavaScript版)の表示がきれいに見えるように、スタイル定義(CSS)を追加してみました。
本来のデザインを尊重バージョン
とりあえず、本来のデザインを尊重して、必要最低限の修正をしてみました。
CSS適用前 CSS1適用後
/*******************************
* 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更新)
普通のままだとつまらないので、ほんの少しだけ調整してみました。
CSS適用前 CSS2適用後
/******************************
* 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)の追加が必要になります。
とりあえず、これで様子見です。
コメント