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

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

      2014/11/22

サイト内検索ボックス(カスタム検索エンジン)を設置する方法として、
検索として一般的なGoogle™の検索インデックスを利用した、
検索ボックス(カスタム検索エンジン)を設置する方法があります。

このGoogleのカスタム検索エンジンは検索結果のページを、
様々なレイアウトからデザインの変更を行うことができます。

ここでは変更可能なデザインをご紹介します。

はじめに

Google検索ボックスの設置方法は特に説明の必要はないとは思うのですが、
思った以上に設定項目が多くあり少し驚きました。

こうしたデザインの変更もその一つです。

尚、カスタム検索エンジンを利用するにはGoogleアカウントを作成し、
カスタム検索エンジンを作成する必要があります。
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

カスタム検索エンジンのカスタマイズ全般に関しては以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

環境

  • wordpress:3.5.1
  • 利用テーマ: Twenty Twelve
  • カスタム検索エンジン: version 2

カスタム検索エンジンのデザイン設定

カスタム検索エンジンのデザインをデザインを変更するには、
作成したカスタム検索エンジンでサイドメニューから[デザイン]を選択します。

02_カスタム検索エンジンデザイン選択

カスタム検索エンジンデザイン選択

注意事項

※レイアウトを変更した場合最下部の[保存してコードを取得]をクリックして、
カスタム検索エンジンのコードをサイトに設定しなおす必要があります。

[保存してコードを取得]をクリックした場合には、保存後にコードが画面に表示されます。

[保存]のみをクリックした場合には以下のようなメッセージが表示される場合があります。

カスタム検索エンジンが最新ではありません。最新の変更を表示するには、ページを更新してください。

01_カスタム検索エンジンの更新メッセージ

カスタム検索エンジンの更新メッセージ

レイアウト

レイアウトではカスタム検索エンジンを利用して表示される検索結果ページのデザインを指定します。

03_カスタム検索エンジンレイアウトタブ

カスタム検索エンジンレイアウトタブ

レイアウトを変更する対象に指定できるのは「ウェブ検索」と「画像検索」です。
尚、画像検索の結果を表示するには[設定]-[基本]タブにて画像検索が有効である必要があります。

04_画像検索の設定

画像検索の設定

ウェブ検索

ウェブ検索では通常のキーワードによる記事検索結果を表示するページのデザインを変更します。

オーバーレイ

「オーバーレイ」表示では検索した結果が検索フィールドを設置したページ上に、
ポップアップ(オーバーレイ)表示されます。

