頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

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

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

コンパクト

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

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

表示の例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15_コンパクト・全幅比較

コンパクト・全幅比較

さいごに

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

No レイアウト 動作例
1 オーバーレイ (オーバーレイ)Google™サイト内検索のレイアウト導入方法と実際動作
2 2ページ (2ページ)Google™サイト内検索のレイアウト導入方法と実際動作
3 全幅 (全幅)Google™サイト内検索のレイアウト導入方法と実際動作
4 2列 (2列)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. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

プロモーション(btm)

Google or AdMax Promotion (it)

 - Google, 検索ボックス

  関連記事

eye_google
Google™サイト内検索(カスタム検索エンジンv2)でプロモーションをXMLで定義する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google
Google™Mapの「以前のマップ」で作成したマイプレイスを「新しいGoogleマップ」に移行する手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google
Google™アカウントの登録手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google
Google™Chromeにタグアシスタント(TagAssistant)機能拡張のインストール

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_gmail
(Apps独自ドメイン編)Gmail™サブメールアドレスの設定方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google_pls
Google+プロフィールの画像を変更・削除を行う手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_chrome
Google™Chromeで起動時によくアクセスするページを自動で一気に開く方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_ios
(iPhone)Google+のPC版サイトをiPhone®で表示する方法

Google or AdMax Promotion(cel) 禁断の機能がau公 …

eye_google
Googleクラウドプリントが便利

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_blogger
Blogger™に割り当てたBloggerプロフィールの公開がうまくいかない場合

Google or AdMax Promotion(it) 禁断の機能がau公式 …