googleカスタム検索 表示崩れ

googleカスタム検索の表示崩れ。原因を特定して修正を考えるのが面倒なんで、以前のコードに修正をちょっと加えたら使えたのでご報告。

今回使用しているのはgoogleアドセンスから作成したカスタム検索。

作成、取得方法は

1. adsense ホーム
2. 広告の設定
3. 検索
4. カスタム検索エンジン
5. 新しいカスタム検索エンジン

で取得したコードがこれ。

<script>
(function() {
var cx = 'partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

上記のコードを利用すると、表示が崩れて見栄えがいまいち。

白紙のHTMLではきれいに表示されるが、wordpress上に置くと表示が崩れる。

テーマを変更すると表示が崩れたり崩れなかったりで、テーマごとも安定していない。

ちなみに現在利用中のテーマは simlicity2

で、別のサイトに以前設置したgoogleカスタム検索があったんで、確認してみるとコードちょっと違うやん。

これ、わかりやすいし使えそう。

<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-yyyyyyyyyyyyyyyy:yyyyyyyyyy" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="32" />
<input type="submit" name="sa" value="&#x691c;&#x7d22;" />
</div>
</form>
<script type="text/javascript" src="//www.google.co.jp/cse/brand?form=cse-search-box&amp;lang=ja"></script>

今回新しく制作したカスタム検索エンジンの partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx 部分を上記の古い partner-pub-yyyyyyyyyyyyyyyy:yyyyyyyyyy と差し替えて置いてみたところ表示崩れは直りました。

検索を試しても不具合なし。

最新の Custom search のコードで表示が崩れた場合、簡単なんで試してみてください。