CSE単独設置検証(CASE6-0) – 結果のみ

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

単独設置と複数設置のパターンを確かめることを目的として、
ここでは「結果のみ(未選択)」単独設置の例をご紹介します。

検証

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

設置している組み合わせ

	アイコン	アイコン	テーマ
上段		結果のみ	未選択
下段	なし

実際に設置した例

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

設置に利用したHTML例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CustomSearchEngineテスト・CASE6-0</title>
</head>
<body>
<h1 >CustomSearchEngineテスト・CASE6-0</h1>
<div>
<h3>CSE16：結果のみ</h3>
<script>
  (function() {
    var cx = '012287356486321653031:ezgpx0y2-1i';
    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>
<p>以下の検索ボックスは擬似的に標準検索を設置(for CSE16)</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テスト・CASE6-0</title>

</head>

<body>

<h1 >CustomSearchEngineテスト・CASE6-0</h1>

<div>

(function() {

var cx = '012287356486321653031:ezgpx0y2-1i';

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>

<p>以下の検索ボックスは擬似的に標準検索を設置(for CSE16)</p>

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

</form>

</div>

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

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

</body>

</html>

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

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

このようにして一通りの組み合わせの確認を行っています。
Google™検索向けAdSense(AFS)とカスタム検索ユニット(CSE)とその他

さいごに

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

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

その他のレイアウト設定で配置した例については以下でご紹介しています。

No	レイアウト	動作例
1	オーバーレイ	(オーバーレイ)Google™サイト内検索のレイアウト導入方法と実際動作
2	２ページ	(２ページ)Google™サイト内検索のレイアウト導入方法と実際動作
3	全幅	(全幅)Google™サイト内検索のレイアウト導入方法と実際動作
4	２列	(２列)Google™サイト内検索のレイアウト導入方法と実際動作
5	コンパクト	(コンパクト)Google™サイト内検索のレイアウト導入方法と実際動作
6	結果のみ	(結果のみ)Google™サイト内検索のレイアウト導入方法と実際動作
7	Goolgeがホスト	(Googleがホスト)Google™サイト内検索のレイアウト導入方法と実際動作

参考

Googleのヘルプでも同様のサンプルが提示されています。

Custom Search Element Control API – Custom Search — Google Developers#layout

Results only

Search via URL

Search via search box

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