Googleへのページ遷移ではなく、自サイト内にGoogle検索結果を表示できるGoogle Co-opのカスタムサーチエンジンを利用するメモのような流れのような。
Google Co-opのCustom Search Engine作成ページへ。Googleのアカウントが必要。
1. Setup your search engine
Basic information
- Search engine name
- サーチエンジンの名前。管理用なので自分が分かりやすいものを
- Search engine description
- サーチエンジンの説明。管理用
- Search engine keywords
- 検索結果を最適なものにするためにGoogleによって使われる、そうです。あなたのサイトに関連する短いフレーズを入力してください。スペースで区切り、スペースを含むフレーズはダブルクォートで括る。
- Search engine language
- あなたのサイトで主に使われる言語を指定
What do you want to search?
- Only site(s) I select.
- 自分のサイトだけ検索する。
- The entire web, but emphasize site(s) I select.
- ウェブ全体を検索し、自分のサイトは強調。
- The entire web
- ウェブ全体を検索。
Select some sites
- Sites to search
- 検索対象にするサイト(自分のサイト)のURLを入力。複数の場合は改行
Advertising status
- Show ads on results pages
- 検索結果に広告を表示
- Do not show ads on results pages
- 広告を表示しない。すっきりした検索結果になりますが、非営利団体や大学などだけ選択できる模様。
最後の確認に同意してNext。
2. Try it out
検索ボックスに自分のサイトにありそうなキーワードを入れてテスト。プレビューされることを確認して次に進む。
My search enginesに切り替わるので、control panelのページへ。
Look and feel
検索結果の配色を設定。この設定でサイトへの溶け込み具合がかなり変わるのでPreviewで確認したり、実際に設置して調整する。
Code
サーチボックスのGoogleロゴをどこに配置するかの設定と、コードの取得をする画面。
- Search box code for your website
- 検索ボックスだけ設置
- Search box and search results code for your website
- 検索結果のページも自分でカスタマイズする場合、検索結果表示用のページを自分で作成する。検索結果用ページに入れるコードは下のテキストエリアのもの。
- 作成する予定の(作成した)検索結果ページのURLを「Specify the URL of the page~」の欄に入れる。検索ボックス用のコードは上のテキストエリア。
検索ボックスのコード
formの子要素はブロック要素でないといけないが、ここで取得するコードはinputがformの直接の子要素となっているため、input要素をブロック要素で囲む。
リストを使う場合
HTML
<form>
<ul id="search">
<li><input /></li>
･･
</ul>
</form>
---
CSS
#search li {display:inline;}
fieldsetでグループ化する場合
HTML
<form>
<fieldset>
<input />
･･
</fieldset>
</form>
---
CSS
fieldset {border:0;}
/* fieldsetでグループ化すると
ブラウザによってはボーダーが引かれることがあるため*/
pタグ使うのが正しいか分からないけど、pで囲ってCSSで余白調整などしてもよいかと思う。