CSEテーマ：シャイニー表示例

カスタム検索エンジンや検索向けAdSenseではカスタム検索エンジンの編集画面から、
様々なテーマが選択できます。

テーマと実際の検索結果の表示スタイルを以下で実際に試すことができます。
ここでは「シャイニー」デザインをご紹介します。

はじめに

カスタム検索エンジンの選択可能なテーマでは、
検索ボックスのデザインだけでなく、実際に検索を行った結果のスタイルも変更されます。

プリビューエリアでもデザインの確認は行えますが、以下で実際に動作を確認することができます。

実際に設置した例

直接ウィンドウで開く場合： CustomSearchEngineテスト・CASEtheme6-0

設置に利用したHTML例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CustomSearchEngineテスト・CASEtheme6-0</title>
</head>
<body>
<h1 >CustomSearchEngineテスト・CASEtheme6-0</h1>
<div>
<h3>CSEtheme6：シャイニー</h3>
<script>
  (function() {
    var cx = '012287356486321653031:vxm50itf5dq';
    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>

<!DOCTYPE html>

<head>

<title>CustomSearchEngineテスト・CASEtheme6-0</title>

</head>

<body>

<h1 >CustomSearchEngineテスト・CASEtheme6-0</h1>

<div>

<h3>CSEtheme6：シャイニー</h3>

(function() {

var cx = '012287356486321653031:vxm50itf5dq';

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. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。