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

検索ボックスの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ソース中にある下記の場所を修正します。

<input type="text" name="p" size="28" style="margin:0 3px;width:50%;">

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

<input type="text" name="p" size="28" style="margin:0 3px;width:150px;">

おわりに

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

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

【関連記事】




■容量たっぷり20GB、国内通話5分無料も付いて、2970円(税込)


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。