Help us understand the problem. What is going on with this article?

Googleカスタム検索エンジンの設置方法

More than 1 year has passed since last update.

Googleカスタム検索の設置メモです。
V2は後で追記するかもです。
どこか間違いがありましたら、ご指摘いただけると幸いです。
※2019/4/2更新 <gcse:searchbox-only><gcse:searchresults-only>を使うとMarkup Validation Serviceに引っかかる為、HTMLタグを使用した方法に変更しました。
属性を追加する場合は、プレフィックス「data-」を付ける必要があります。

前提条件

  • Googleアカウントをこちらで管理していない。
  • 別に検索結果ページ作成。
  • 検索結果ページは、検索窓と検索結果が別エリア(デザインのレイアウトオプションを2列に設定してもらっている)
  • 通常ページは検索窓のみ。

Custom Search Element Control API

制御にJavaScriptを使用しない方法です。
まずは下記コードを貼り付けます。

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

通常ページ

検索窓を表示したい箇所に下記を追加します。

<div enableHistory="true" class="gcse-searchbox-only" data-resultsUrl="検索結果ページのURL" data-queryParameterName="search"></div>
  • 「resultsUrl」で検索結果ページのURLを指定。
  • 「enableHistory」でブラウザの[戻る]および[進む]ボタンを押しても履歴が残るようにします。
  • 「queryParameterName」でクエリパラメータ名を追加

検索結果ページ

検索窓

<div enableHistory="true" class="gcse-searchbox-only" data-queryParameterName="search"></div>
  • 「enableHistory」でブラウザの[戻る]および[進む]ボタンを押しても履歴が残るようにします。
  • 「queryParameterName」でクエリパラメータ名を追加

検索結果表示エリア

<div class="gcse-searchresults-only" data-linkTarget="_self"></div>
  • デフォルトは「blank」で別ウィンドウで開いてしまうので、「linkTarget」で「self」に変更。

参考サイト

Custom Search Element Control API
Googleカスタム検索によるサイト内検索機能の利用方法
Google API プログラミング解説

vent
早くダメ人間から脱出したいと思っている人。主に適当に趣味のことなどを適当に投稿します。清 竜人25、第3、7夫人推し ネット弁慶でコミュ障をどうにかしたい。最近ドルヲタ度増してきたけど接触弱者。彼女募集中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away