ホームページ作成

【ホームページ作成】サイト内検索機能を設置する（Yahoo!版）

アクセス制限・認証、サイト内検索

更新日：2008年02月20日

サイト内検索機能を設置する（Yahoo!版）

西村文宏

自分のウェブサイト内に限定した検索機能（サイト内検索機能）を設置してみませんか？高度なスキルがなくても、指定のHTMLを貼り付けて少し修正するだけで、サイト内検索機能が実現できるお手軽な方法があります。

検索ボックスをカスタマイズする

検索ボックスのHTMLを編集する際の注意事項が、Yahoo!検索のサイト管理者向けヘルプ「Yahoo! JAPANが配布している検索窓のHTMLソースやロゴは変更できますか」に書かれていますので、事前に読んでおきましょう。

サイト内検索をデフォルトにする

作成した検索ボックスでは、最初に「ウェブ全体を検索」の方にチェックが入っています。これを、最初から「このサイト内を検索」の方がチェックされているように修正してみましょう。

HTMLソース中の下記の部分を修正します。

<li style="display:inline;"><input name="vs" type="radio" value="" checked="checked">ウェブ全体を検索</li>

<li style="display:inline;"><input name="vs" type="radio" value="●●●">このサイト内を検索</li>

ソース中の「checked="checked"」がある部分を移動します。（上記ソースの太字部分をカットし、下記ソースの太字部分に貼り付けます。）

<li style="display:inline;"><input name="vs" type="radio" value="">ウェブ全体を検索</li>

<li style="display:inline;"><input name="vs" type="radio" value="●●●" checked="checked">このサイト内を検索</li>

上記のようにすると、「このサイト内を検索」の方が最初からチェックされるようになります。
「このサイト内を検索」という文字列も書き換えて、「allabout.co.jp内を検索」などにすると検索対象が分かりやすくなるかもしれません。

検索ボックスの横幅を変更する

作成した検索ボックスは、そのままではウインドウ幅（または検索ボックスの外側にあるボックス）の50％の横幅で表示されるようになっています。この横幅は、ソース中のスタイルシート部分を修正することで、自由に指定できます。

HTMLソース中にある下記の場所を修正します。

「width:50%;」の部分を、望みの横幅に修正します。例えば、150ピクセルにする場合は下記のように修正します。

おわりに

今回は、Yahoo! Japanが提供しているサイト内検索機能を活用する方法をご紹介いたしました。無料で簡単にサイト内検索機能を設置できることがおわかり頂けたと思います。ぜひ、活用してみて下さい。

なお、Googleでも同様のサービスが提供されています。過去記事「サイト内検索機能を設置する（Google版）」でご紹介していますので、こちらもご参照下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！