Googleカスタム検索の設置

Googleカスタム検索の設置方法について説明したページです。作成から設定変更、設置方法やレイアウト等について説明しています。

Googleカスタム検索の概要

 Googleカスタム検索は、本サイトでもページ上部等に設置している検索窓とも言われる検索ボックスで、Googleが提供しているサービスです。

 検索ボックスはキーワードを入力して検索ボタンを押すとキーワードにマッチしたページが一覧で表示されるため、目的のページを探すのに便利です。

 Googleカスタム検索では、サイト全体、又はサイトの一部だけを検索するように設定可能で、検索結果としてGoogleのサイトで表示する、サイト内のページに表示する等も設定可能です。又、検索ボックス、検索結果等のデザインも変更可能です。

 尚、無料で利用出来ますが、その場合は検索結果に広告が表示されます。

Googleカスタム検索へのログイン

 Googleカスタム検索へのログインは「Google カスタム検索エンジン」から行います。

Googleカスタム検索の設置1

 「カスタム検索エンジンにログイン」をクリックするとメールアドレスとパスワードを入力する画面になります。アカウントを持っていない場合はページ右上の「アカウントを作成」からアカウントを作成します。余りアカウントは作りたくないという方もいると思いますが、Googleのアカウントはウェブマスターツールやアナリティクス等、ホームページを運用していく上で有用なツールを使う時に必要になるため、ぜひ登録をお奨めします。

 メールアドレスとパスワードを入力すると以下の画面になります。

Googleカスタム検索の設置2

 姓、名を入力してログインします。

Googleカスタム検索の作成と設置

 ログイン後は以下の画面でサイトのURLを入力して言語を選択し、作成ボタンをクリックします。URLは本サイトであればbeginners-hp.comです。

Googleカスタム検索の設置3

 その後、以下の画面で「コードを取得」をクリックするとコードが表示されるため、htmlのGoogleカスタム検索を設置する場所に張り付けます。

Googleカスタム検索の設置4

 これだけで検索ボックスが表示され、検索するとその結果はページ上に被さるように表示されるようになります。

 尚、Googleで検索してサイトが表示される状態でないと検索結果は表示されません。登録方法は「Google・Yahooへの登録」をご参照下さい。

コントロールパネル

 コードを取得ではなくコントロールパネルを選択する、又はコードを取得した後でも作成した検索エンジン名を選択すると以下の画面になります。

Googleカスタム検索の設置5

 沢山のサイトを運営している場合等は検索エンジン名や説明を分かり易くする必要がありますが、通常はデフォルトのままで普通に検索が出来ます。

 赤枠のデザインを選択すると以下の画面になります。

Googleカスタム検索の設置6

 検索結果を表示するレイアウトが選択出来ます。又、上のタブでテーマやカスタマイズを選択するとボタンや背景色、枠の色等を変更出来ます。右には以下のように変更する度にプレビューが表示されます。

Googleカスタム検索の設置7

 以下はボタンを文字に変更した例です。

Googleカスタム検索の設置8

 設定変更した後、「保存してコードを取得」をクリックするとコードが表示されるため、htmlのGoogleカスタム検索を設置する場所に張り付けると検索ボックスが表示されるようになります。

レイアウト

 レイアウトによって検索結果の表示が大きく異なり、設置方法も異なります。以下にそれぞれのレイアウトについて説明します。

●オーバーレイ
 オーバーレイでは検索するとページの上に被さるように検索結果が表示されます。これがデフォルトです。

Googleカスタム検索の設置9
 設置方法は、レイアウトでオーバーレイを選択し、「保存してコードを取得」をクリックして表示されたコードを張り付けるだけです。又、デフォルトのため、作成してすぐにコードを取得した場合もオーバーレイになります。
 コードを貼り付けた場所に検索ボックスが表示され、検索結果はそのページ上で覆いかぶさるように表示されます。

●2ページ
 2ページでは検索結果をサイト内の検索結果専用ページに表示させる事が出来ます。
