Googleカスタム検索の実装方法｜日々、アップデート

Googleカスタム検索について

Googleカスタム検索は、Googleが提供する無料のサイト内検索サービスを利用して、自分のウェブサイトに検索機能を実装することができます。

さらにGoogleカスタム検索では、検索結果の表示レイアウトやボタンの色など簡単にカスタマイズできます。

Googleカスタム検索を利用するには、Googleアカウントでログインをして、以下のリンクから【新しい検索エンジン】を作成します。

Googleカスタム検索
https://cse.google.co.jp/cse/all

検索するサイトのURLと言語、検索エンジンの名前を入れて作成を押しします。

これだけでカスタム検索エンジンの作成は完了です。
このままコードを取得してもいいのですが、検索結果の表示レイアウトを変更したいので、検索エンジンの編集を選びます。

※コードを取得するのは検索エンジンの編集が完了してから取得しましょう。
取得してから編集するとコードが変わってしまいます。

検索エンジンの名前を選択して、デザインを選び、レイアウトを選択します。今回は検索結果をsearch.htmlに表示するようにしてみます。
選択できたら保存を押します。他にテーマやボタンをカスタマイズしたい場合は引き続き編集していきます。
今回はレイアウト変更のみで保存してコードを取得します。

今回は検索ボックスと検索結果のページを分けるので2つコードを取得してhtmlに記述します。以下の画像は検索ボックスを設置するコードになります。検索ボックスを設置したい箇所に貼り付けましょう。

その前に、検索結果を表示するページの設定をしておきます。
検索結果の詳細ボタンを押します。

検索結果を表示するURLを説明に沿って入力して保存します。
検索ボックスのコードの貼り付けができたら次は、検索結果ページを表示するコードを取得します。

以下のコードを、先ほど設定した検索結果を表示するページのhtmlに貼り付けます。

実際に実装したデモです。