Google検索窓を設置しました

はてな

ブログ内検索用のGoogle検索窓を設置したので、設定方法をメモしておきます。設置したのは「はてなダイアリー」ですが、他のブログや一般のWebサイトでも、同じ方法で設置できるはずです。

Googleフリー検索

利用したのは、「Googleフリー検索 (ベーシック版)」です。詳細は、下記のページを参照してください。2種類のサンプルコードが載っています。
http://www.google.co.jp/intl/ja/searchcode.html

仕様

サンプルコードから以下のような仕様であることがわかりました。

HTTPリクエスト
パラメータ一覧
パラメータ名 内容
q 検索キーワード
ie 検索窓を設置するページのエンコーディング
※UTF-8、EUC-JPなど
oe 検索結果ページのエンコーディング
※UTF-8、EUC-JPなど
hl 言語
※日本語の場合は「ja」
sitesearch 検索対象のWebサイト
※「http://」は付けない
※ブランクの場合はWWW検索になる

設置内容

上記の仕様に基づいて、サンプルコードをカスタマイズしました。

HTML
<!-- Google -->
<div id="google-search">
    <form method="get" action="http://www.google.co.jp/search">
        ブログ内をGoogle検索
        <input type="text" name="q" size="40" maxlength="255" value="">
        <input type="hidden" name="ie" value="EUC-JP">
        <input type="hidden" name="oe" value="EUC-JP">
        <input type="hidden" name="hl" value="ja">
        <input type="hidden" name="sitesearch" value="d.hatena.ne.jp/simply-k">
        <input type="submit" name="btn_google_search" value="検索">
    </form>
</div>
<!-- Google -->

説明

  • 上記のコードを、ページのヘッダに追加しました。*1
  • WWW検索機能は不要なので取り除き、ブログ内検索のみとしました。
  • はてなダイアリーのエンコーディングはEUC-JPなので、ieをEUC-JPに書き換えました。
  • oeはUTF-8のままでもよさそうですが、一応、ieと合わせてEUC-JPにしておきました。
CSS
div#google-search {
    margin: 10px 20px;
}

@media print {
    div#google-search {
        display: none;
    }
}

説明

  • 上記のコードをスタイルシートに追加しました。
  • マージンを設定しました。
  • 検索窓が印刷されないようにしました。

*1:「はてなダイアリー」では、「<div class="main">」の後になります。