以前にTwentyTwelveのヘッダーにgoogle検索窓とsocialbuttonを設置という記事を書いたのですが、「検索窓を設置するためのコードがわからん」というお声を頂きました。そこで、googleカスタム検索窓の設置手順を書きます。

アカウント作成・ログイン

Googleに行って、右上の「ログイン」ボタンを押す。

アカウントを持っていない人

次の画面で、右上の「アカウント作成」ボタンを押し、必要事項を記入します。

登録したメールアドレスに重要情報が届くのでこれらを利用してログイン。

アカウントを持っている人

メールアドレスとパスワードを入力してログイン

カスタム検索エンジン作成

googleカスタム検索に行って「カスタム検索エンジンの作成」をクリック。すると下のような画面になります。

①名前：適当
②説明：適当
③言語：日本語が無難
④検索するサイト：「検索対象ドメイン/」と打ち込みます。たとえば、当サイトを検索対象にするなら「webshufu.com/」と入力します。
⑤エディション：ただがいいならスタンダード。

そして、「次の利用規約を読んだうえで同意します」にチェックを入れて「次へ」を押すと下のような画面になります。

好きなデザインを選んで、「次へ」をクリックします。すると以下のようにコードが表示されます。

これをコピーして、検索窓を設置したい場所に、貼り付けると検索窓の設置が完了します。

しかし、このままだと検索窓のサイズや位置の細かい調整が出来ません。そこで…

検索要素 V1 コードに切り替え

先ほどのコードの下の方にある「基本」というリンク文字をクリックします。

次の画面でサイドバーのコード取得をクリック。

すると、「検索要素 V1 コードに切り替え」の文字が画面下の方に現れるのでクリックします。

次の画面に現れているコードをコピーして、検索窓を設置したい場所に貼り付けます。

これで、サイズや位置の細かい調整が出来るようなgoogleカスタム検索窓を設置できるようになりました。