CSE単独設置検証:グリーンスカイ(CASEb4-0)
カスタム検索エンジンを1ページ内に複数設置する際に、
どちらかのスタイルが適用されていなかったり、正しく表示されない場合もあるかもしれません。
単独設置と複数設置のパターンを確かめることを目的として、
ここでは「2列(グリーンスカイ)」単独設置の例をご紹介します。
検証
複数設置がうまくいかないパターンがどの組み合わせで発生するのかと、
検証することを目的に始めた組み合わせパターン試験ですが、
結果として組み合わせによっては想定した動作が得られない場合もありますのでご紹介しておきます。
設置している組み合わせ
アイコン | アイコン | テーマ | |
---|---|---|---|
上段 | 2列 | グリーンスカイ | |
下段 | なし |
実際に設置した例
直接ウィンドウで開く場合: CustomSearchEngineテスト・CASEb4-0
設置に利用した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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CustomSearchEngineテスト・CASEb4-0</title> </head> <body> <h1 >CustomSearchEngineテスト・CASEb4-0</h1> <div> <h3>CSEb4:2列(グリーンスカイ)</h3> <script> (function() { var cx = '012287356486321653031:-ilgbntafcc'; 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:searchbox></gcse:searchbox> <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> <p>CSEb4結果コード</p> <gcse:searchresults></gcse:searchresults> </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