【Gushカスタマイズ】Googleカスタム検索をサイドバーに設置

Google Adsenseについて入門書的な本を読みたいなと思い、連休前にGoogle AdSense 成功の法則 57という本を購入しました。
この本の中でリンクユニットと検索ユニットも活用しよう、という項目があったので、まずはGoogleカスタム検索を設置してみました。
地味に手こずったのでやり方を残しておきたいと思います。
[amazonjs asin=”4800710561″ locale=”JP” title=”Google AdSense 成功の法則 57″] ※この本にはKindle版があり、僕はそちらを購入したのですが、辞書的に使うのであれば紙の本の方が便利かもしれません。
またiPad Airで読んでいたら所々表示がおかしい（文字間隔が詰まって見える）箇所がありました。

Googleカスタム検索の設置手順

ネットで調べると手順は沢山出てくるのですが、情報が少し古いのか、設定画面が異なっていました。以下のページが2014年8月現在の設定画面と一致していました。
【2014年版】Googleカスタム検索を設置する簡単手順 | 将来が不安な方へ！アフィリエイトで収入を複数作る – ネトビジュ

Googleカスタム検索の検索エンジンIDを取得

Googleカスタム検索のページからカスタム検索エンジンを作成します。
検索するサイトに自分のブログのURLを入力し、言語は日本語を選択します。検索エンジンの名前は自動で入ります。
検索エンジンが作成できたら、コードを取得をクリックします。以下のコードのYOUR SEARCH ENGINE IDの部分には、実際の検索エンジンIDが入ります。

<script>
  (function() {
    var cx = 'YOUR SEARCH ENGINE ID';
    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:search></gcse:search>

コードをテキストウィジェットに貼り付け

テキストウィジェットに貼り付ける内容は以下のコードになります。YOUR SEARCH ENGINE IDの部分を自分の検索IDに変更します。

<div id="search-box">
<form action="http://www.google.co.jp/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
</div>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

このテキストウィジェットをサイドバーの一番上に配置すれば、サイドバーの広告の下にカスタム検索を設置できます。
ここまでの設定で、以下のようなカスタム検索バーが設置されました。

検索BOXと検索ボタンの高さが不揃いなのが気になります。
次はカスタム検索にCSSを適用させてデザインを変更したいと思います。