CSE競合設置検証(CASE5-6)
カスタム検索エンジンを1ページ内に複数設置する際に、
どちらかのスタイルが適用されていなかったり、正しく表示されない場合もあるかもしれません。
しかし、他の影響を排除した環境であれば問題なく動作していることを確認できます。
ここでは「コンパクト(未選択)」と「結果のみ(未選択)」の複数設置例です。
検証
複数設置がうまくいかないパターンがどの組み合わせで発生するのかと、
検証することを目的に始めた組み合わせパターン試験ですが、
結果として組み合わせによっては想定した動作が得られない場合もありますのでご紹介しておきます。
設置している組み合わせ
アイコン | アイコン | テーマ | |
---|---|---|---|
上段 | コンパクト | 未選択 | |
下段 | 結果のみ | 未選択 |
実際に設置した例
直接ウィンドウで開く場合: CustomSearchEngineテスト・CASE5-6
設置に利用したHTML例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CustomSearchEngineテスト・CASE5-6</title> </head> <body> <h1 >CustomSearchEngineテスト・CASE5-6</h1> <div> <h3>CSE15:コンパクト</h3> <script> (function() { var cx = '012287356486321653031:pfi5tjuxjq8'; 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 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>CSE26:結果のみ</h3> <script> (function() { var cx = '012287356486321653031:bqmr4-0rdcm'; 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>CSE26の結果コードは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 CSE26)</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> |
※なお、設置しているカスタム検索エンジンは検索向けAdSenseユニットではありません。
検索向けAdSenseとカスタム検索エンジンの違いは以下でご紹介しています。
Google™AdSenseの検索向けユニット(AFS)とカスタム検索ユニット(CSE)の違い
このようにして一通りの組み合わせの確認を行っています。
複数設置の組み合わせ例【作成中】
さいごに
カスタム検索エンジンの複数設置自体は難しいことではありませんが、
WordPressなどのCMSに導入した場合などには既存のテーマによるCSSなど様々な複合的な要因で、
うまく設置ができない場合もあります。
そうした場合には、いったんシンプルなHTML上に設置して動作を確認してみるといいでしょう。
Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
公開日:
最終更新日:2014/12/04