CSE競合設置検証(CASEa6-b1)

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

しかし、他の影響を排除した環境であれば問題なく動作していることを確認できます。
ただしスタイルは読み込みのタイミングによってどちらが適用されるかが都度異なってしまいます。
ここでは「結果のみ(デフォルト)」と「オーバーレイ(グリーンスカイ)」の複数設置例です。

検証

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

設置している組み合わせ

	アイコン	アイコン	テーマ
上段		結果のみ	デフォルト
下段		オーバーレイ	グリーンスカイ

実際に設置した例

読み込みのタイミングによってどちらのテーマ色が適用されるか変わります。
その為、何度か以下のフレームを更新すると不安定にデザインが変わります。
HTML上の出現順などは関係がないようです。

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

設置に利用したHTML例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CustomSearchEngineテスト・CASEa6-b1</title>
</head>
<body>
<h1 >CustomSearchEngineテスト・CASEa6-b1</h1>
<div>
<h3>CSEa6：結果のみ(デフォルト)</h3>
<script>
  (function() {
    var cx = '012287356486321653031:nxk4i8idcsm';
    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:searchresults-only></gcse:searchresults-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>CSEb1：オーバーレイ(グリーンスカイ)</h3>
<script>
  (function() {
    var cx = '012287356486321653031:pwqksiu8tek';
    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:search></gcse:search>
<p>CSEa6の結果コードはwordpresss(search.php)で表示されます。</p>
<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>以下の検索ボックスは擬似的に標準検索を設置(for CSEa6)</p>
<div class="search">
  <form method="get" class="searchform" action="http://algorhythnn.jp/blg/" target="_blank">
    <label for="s" class="assistive-text">Search for:</label>
    <input type="text" class="field" name="s" id="s" value="Search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search">
  </form>
</div>
<p style="color:red;">中途半端な表示に思われる際は「フレームを再読込み」または「再読込み」を実行し、<br />
カスタム検索エンジンのリロードを行ってください。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CustomSearchEngineテスト・CASEa6-b1</title>

</head>

<body>

<h1 >CustomSearchEngineテスト・CASEa6-b1</h1>

<div>

<h3>CSEa6：結果のみ(デフォルト)</h3>

(function() {

var cx = '012287356486321653031:nxk4i8idcsm';

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:searchresults-only></gcse:searchresults-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>CSEb1：オーバーレイ(グリーンスカイ)</h3>

(function() {

var cx = '012287356486321653031:pwqksiu8tek';

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:search></gcse:search>

<p>CSEa6の結果コードはwordpresss(search.php)で表示されます。</p>

<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>以下の検索ボックスは擬似的に標準検索を設置(for CSEa6)</p>

<label for="s" class="assistive-text">Search for:</label>

</form>

</div>

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

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

</body>

</html>

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

逆順で設置した例

逆順で設置した場合も、何度か更新をすると
タイミングによってはスタイルが異なったもので表示されるのが確認できます。

直接ウィンドウで開く場合： CustomSearchEngineテスト・CASEa6-b1r
検索向けAdSenseとカスタム検索エンジンの違いは以下でご紹介しています。

Google™AdSenseの検索向けユニット(AFS)とカスタム検索ユニット(CSE)の違い

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

さいごに

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

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

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