「Google カスタム検索」の登録と設置

サイト内検索のために「Google カスタム検索」を設置しました。
登録から設置までのメモです。
登録と設置
Google カスタム検索エンジンのページにアクセスして登録作業をします。
「カスタム検索エンジンにログイン」をクリック。

Googleへのログイン画面になるのでログイン。

ちなみにGoogleに既にログインしている状態でGoogle カスタム検索エンジンへアクセスすると、「カスタム検索エンジンの作成」というボタンになってるのでクリック。

「検索するサイト」「言語」「名前」を入力して「作成」をクリック。

作成完了画面が出てきます。
サイトに設置したいので「コードを取得」をクリック。

コードが表示されるのでコピー。

とりあえず設置してみたのがこれ。

検索結果の表示がなんかおしゃれです。

これでオッケーな人はここで終了です。お疲れさまでした!
デザインを変更する
私は「ヘッダーに常に検索ボックスが表示されてて、検索すると検索結果用のページに飛んで検索結果がずらずら~」ってなってほしいので、もうちょっと作業します。
コード取得の画面に戻って「デザイン」をクリック。

「2ページ」を選択して「保存してコードを取得」をクリック。
「デザイン」のタブの隣にある「テーマ」や「カスタマイズ」でフォームのデザインや色を変更できます。

コード取得画面になるけど、コピーする前に「検索結果の詳細」をクリック。
検索結果用ページのURLを入力して「保存」をクリックすると、検索結果用ページのURLがコードに埋め込まれるので、このコードを検索バーを設置したい場所に埋め込みます。
検索結果表示用のコードは「次へ:検索結果コードの取得」をクリックすると表示されます。

ちなみに…
同ページ内に「検索ボックスコード」と「検索結果コード」を貼り付けると、フォームが正常に動かないので注意。
私は検索結果表示ページに、検索ボックスと検索結果を両方表示しようとしてつまずきました。
で、よくよく2つのコードを見比べてみると…。
検索ボックスコード
<script> (function() { var cx = 'XXXXXXXXXXXXXXXXXXXXX:xxxxxxxxxxx'; 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:searchbox-only></gcse:searchbox-only>
検索結果コード
<script> (function() { var cx = 'XXXXXXXXXXXXXXXXXXXXX:xxxxxxxxxxx'; 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:searchresults-only></gcse:searchresults-only>
<script>内のコードが同じみたいなので、検索結果コードはこれだけで良さそう。
<gcse:searchresults-only></gcse:searchresults-only>
動作も正常です。ひとまずこれで完成。
あとはデザインか…。
下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事
Comment