ホームページ作成/アクセス制限・認証、サイト内検索

サイト内検索機能を設置する(Yahoo!版)(3ページ目)

自分のウェブサイト内に限定した検索機能(サイト内検索機能)を設置してみませんか? 高度なスキルがなくても、指定の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ソース中にある下記の場所を修正します。

<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版)」でご紹介していますので、こちらもご参照下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます