(コンパクト)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

2014/02/19 2014/11/22

Google™カスタム検索エンジン(CSE)のデザインを行う際には、
様々なレイアウトを選択し、検索結果を表示するように選択することができます。

ここでは「コンパクト」レイアウトの実際の動作を確認できるように例示しておきます。
また導入方法についてもご紹介しておきます。

コンパクト

検索ボックスと検索結果をコンパクト形式で表示します。

実際に「コンパクト」の表示方法の確認は以下の投稿でご紹介しています。
CSE単独設置検証(CASE5-0) – コンパクト

表示の例

「コンパクト」表示では検索した結果が検索フィールドを設置した場所の直下に対して、
検索結果の表示を（ページの更新なしに）行う方法です。

検索フィールドに対してキーワードを入力し検索を実行します。

レイアウト「コンパクト」検索ボックス

検索結果が検索フィールドの直下に流し込まれて表示されます。

レイアウト「コンパクト」検索結果表示

尚、テーマの「全幅」と「コンパクト」は表示が似た設定ですが異なっています。
それぞれの違いについては以下で紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)の全幅とコンパクトの違い

コンパクトではサイドバーなど検索結果の
表示スペースが限られているような場合などにも適しています。

「コンパクト」スクリプト例

コンパクトを選択してスクリプトを取得すると以下のようなスクリプトが表示されます。

<script>
  (function() {
    var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';
    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>

(function() {

var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';

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>

コンパクトでは全幅同様に設置したエリアを利用した結果表示が行われます。
前述の「全幅」と「コンパクト」の違いで表示される結果数に違いがみられます。

サイドバーなどであまり多く結果表示を行いたくない場合にはこの設定が便利です。

カスタム検索エンジン・コンパクト

一見、全幅と同じように見えますが、結果表示の数にも違いがあります。

コンパクト・全幅比較

さいごに

カスタム検索エンジンはこのデフォルト設定で設置されていることが多いように思いますが、
様々なレイアウトを選択して設置することができますので、
デフォルトにこだわらず自身のサイトにあったレイアウトを選択されるといいでしょう。

No	レイアウト	動作例
1	オーバーレイ	(オーバーレイ)Google™サイト内検索のレイアウト導入方法と実際動作
2	２ページ	(２ページ)Google™サイト内検索のレイアウト導入方法と実際動作
3	全幅	(全幅)Google™サイト内検索のレイアウト導入方法と実際動作
4	２列	(２列)Google™サイト内検索のレイアウト導入方法と実際動作
5	コンパクト	(コンパクト)Google™サイト内検索のレイアウト導入方法と実際動作
6	結果のみ	(結果のみ)Google™サイト内検索のレイアウト導入方法と実際動作
7	Goolgeがホスト	(Googleがホスト)Google™サイト内検索のレイアウト導入方法と実際動作

カスタム検索エンジンのデザイン設定については以下で戻れます。

Google™サイト内検索(カスタム検索エンジンv2)のデザイン設定

参考

Custom Search Element Control API – Custom Search — Google Developers#layout

Compact

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