自分のサイトにGoogleカスタム検索エンジンの検索ボックスを設置する

自分のサイト、ブログにGoogleカスタム検索エンジンの検索ボックスを設置して、自分のサイト内の記事を検索できるようにする。

Googleカスタム検索エンジン

2016年現在、Googleの検索ボックスを自分のサイトに設置するには「Googleカスタム検索エンジン https://cse.google.co.jp/」を利用することになる。
Googleのアカウントを使い、このサービスにログインする必要がある。
遠い昔、Googleのアカウントがなくても使える検索ボックスが提供されていたが今はない。
このGoogleカスタム検索エンジンは、かなり前にAdSenseの方で設定したような気がしたが、今は独立しているようだ。
Googleはサービスがたくさんあり、名称が変わったり、なくなったり、しばらく使っていないと分からなくなる。

使い方は簡単で、ログインすれば左側にメニューがあり、［新しい検索エンジン］で自分のサイト用の検索エンジンを作成できる。
複数作成でき、サイトごとに管理できる。
作成した検索エンジンは［カスタム検索］のトップページか、［検索エンジンの編集］で作成したものを選ぶと編集できる。

左メニューの［デザイン］→［レイアウト］にて検索結果の表示の仕方を選べる。
レイアウトが「全幅」の場合ページが遷移せず、現在のページ上の検索ボックスがある辺りに検索結果が表示され、その下の要素は押し下げられる。
レイアウトが「Googleがホスト」の場合、自分のサイトとは別のサイト（cse.google.com）へ遷移して検索結果が表示される。
「Googleがホスト」にはさらに選択肢があり、「現在のウィンドウ」はブラウザの同じタブにページを表示し、「新しいウィンドウ」は新しいタブを開いてページを表示するが、ブラウザによっては警告が出るので「現在のウィンドウ」を選ぶのが無難。
レイアウトは他にもいくつかあり、選んだ後、ページの下にある［保存］ボタンをクリックするのを忘れずに。
［保存してコードを取得］ボタンでページに貼るHTMLコードをすぐに取得することもできる。
左メニューの［設定］→［基本］の「コードを取得」でも可能。

「Googleがホスト」を選んだ場合、［デザイン］→［カスタマイズ］にある「ロゴ」で自分のサイトのロゴ画像のURLを指定できる。
これはcse.google.comに遷移した後、ページ左上にその画像が表示されるようになる。
パソコンではロゴ画像が表示されるが、スマホでは表示されないようだ。

検索ボックスやボタンの見た目は［デザイン］→［テーマ］で変更できる。
検索ボックスのコードはテーブル（table）要素を挿入しているようで、サイトに表示した際、CSSの設定によっては枠線が表示されるので調整する。