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