Googleカスタム検索の設置a
 設置方法は、レイアウトで2ページを選択し、「保存してコードを取得」をクリックするとコードが表示されますが、そこで画面右上の「検索結果の詳細」を選択すると以下の画面が表示されて、緑枠部分でURLが入力出来るようになります。
Googleカスタム検索の設置b
 URLに検索結果を表示させるページを指定します。
 例えば、本サイトであればhttp://beginners-hp.com/result.html等と記述して下の「保存」ボタンで保存します。
 http://やhttps://等も記述が必要です。これで検索結果を表示するページを認識させる事が出来ます。
 表示されているコードを検索ボックスを表示するページに貼り付けます。又、画面下で「検索結果コードの取得」をクリックするともう1つコードが表示されるため、検索結果を表示させるページに張り付けます。貼り付けるページは上で指定したURLのページです。
●全幅
 全幅では検索すると、検索ボックスのすぐ下に検索結果が表示されるようになります。
Googleカスタム検索の設置c
 設置方法は、レイアウトで全幅を選択し、「保存してコードを取得」をクリックして表示されたコードを張り付けるだけです。
 コードを貼り付けた場所に検索ボックスが表示され、検索結果は検索ボックス下に表示されます。
●2列
 2列では検索すると、検索結果をそのページ内で指定した位置に表示させる事が出来ます。
Googleカスタム検索の設置d
 設置方法は、レイアウトで2列を選択し、「保存してコードを取得」をクリックして表示されたコードを検索ボックスを表示する部分に張り付けます。
 コードの下で「検索結果コードの取得」をクリックして表示されたコードを同じページの検索結果を表示する部分に張り付けます。
 これで検索ボックスが最初のコードを貼り付けた位置、検索結果が次のコードを貼り付けた位置に表示されるようになります。
●コンパクト
 コンパクトでは検索すると、検索ボックスのすぐ下に検索結果が表示されるようになります。
Googleカスタム検索の設置c
 設置方法は、レイアウトでコンパクトを選択し、「保存してコードを取得」をクリックして表示されたコードを張り付けるだけです。
 コードを貼り付けた場所に検索ボックスが表示され、検索結果は検索ボックス下に表示されます。
 全幅と殆ど同じですが、全幅では検索結果が10個づつ表示されるのに対し、コンパクトでは検索結果が4個づつ表示されます。
●結果のみ
 結果のみでは訪問者に検索させるのではなく、指定したキーワードによる検索結果だけを表示させる事が出来ます。
 例えば、URLがexample.com/result.htmlの場合、example.com/result.html?q=テストとする事でテストというキーワードで検索した結果を表示させる事が出来ます。
Googleカスタム検索の設置e
 このため、リンク元のページで?q以降を含めてリンクする事で検索結果を表示させる事が出来ます。
 設置方法は、レイアウトで結果のみを選択し、表示されたコードを検索結果を表示させるページに張り付けるだけです。
 リンク元のページでリンクする際、検索するキーワードがテストの場合、<a href="http://example.com/result.html?q=テスト"></a>のように?q以降も含めて記述が必要です。
●Googleがホスト
 Googleがホストでは検索結果をGoogleで検索したのと同様にGoogleサイト上で表示させる事が出来ます。
Googleカスタム検索の設置f
 設置方法は、レイアウトでGoogleがホストを選択しますが、そこで更に「現在のウィンドウ」、「新しいウィンドウ」が選択出来ます。
 「現在のウィンドウ」ではページが切り替わりますが、「新しいウィンドウ」ではブラウザのタブや新しいブラウザのウィンドウで表示されます。
 検索ボックスを設置したページを表示したままにしたい場合は「新しいウィンドウ」を選択する必要がありますが、ポップアップとしてブロックされる場合もあります。
 「保存してコードを取得」をクリックして表示されたコードを検索ボックスを表示する部分に張り付けます。
 コードを貼り付けた場所に検索ボックスが表示され、検索結果はGoogleサイト上で表示されます。

サイト関連1

ホームページ作成「Yahoo!検索カスタムサーチの設置
  • このエントリーをはてなブックマークに追加