検索窓を設置してサイト内、もしくはWEB全体の検索をする

更新日：2015年9月30日

自分のサイト内にGoogleの検索窓を設置して、何かを検索させられるような機能を付け加えたいと思っている方って結構多いのですよね。
最近受け持った案件の6件中4件が検索窓の設置を希望されていたので、改めて需要の高さを感じました。

では早速検索窓を設置する方法ですが、HTMLで

と記述すればOK。

普段皆さんが検索する時に使われているGoogleの検索窓をそこに表示することが出来ます。

検索窓にキーワードを入力して「検索」のボタンをクリックすると、Googleの検索窓で検索した時と同様の検索結果が表示されます。

それでは今度は検索させたいキーワードをセットした状態での検索窓の設置の方法です。

同様にHTMLで

と記述すれば、検索させたいキーワードをセットすることが出来ます。

キーワードを何処で決めているのかというと、上記HTMLソースの2行目のvalue=""の中にキーワードを書くだけで指定出来ちゃいます。

最後にお待ちかね？
指定したサイト内での検索結果を表示させる方法です。

今までの2つはGoogleと同じ検索結果を返していましたが、今度は指定したサイト内での検索結果を表示させるというもの。

つまり自分のサイトを指定してあげれば、あなたのサイト内のキーワードのみを拾ってきて、オリジナルの検索結果が表示されることになります。

当サイト、HTML・CSS・jQuery・PHPを徹底解説！【Web担当者の作り方】を例に上げると、

HTMLで

と記述すれば完了です。

一見何も変わっていないように見えますが、こちらの検索窓で検索した場合は当サイト内での検索結果しか表示されません。

例えば「CSS 解説」とセットされている下記の「検索」のボタンをクリックして頂くと分かりやすいかと思います。

サイトの指定の方法ですが、5行目のvalue=""の中に自分のドメインを書くことで指定することが出来ます。

需要の高い検索窓の設置方法、使い方を覚えておくと必ず役に立つ時が来る筈です。