利便性UP！
サイト内検索窓を作る2つの方法
PHPで動作している「Word Press」だと、プラグインやテーマで簡単に実装できる「サイト内検索」機能。
虫眼鏡アイコンのついた検索窓でおなじみですね。
ここでは、「Word Press」ではない静的サイトで、サイト内検索窓を実装する方法を2つほど紹介しています。
1つは誰でも無料でできるGoogle検索ツールを活用した方法。
もう1つは、Google AdSenseを使った実装方法です。
Google検索エンジンで作る
サイト内検索窓
1つめの方法は、ご存知Google検索を活用した実装方法です。
サイト内で検索結果を出すことは出来ませんが、Google検索のページでサイト内検索の結果を出すことが出来ます。
自分でHTMLコードや検索窓をCSSでデザインする手間はありますが、Google検索エンジンは強力。また、誰でも無料で使える方法です。
サンプルはこちら。
<div class="search">
<form method="get" action="https://www.google.co.jp/search" target="_blank">
<input type="text" name="q" class="text" size="31" maxlength="255" value="">
<input type="submit" name="bt" class="button" value="検索">
<input type="hidden" name="hl" value="ja">
<input type="hidden" name="sitesearch" value="ドメイン.com">
</form>
</div>
.search .text{
margin: 0;
padding: 0.5em;
width: 70%;
height: 32px;
color: #aaa;
border: solid 1px #aaa;
border-radius: 2px;
}
.search .button{
margin: 0;
padding: 0.5em;
color: #fff;
height: 48px;
width: 68px;
border: 0;
background: skyblue;
border-radius: 4px;
}
検索機能はHTMLソース部分です。
1行目でGoogleの検索ページを指定。「method="get"」は必須ではないので、なくても動きます。
2行目の「maxlength」はテキストエリアの最大文字数を指定できます。name名は固定。
3行目は送信ボタンです。name名は変えても、空でも作動します。
4行目は言語指定。「ja」で本語を指定してます。ここもname名は固定。
5行目は、検索したいサイトのドメイン（つまり貴方のサイトのドメインです）を指定します。「https://」は不要です。
2行目、4行目のname名は固定で、変更すると動かなくなるので気をつけましょう。
あとは、テキストエリアやボタンをお好みで装飾すれば完成です。
Google AdSenseで作る
サイト検索窓
また、Google AdSenseでサイトを収益化している場合は、Google AdSenseから検索ツールを作成する事ができます。
デザインをカスタマイズできるジェネレーターも完備されているので、カラーなどを指定して、自動で生成されたコードをコピペするだけで、簡単に虫眼鏡アイコンつきの検索窓を実装する事ができます。
また、Google AdSenseの検索ツールは、検索結果をサイト内で表示させる事もできるので、違和感が少ないのも嬉しいポイントです。
Google AdSenseを利用するにはサイト審査があります。
すでに利用している場合はすぐに利用可能なので、「広告」ページの「広告ユニットごと」タブから、「検索エンジン」という広告タイプを選んで作成してみましょう。
サイト内検索窓の作り方 余談
サイト内検索機能は、ページ数が多くなるほど利便性が際立つツールです。
404エラーページなどに設置しておくと、URLが不明になったページや情報を探す手助けにもなります。
できる方法で実装して、ユーザビリティアップを目指してみましょう！