詳細は以下でご紹介しています。
(オーバーレイ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

02_レイアウト「オーバーレイ」検索結果表示

レイアウト「オーバーレイ」検索結果表示

2ページ

「2ページ」表示では検索した結果が検索フィールドを設置したページとは
別のサイトに結果を表示する表示方法です。

この表示方法では複数のWordPressなどのCMS(Content Management System)などが、
独自に持っているサイト内検索の機能を利用して、
検索結果の表示をCMSのコンテンツ内に統合することができます

詳細は以下でご紹介しています。
(2ページ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

02_レイアウト「2ページ」検索結果表示

レイアウト「2ページ」検索結果表示

全幅

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

詳細は以下でご紹介しています。
(全幅)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

02_レイアウト「全幅」検索結果表示

レイアウト「全幅」検索結果表示

2列

「2列」表示では検索した結果を検索フィールドを設置した場所とは別で、
検索結果を表示タグを設置した位置に対して表示する方法です。

詳細は以下でご紹介しています。
(2列)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

03_レイアウト「2列」検索結果表示

レイアウト「2列」検索結果表示

コンパクト

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

詳細は以下でご紹介しています。
(コンパクト)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

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

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

結果のみ

WordPressなどのCMSを利用している場合、標準の検索機能が備わっていると思います。
そうした標準検索で表示される検索結果ページをGoogleカスタム検索エンジンに置き換えて表示を行う方法です。

詳細は以下でご紹介しています。
(結果のみ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

02_レイアウト「結果のみ」検索結果表示

レイアウト「結果のみ」検索結果表示

Googleがホスト

「Googleがホスト」表示では検索した結果がGoogleの検索結果ページで表示されます。

詳細は以下でご紹介しています。
(Googleがホスト)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

02_レイアウト「Googleがホスト」検索結果表示

レイアウト「Googleがホスト」検索結果表示

画像検索

画像検索が有効なカスタム検索エンジンを設置した際に、
[イメージ]タブで表示される画像検索結果のレイアウトを設定します。

27_画像検索の選択

画像検索の選択

尚、画像検索タブはウェブ検索のレイアウト設定に基づいて表示されたタブの内部に表示されます。
その為、ページの表示方法などについては、ウェブ検索の表示設定で表示されます。

ここではウェブ検索の設定を「オーバーレイ」として例示します。

尚、画像検索のみを変更した場合にはソースの変更はなく貼り付けなおす作業も不要です。
以下に例示するソースも同じになります。

クラシック

画像検索をクラシックレイアウトで表示します。

クラシックスクリプト例

クラシックレイアウトでは以下のように検索結果画像が表示されます。

28_画像検索結果・クラシック

画像検索結果・クラシック

画像検索を列レイアウトで表示します。

列レイアウトスクリプト例

列レイアウトでは以下のように検索結果画像が表示されます。

29_画像検索結果・列

画像検索結果・列

ポップアップ

画像検索結果をポップアップレイアウトで表示します。

ポップアップスクリプト例

画像をマウスオーバーするとポップアップ表示されるようになります。

30_画像検索結果・ポップアップ

画像検索結果・ポップアップ

テーマ

テーマでは検索結果に表示する際の文字色などを一括して変更することができます。

各テーマのデザイン一覧と実際に検索して確認ができる検索ボックスを以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)のデザイン設定(テーマ)

32_テーマ選択肢とプレビュー1 33_テーマ選択肢とプレビュー2

カスタマイズ

検索ボックスの詳細なデザインは次のカスタマイズにて変更が行えます。
ここではデフォルトテーマを元にして、デザインをカスタマイズしていきます。

元のデフォルトテーマは以下のようなデザインです。

42_デフォルトテーマ

デフォルトテーマ

全般

全般設定の項目では検索ボックスの以下の設定が行えます。

  • フォント
  • 枠線の色
  • 背景色
43_テーマ・全般の設定

テーマ・全般の設定

カスタマイズ色を割り当てて表示した例は以下のようになります。

44_テーマ・全般の設定例と表示

テーマ・全般の設定例と表示

検索ボックス

検索ボックスの設定では枠線の色を変更することができます。

45_テーマ・検索ボックスの設定

テーマ・検索ボックスの設定

カスタマイズ色を割り当てて表示した例は以下のようになります。

46_テーマ・検索ボックスの設定例と表示

テーマ・検索ボックスの設定例と表示

検索ボタン

検索ボタンではボタン以下の設定を変更することができます。

  • 枠線
  • 背景色
47_テーマ・検索ボタンの設定

テーマ・検索ボタンの設定

カスタマイズ色を割り当てて表示した例は以下のようになります。

48_テーマ・検索ボタンの設定例と表示

テーマ・検索ボタンの設定例と表示

絞り込み

この設定は

画像検索が有効ではない場合
絞り込みタブのデザインを変更できます。

画像検索が有効な場合には絞り込みタブのデザインではなく、
[ウェブ][イメージ]タブのデザインに適用されます。

絞り込み設定ではタブの以下の設定を変更できます。

  • 枠線の色(通常)
  • 背景色(通常)
  • 枠線の色(選択)
  • 背景色(選択)
49_テーマ・絞り込みの設定

テーマ・絞り込みの設定

カスタマイズ色を割り当てて表示した例は以下のようになります。

50_テーマ・絞り込みの設定例と表示

テーマ・絞り込みの設定例と表示

尚、ご参考までに絞り込み設定を行った場合のタブ(リンク)には適用されません。

57_絞り込み検索タブ(リンク)

絞り込み検索タブ(リンク)

検索結果(全般)

検索結果(全般)の設定では検索結果1件を表示する際のエリアに対する以下を設定できます。

  • 枠線の色(通常)
  • 背景色(通常)
  • 枠線の色(カーソルを合わせたとき)
  • 背景色(カーソルを合わせたとき)
51_テーマ・検索結果(全般)の設定

テーマ・検索結果(全般)の設定

カスタマイズ色を割り当てて表示した例は以下のようになります。

52_テーマ・検索結果(全般)の設定例と表示

テーマ・検索結果(全般)の設定例と表示

検索結果のタイトル

検索結果のタイトルの設定では検索結果のタイトルの以下を設定できます。

  • 未訪問の色
  • アクセス済みの色
  • カーソルを合わせたときの色
  • アクティブなときの色
53_テーマ・検索結果のタイトルの設定

テーマ・検索結果のタイトルの設定

カスタマイズ色を割り当てて表示した例は以下のようになります。

54_テーマ・検索結果のタイトルの設定例と表示

テーマ・検索結果のタイトルの設定例と表示

サムネイル

サムネイルの設定はオンとオフを選択できます。デフォルトはオンになっています。

尚、この表示されるサムネイル画像はインデックスに登録された時点の状態で表示されているようです。
現在の投稿にサムネイルが登録されていても表示されないことが起こります。

オンの場合にはサムネイルが表示されます。

55_サムネイル設定オン

サムネイル設定オン

オフに変更するとサムネイルが非表示になります。

56_サムネイル設定オフ

サムネイル設定オフ

長々とおつきあい頂きましてありがとうございました。

はてブなどして頂けると、何かの時にお役にたつこともあるかもしれません。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

このようにして、カスタム検索エンジンのデザインはCSSなどを利用しない範囲でも、
カスタム検索エンジンの設定から細かく設定をすることができます。

サイトのデザインに合うように自分流の色合いで表示してみてはいかがでしょうか。



Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。

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


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

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

AdMax Promotion

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

Rakuten Promotion

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

 - Google, 検索ボックス

  関連記事

eye_blogger
Blogger™に割り当てたBloggerプロフィールをGoogle+プロフィールに変更する手順

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

eye_google
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

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

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

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

eye_gmail
Gmailのエイリアス(サブアドレス)を利用した複数アドレスの活用と可能性

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

eye_google
Google™AdSenseサイト内検索(カスタム検索エンジンv2)にオートコンプリート設定しました

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

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

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

eye_yahoo
WordPressのサイドバーにYahoo™サイト内検索フィールド(ボックス)を設置する方法

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

eye_google_ads
Google™AdSenseサイト内検索(カスタム検索エンジンv2)の統計をAnalyticsで表示

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

eye_google_pls
Google+™共有サービス(SNS)の利用登録

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

eye_google_anl
Google™Analyticsの標準アナリティクストラッキングコードがUniversalに既にアップグレードされていた件

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