CSEテーマ:バブルガム表示例
カスタム検索エンジンや検索向けAdSenseではカスタム検索エンジンの編集画面から、
様々なテーマが選択できます。
テーマと実際の検索結果の表示スタイルを以下で実際に試すことができます。
ここでは「バブルガム」デザインをご紹介します。
はじめに
カスタム検索エンジンの選択可能なテーマでは、
検索ボックスのデザインだけでなく、実際に検索を行った結果のスタイルも変更されます。
プリビューエリアでもデザインの確認は行えますが、以下で実際に動作を確認することができます。
実際に設置した例
直接ウィンドウで開く場合: CustomSearchEngineテスト・CASEtheme5-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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CustomSearchEngineテスト・CASEtheme5-0</title> </head> <body> <h1 >CustomSearchEngineテスト・CASEtheme5-0</h1> <div> <h3>CSEtheme5:バブルガム</h3> <script> (function() { var cx = '012287356486321653031:fzurh5lvtdi'; 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ユニットではありません。
検索向け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