CSE競合設置検証(CASE7-2)

カスタム検索エンジンを１ページ内に複数設置する際に、
どちらかのスタイルが適用されていなかったり、正しく表示されない場合もあるかもしれません。

しかし、他の影響を排除した環境であれば問題なく動作していることを確認できます。
ここでは「Googleがホスト(未選択)」と「２ページ(未選択)」の複数設置例です。

検証

複数設置がうまくいかないパターンがどの組み合わせで発生するのかと、
検証することを目的に始めた組み合わせパターン試験ですが、
結果として組み合わせによっては想定した動作が得られない場合もありますのでご紹介しておきます。

設置している組み合わせ

	アイコン	アイコン	テーマ
上段		Googleがホスト	未選択
下段		２ページ	未選択

実際に設置した例

直接ウィンドウで開く場合： CustomSearchEngineテスト・CASE7-2

「２ページ」の動作は指定したURLのサイトで結果ページの表示を行う為、
ここでは、当サイト(http://algorhythnn.jp/blg/)上での表示を行っています。
尚、実行後はブラウザの「戻る」にてフレームの表示を戻すことができます。

設置に利用したHTML例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CustomSearchEngineテスト・CASE7-2</title>
</head>
<body>
<h1 >CustomSearchEngineテスト・CASE7-2</h1>
<div>
<h3>CSE17：Googleがホスト</h3>
<script>
  (function() {
    var cx = '012287356486321653031:7h82wywso_m';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

<p style="font-size:11px;vertical-align: top;">powered by <img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"><p>
</div>
<div>
<h3>CSE22：２ページ</h3>
<script>
  (function() {
    var cx = '012287356486321653031:5vor9lrbkum';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

<p style="font-size:11px;vertical-align: top;">powered by <img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"><p>
</div>
<p style="color:red;">中途半端な表示に思われる際は「フレームを再読込み」または「再読込み」を実行し、<br />
カスタム検索エンジンのリロードを行ってください。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CustomSearchEngineテスト・CASE7-2</title>

</head>

<body>

<h1 >CustomSearchEngineテスト・CASE7-2</h1>

<div>

<h3>CSE17：Googleがホスト</h3>

(function() {

var cx = '012287356486321653031:7h82wywso_m';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:searchbox-only></gcse:searchbox-only>

<p style="font-size:11px;vertical-align: top;">powered by <img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"><p>

</div>

<div>

(function() {

var cx = '012287356486321653031:5vor9lrbkum';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:searchbox-only></gcse:searchbox-only>

<p style="font-size:11px;vertical-align: top;">powered by <img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"><p>

</div>

<p style="color:red;">中途半端な表示に思われる際は「フレームを再読込み」または「再読込み」を実行し、<br />

カスタム検索エンジンのリロードを行ってください。</p>

</body>

</html>

※なお、設置しているカスタム検索エンジンは検索向けAdSenseユニットではありません。

検索向けAdSenseとカスタム検索エンジンの違いは以下でご紹介しています。
Google™AdSenseの検索向けユニット(AFS)とカスタム検索ユニット(CSE)の違い

このようにして一通りの組み合わせの確認を行っています。
複数設置の組み合わせ例【作成中】

さいごに

カスタム検索エンジンの複数設置自体は難しいことではありませんが、
WordPressなどのCMSに導入した場合などには既存のテーマによるCSSなど様々な複合的な要因で、
うまく設置ができない場合もあります。

そうした場合には、いったんシンプルなHTML上に設置して動作を確認してみるといいでしょう。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。