検索ウィンドウを実装する

HPに検索機能を付けます。

機能を考慮して、やはりGoogleの検索エンジン（Googleカスタム検索）を実装しようと思います。Googleの強力かつ迅速な検索エンジンを自分のHPのみを検索対象にすることで、自分のHP内の検索が可能です。

ただしGoogleの場合は、上部に広告が表示されます。ただし現在普及している検索エンジン（Google、Yahoo、gooなど）で検索すると、必ず広告が表示されます。そのことから、オーナーでは特に気になる他社の広告ですが、ユーザーにとっては気にならないということを前提に実装します。

検索エンジンで検索されるワードは、基本的に公開されているページのみを対象としています。

そのためスタッフ専用サイトなど非公開にしているサイトは、たとえ自分のページであっても検索できませんのでご了承ください。

--------------------------------------------------------------------------------

の色と大きさを変更する場合＞＞　アイコン( icon-search2020.psd )をダウンロードする 

--------------------------------------------------------------------------------

■Googleカスタム検索への登録

---------------------------------------------------------------------------

• http://www.google.com/cse/　を開き、必ずwebmaster@******.comのアカウントIDでログインする
• 左の”カスタム検索エンジンの作成”をクリックする
• 検索エンジンの名前　：　ホームページ名+検索エンジン　例）hans-huber検索エンジン
• 検索エンジンの説明　：　空欄のままでOK
• 言語　：　適当なものを選ぶ
• 検索対象　Twitterは検索対象外にする
• http://www.*****.com　公式ホームページ
• http://blog.*****.com　ブログ
• http://faq.*****.com　　Q＆Aサイト　
• http://www.facebook.com/pages/********　　Facebookページ
• http://www.youtube.com/user/********　　Youtube　 　
• https://picasaweb.google.com/*******　　Picasa公開ギャラリー
• 【任意】 http://*****.ocnk.net/ おちゃのこネット　
• エディションの選択　：　スタンダードエディションを選ぶ　
• ”次へ”をクリックする
• スタイルの選択　：　特に設定の必要なし　設定する場合は適当にカスタマイズする
• 下の”次へ”をクリック
• 一番上にある”デザインページで設定を変更してください”をクリック
• 基本をクリックして、検索エンジンIDをコピーする
• 検索エンジンIDを下のソースの検索エンジンID貼り付け箇所にペーストする

■検索ウィンドウのソースコード

------------------------------------------------------------------------------

• 赤字の部分に検索エンジンIDを入力します　例）001516698100576333786:yxvglntvum4
• 青字の部分を変更するとフォームの枠線と大きさ、背景色または背景画像、文字色などを変更できます
• ミドリ字の部分を変更すると検索アイコンを変更できます

フォームデザイン：枠線と背景色あり

<table cellpadding=0 cellspacing=0>

<tr><td align=right>

<table cellpadding="0"cellspacing="0"><tr>

<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">

<td>

<input type="hidden" name="cx" value="001516698100576333786:yxvglntvum4" />

<input type="hidden" name="ie" value="UTF-8" />

<input type="text" name="q" size="30" style="color:#555555 ; border: 1px #669966 solid; background-color: #B3DAB3;" /></td><td><input type="image" src="http://www.hans-huber.com/0102030405/img/icon-search2020.png" alt="検索" name="sa" />   

</td></form></tr></table></td></tr></table>

フォームデザイン：枠線と背景画像あり

<table cellpadding=0 cellspacing=0>

<tr><td align=right>

<table cellpadding="0"cellspacing="0"><tr>

<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">

<td>

<input type="hidden" name="cx" value="001516698100576333786:yxvglntvum4" />

<input type="hidden" name="ie" value="UTF-8" />

<input type="text" name="q" size="30" style="color:#555555 ; border: 1px #669966 solid; background:transparent url(http://www.hans-huber.com/0102030405/img/bg-search.png) ;" /></td><td><input type="image" src="http://www.hans-huber.com/0102030405/img/icon-search2020.png" alt="検索" name="sa" />   

</td></form></tr></table></td></tr></table>

フォームデザイン：枠線のみ（背景色：透明　背景画像なし）

<table cellpadding=0 cellspacing=0>

<tr><td align=right>

<table cellpadding="0"cellspacing="0"><tr>

<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">

<td>

<input type="hidden" name="cx" value="001516698100576333786:yxvglntvum4" />

<input type="hidden" name="ie" value="UTF-8" />

<input type="text" name="q" size="30" style="color:#555555 ; border: 1px #669966 solid; background:transparent url() ;" /></td><td><input type="image" src="http://www.hans-huber.com/0102030405/img/icon-search2020 .png" alt="検索" name="sa" />   

</td></form></tr></table></td></tr></table>