Google™サイト内検索(カスタム検索エンジンv2)のデザイン設定
2014/11/22
サイト内検索ボックス(カスタム検索エンジン)を設置する方法として、
検索として一般的なGoogle™の検索インデックスを利用した、
検索ボックス(カスタム検索エンジン)を設置する方法があります。
このGoogleのカスタム検索エンジンは検索結果のページを、
様々なレイアウトからデザインの変更を行うことができます。
ここでは変更可能なデザインをご紹介します。
はじめに
Google検索ボックスの設置方法は特に説明の必要はないとは思うのですが、
思った以上に設定項目が多くあり少し驚きました。
こうしたデザインの変更もその一つです。
尚、カスタム検索エンジンを利用するにはGoogleアカウントを作成し、
カスタム検索エンジンを作成する必要があります。
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法
カスタム検索エンジンのカスタマイズ全般に関しては以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法
環境
- wordpress:3.5.1
- 利用テーマ: Twenty Twelve
- カスタム検索エンジン: version 2
カスタム検索エンジンのデザイン設定
カスタム検索エンジンのデザインをデザインを変更するには、
作成したカスタム検索エンジンでサイドメニューから[デザイン]を選択します。
注意事項
※レイアウトを変更した場合最下部の[保存してコードを取得]をクリックして、
カスタム検索エンジンのコードをサイトに設定しなおす必要があります。
[保存してコードを取得]をクリックした場合には、保存後にコードが画面に表示されます。
[保存]のみをクリックした場合には以下のようなメッセージが表示される場合があります。
カスタム検索エンジンが最新ではありません。最新の変更を表示するには、ページを更新してください。
レイアウト
レイアウトではカスタム検索エンジンを利用して表示される検索結果ページのデザインを指定します。
レイアウトを変更する対象に指定できるのは「ウェブ検索」と「画像検索」です。
尚、画像検索の結果を表示するには[設定]-[基本]タブにて画像検索が有効である必要があります。
ウェブ検索
ウェブ検索では通常のキーワードによる記事検索結果を表示するページのデザインを変更します。
オーバーレイ
「オーバーレイ」表示では検索した結果が検索フィールドを設置したページ上に、
ポップアップ(オーバーレイ)表示されます。
詳細は以下でご紹介しています。
(オーバーレイ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
2ページ
「2ページ」表示では検索した結果が検索フィールドを設置したページとは
別のサイトに結果を表示する表示方法です。
この表示方法では複数のWordPressなどのCMS(Content Management System)などが、
独自に持っているサイト内検索の機能を利用して、
検索結果の表示をCMSのコンテンツ内に統合することができます
詳細は以下でご紹介しています。
(2ページ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
全幅
「全幅」表示では検索した結果が検索フィールドを設置した場所の直下に対して、
検索結果の表示を(ページの更新なしに)行う方法です。
詳細は以下でご紹介しています。
(全幅)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
2列
「2列」表示では検索した結果を検索フィールドを設置した場所とは別で、
検索結果を表示タグを設置した位置に対して表示する方法です。
詳細は以下でご紹介しています。
(2列)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
コンパクト
「コンパクト」表示では検索した結果が検索フィールドを設置した場所の直下に対して、
検索結果の表示を(ページの更新なしに)行う方法です。
詳細は以下でご紹介しています。
(コンパクト)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
結果のみ
WordPressなどのCMSを利用している場合、標準の検索機能が備わっていると思います。
そうした標準検索で表示される検索結果ページをGoogleカスタム検索エンジンに置き換えて表示を行う方法です。
詳細は以下でご紹介しています。
(結果のみ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
Googleがホスト
「Googleがホスト」表示では検索した結果がGoogleの検索結果ページで表示されます。
詳細は以下でご紹介しています。
(Googleがホスト)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
画像検索
画像検索が有効なカスタム検索エンジンを設置した際に、
[イメージ]タブで表示される画像検索結果のレイアウトを設定します。
尚、画像検索タブはウェブ検索のレイアウト設定に基づいて表示されたタブの内部に表示されます。
その為、ページの表示方法などについては、ウェブ検索の表示設定で表示されます。
ここではウェブ検索の設定を「オーバーレイ」として例示します。
尚、画像検索のみを変更した場合にはソースの変更はなく貼り付けなおす作業も不要です。
以下に例示するソースも同じになります。
クラシック
画像検索をクラシックレイアウトで表示します。
クラシックスクリプト例
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
クラシックレイアウトでは以下のように検索結果画像が表示されます。
列
画像検索を列レイアウトで表示します。
列レイアウトスクリプト例
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
列レイアウトでは以下のように検索結果画像が表示されます。
ポップアップ
画像検索結果をポップアップレイアウトで表示します。
ポップアップスクリプト例
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
画像をマウスオーバーするとポップアップ表示されるようになります。
テーマ
テーマでは検索結果に表示する際の文字色などを一括して変更することができます。
各テーマのデザイン一覧と実際に検索して確認ができる検索ボックスを以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)のデザイン設定(テーマ)
![]() |
![]() |
カスタマイズ
検索ボックスの詳細なデザインは次のカスタマイズにて変更が行えます。
ここではデフォルトテーマを元にして、デザインをカスタマイズしていきます。
元のデフォルトテーマは以下のようなデザインです。
全般
全般設定の項目では検索ボックスの以下の設定が行えます。
- フォント
- 枠線の色
- 背景色
カスタマイズ色を割り当てて表示した例は以下のようになります。
検索ボックス
検索ボックスの設定では枠線の色を変更することができます。
カスタマイズ色を割り当てて表示した例は以下のようになります。
検索ボタン
検索ボタンではボタン以下の設定を変更することができます。
- 枠線
- 背景色
カスタマイズ色を割り当てて表示した例は以下のようになります。
絞り込み
この設定は
画像検索が有効ではない場合、
絞り込みタブのデザインを変更できます。
画像検索が有効な場合には絞り込みタブのデザインではなく、
[ウェブ][イメージ]タブのデザインに適用されます。
絞り込み設定ではタブの以下の設定を変更できます。
- 枠線の色(通常)
- 背景色(通常)
- 枠線の色(選択)
- 背景色(選択)
カスタマイズ色を割り当てて表示した例は以下のようになります。
尚、ご参考までに絞り込み設定を行った場合のタブ(リンク)には適用されません。
検索結果(全般)
検索結果(全般)の設定では検索結果1件を表示する際のエリアに対する以下を設定できます。
- 枠線の色(通常)
- 背景色(通常)
- 枠線の色(カーソルを合わせたとき)
- 背景色(カーソルを合わせたとき)
カスタマイズ色を割り当てて表示した例は以下のようになります。
検索結果のタイトル
検索結果のタイトルの設定では検索結果のタイトルの以下を設定できます。
- 未訪問の色
- アクセス済みの色
- カーソルを合わせたときの色
- アクティブなときの色
カスタマイズ色を割り当てて表示した例は以下のようになります。
サムネイル
サムネイルの設定はオンとオフを選択できます。デフォルトはオンになっています。
尚、この表示されるサムネイル画像はインデックスに登録された時点の状態で表示されているようです。
現在の投稿にサムネイルが登録されていても表示されないことが起こります。
オンの場合にはサムネイルが表示されます。
オフに変更するとサムネイルが非表示になります。
長々とおつきあい頂きましてありがとうございました。
はてブなどして頂けると、何かの時にお役にたつこともあるかもしれません。
さいごに
このようにして、カスタム検索エンジンのデザインはCSSなどを利用しない範囲でも、
カスタム検索エンジンの設定から細かく設定をすることができます。
サイトのデザインに合うように自分流の色合いで表示してみてはいかがでしょうか。
Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
関連記事
-
-
Blogger™に割り当てたBloggerプロフィールをGoogle+プロフィールに変更する手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™サイト内検索(カスタム検索エンジンv2)の設定
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Gmailのエイリアス(サブアドレス)を利用した複数アドレスの活用と可能性
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™AdSenseサイト内検索(カスタム検索エンジンv2)にオートコンプリート設定しました
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™サイト内検索(カスタム検索エンジンv2)の検索機能設定
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
WordPressのサイドバーにYahoo™サイト内検索フィールド(ボックス)を設置する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™AdSenseサイト内検索(カスタム検索エンジンv2)の統計をAnalyticsで表示
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google+™共有サービス(SNS)の利用登録
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
Google™Analyticsの標準アナリティクストラッキングコードがUniversalに既にアップグレードされていた件
Google or AdMax Promotion(it) 禁断の機能がau公式 …