登録と設置

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>

動作も正常です。ひとまずこれで完成。
あとはデザインか…。