Web Design Leaves

作成日：2018年4月29日

Google 検索エンジンの設定

Google カスタム検索は、 Google アカウントでログインして、以下のリンクから設定・作成することができます。

Google カスタム検索（検索エンジンの編集） https://cse.google.co.jp/cse/all

このページで「Add」をクリックして、オリジナル（自分）の検索エンジンを登録します。

以下の情報を入力して「作成」をクリックします。

• 検索するサイト：検索エンジンを使用するサイトの URL を指定（この例では「pr」フォルダ内を検索させたいため、「www.webdesignleaves.com/pr/*」と入力）
• 言語：必要に応じて言語を指定（通常は日本語で問題ありません）
• 検索エンジンの名前：検索エンジンを編集する場合等に表示・使用される名前で、任意の名前をつけることができます。※「検索エンジンの名前はできる限り短くすることをおすすめします（3～4 語）」と「ブランドの取り扱いガイドライン」には書かれています。

「作成」をクリックすると、「カスタム検索エンジンの作成が完了しました。」というメッセージと共に以下のようなページが表示されます。

デフォルトのままで良ければ、このまま「コードを取得」してもいいのですが、左のメニューの「検索エンジンの編集」をクリックして必要に応じてデザインや設定をカスタマイズすることができます。

後から設定やデザインを変更することもできますが、変更後「保存してコードを取得」をクリックして新しいコードを取得し、新しいコードを貼り付け直す必要があります。

検索エンジンの編集

左のメニューの「検索エンジンの編集」をクリックすると、その下に作成した検索エンジンとその設定項目（設定、デザイン、検索機能、統計情報とログ）が表示されます。

この例では検索結果を別ページで表示するので、左のメニュー項目から「デザイン」を選択して「レイアウト」タブを選択します。

検索結果を別ページで表示するため、「2 ページ」を選択して「保存してコードを取得」をクリックし、コードを表示します。

他の設定も変更する場合は、「保存」をクリックして更に他の項目を変更して最後にコードを取得します。

Google カスタム検索のコードの取得

「保存してコードを取得」をクリックすると、以下のようなページが表示されます。検索ボックス用のコードが表示されているので、これをコピーして検索ボックスを表示したい箇所に挿入します。

但し、この例では検索結果を別ページで表示するため、まず上部の「検索結果の詳細」をクリックして検索結果を表示するページの URL を入力して保存します。

「検索結果の詳細」をクリックすると以下が表示されるので、検索結果を表示するページの URL を入力して「保存」をクリックします。

このサイトの場合、https://www.webdesignleaves.com/pr/search.html として、pr ディレクトリ内の search.html で表示するようにしています（サイトの SSL化に伴い http: を https: に変更しています）。

表示されている検索ボックス用のコードをコピーして検索ボックスを表示したい箇所に挿入します。

以下は、id が serach_box という div 要素内に挿入してる例です。

<div id="search_box">
  <script>
    (function() {
      var cx = '01xxxxxxxxxxxxxxxxxxxxxxxxxxxi';
      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>
  <gcse:searchbox-only></gcse:searchbox-only>
</div>

続いて、画面下で「次へ：検索結果コードの取得」をクリックすると検索結果用のコードが表示されるので、検索結果を表示させるページ（この例では、先に指定した www.webdesignleaves.com/pr/search.html）に貼り付けます。

<h2>Search Results</h2>
    <div id="search_results">
<script>
  (function() {
    var cx = '017xxxxxxxxxxxxxxxxxxxxxxxxxx';
    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>
      <gcse:searchresults-only></gcse:searchresults-only>
    </div>

フォームを使用した検索ボックスの作成

Google カスタム検索を HTML フォームを使って記述して表示することもできます。こちらの方が、取得したコードを単に貼り付けるよりも表示がスムーズになります。以下のページに方法が記載されています。

「HTML フォームを使用した検索ボックスの作成」

上記のページに以下のようなサンプルの HTML が記載されているので、これをコピーして検索ボックスを表示する取得したコードの部分を書き換えます。

<form id="cse-search-box" action="http://google.com/cse">
  <input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="31" />
  <input type="submit" name="sa" value="Search" />
</form>
<img src="https://www.google.com/cse/images/google_custom_search_smwide.gif">

そして2行目の「YOUR SEARCH ENGINE ID goes here」の部分に「検索エンジンID」を記述します。

検索結果を自分の特定のページ（検索結果ページ）に表示する場合は、1行目の action="http://google.com/cse" の「http://google.com/cse」部分をそのページの URL に変更します。

また、上記のままでは Google のロゴが検索ボックスの下に表示されてしまうので、それが好ましくない場合は以下の Javascript で検索ボックス内にプレースホルダーとして「Google カスタム検索」と言う文字を表示するようにします。（ロゴまたはプレースホルダーを表示する必要があるようです）

<script src="https://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

※ 追記：上記でも問題ありませんが、 「&」は 「%26」に URL エンコードしたほうが良いようです。

<script src="https://www.google.com/cse/brand?form=cse-search-box%26lang=ja"></script>

以下がフォームを使用した検索ボックスの HTML の例です。

<div id="search_box">
  <form id="cse-search-box" action="https://www.webdesignleaves.com/pr/search.html">
    <input type="hidden" name="cx" value="017xxxxxxxxxxxxxx（検索エンジンID）" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="検索" />
  </form>
  <script src="https://www.google.com/cse/brand?form=cse-search-box%26lang=ja"></script> 

フォーム要素を使って記述すれば、それらの要素に対して CSS でスタイルを指定することもできるので便利です。

Google カスタム検索のカスタマイズ

コントロールパネルで検索エンジンを編集することができます。

コントロールパネルにアクセスするには、Google カスタム検索エンジンのホームページ（https://cse.google.com/all）で左側の「検索エンジンの編集」の下のプルダウン、または、表示されているリストから編集をしたい検索エンジンの名前を選択して、コントロール パネルを開きます。

コントロール パネルで検索エンジンを編集

.gsc-results .gsc-cursor-box .gsc-cursor-current-page, .gsc-results .gsc-cursor-box .gsc-cursor-page {
  font-size: 15px;
  border: 1px solid #ccc;
  padding: 5px 8px;
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
  color: #777777 !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
  color: #4F863B !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page:hover {
  text-decoration: none !important;
}    

AdSense で収益を上げる

Google AdSense プログラムに参加していれば、Google カスタム検索エンジンを使用して収益を上げることもできるようです。

AdSense プログラムに参加することで、カスタム検索エンジンの検索結果ページに関連性のある広告が表示されるようになり、ユーザーがその広告をクリックした時に収入を得ることができます。

カスタム検索エンジン アカウントを Google AdSense に関連付けるには、コントロールパネルの左側のメニューで「設定」を選択して、「広告」タブをクリックします。

「検索エンジンの収益化」を「オン」にします。

AdSense で収益を上げる

広告を有効にする

Google インデックス 登録・申請

作成したページ（サイト）を Google の検索結果に表示されるようにするには、Google がそのページ（サイト）を認識し、Google の検索エンジン（データベース）に登録される必要があります。

Google のデータベースに登録されることを「Google にインデックスされる」と言います。

通常は作成後しばらくすると、Google が勝手に登録してくれますが、時間がかかる場合などもあり、そのような場合は、Google にインデックスの登録（クロール）を申請することもできます。