CSE競合設置検証(CASEc6-b1)
カスタム検索エンジンを1ページ内に複数設置する際に、
どちらかのスタイルが適用されていなかったり、正しく表示されない場合もあるかもしれません。
しかし、他の影響を排除した環境であれば問題なく動作していることを確認できます。
ただしスタイルは読み込みのタイミングによってどちらが適用されるかが都度異なってしまいます。
ここでは「結果のみ(バブルガム)」と「オーバーレイ(グリーンスカイ)」の複数設置例です。
検証
複数設置がうまくいかないパターンがどの組み合わせで発生するのかと、
検証することを目的に始めた組み合わせパターン試験ですが、
結果として組み合わせによっては想定した動作が得られない場合もありますのでご紹介しておきます。
設置している組み合わせ
アイコン | アイコン | テーマ | |
---|---|---|---|
上段 | オーバーレイ | グリーンスカイ | |
下段 | 結果のみ | バブルガム |
実際に設置した例
読み込みのタイミングによってどちらのテーマ色が適用されるか変わります。
その為、何度か以下のフレームを更新すると不安定に色が変わります。
HTML上の出現順などは関係がないようです。
直接ウィンドウで開く場合: CustomSearchEngineテスト・CASEc6-b1r
設置に利用した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 57 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CustomSearchEngineテスト・CASEc6-b1r</title> </head> <body> <h1 >CustomSearchEngineテスト・CASEc6-b1r</h1> <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> <div> <h3>CSEc6:結果のみ(バブルガム)</h3> <script> (function() { var cx = '012287356486321653031:usn_zhigxue'; 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 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> |
※なお、設置しているカスタム検索エンジンは検索向け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