#0004 WpTHK adsense カスタム検索がつぶれるのを修正する

スマホ(Textのみ)⇔PC(Display)広告自動切換えテスト中(現在スマホ以外で表示中)

WpTHK テーマに adsense カスタム検索を貼り付けると以下のように潰れて表示されます。原因は Bootstrap にあるらしいとのこと。

今現在のGoogleカスタム検索のCSSは、box-sizing が content-box として使用されるようデザインされているみたいです。Bootstrapの標準は box-sizing が border-box ですよね（Bootstrap 3の場合）。この違いが表示に影響しているようです。

また入力フォームも、あまり外部から設定されることを想定されていないようです。

とのことです。引用元は以下のリンクですので、詳しくはそちらをどうぞ
BootstrapとGoogleカスタム検索を同時に使うと、検索ボタンが小さく潰れてしまう場合の解決方法

実際に何をすれば良いのかというと次のとおりです。

1.	『adsense カスタム検索』のコードを DIV で囲む

ここでは以下のように class='gglesearch' 属性をつけた DIV で囲んでいます。

<div class='gglesearch' style='height:50px;margin:0; border:0;'>
～
</div>

上のコードをサイドバー等に新規に追加したテキスト・ウィジェットの中に貼り付ければ OK です。

2.	style.css もしくは Headタグ(add-header.php) にスタイルシート(css)を記述する

以下のように、css を追加してください。

<style type="text/css">
/* adsense カスタム検索がつぶれてしまうのを回避する */
.gglesearch .gsc-control-cse * { box-sizing: content-box;}
.gglesearch .gsc-input {line-height: 1;}
</style>

これで以下のように本来の形に戻ります。

(注意)
カスタム検索のレイアウトで『オーバーレイ』を含むいくつかは上記の css 設定でうまくいくのですが、『google がホスト/新しいウィンドゥ』では駄目でした。まだ他に設定が必要なようですが、良い情報が見つからないのでとりあえずここまでとすることにしました。

wrote by tasa.