同一ドメイン内のキーワード検索窓ですね！かしこまりました。
シンプルな方法としては、Googleのカスタム検索エンジンを利用する方法があります。HTMLコードも比較的簡単に実装できますよ。
以下に手順とHTMLコードの例をご紹介しますね。
手順:
-
Googleカスタム検索エンジンの作成:
Googleカスタム検索 - 「新しい検索エンジン」をクリックします。
- 検索するウェブサイトにあなたのドメイン名を入力します。（例:
yourdomain.com） - その他の設定（言語など）を必要に応じて行い、「作成」をクリックします。
- 作成後、「検索エンジンのID」が表示されるので、控えておいてください。
- 左側のメニューから「ルック＆フィール」を選択し、レイアウトなどをカスタマイズできます。
- 同じく左側のメニューから「コードを取得」を選択し、表示されるコードをコピーします。
-
HTMLにコードを埋め込む:
- キーワード検索窓を設置したいHTMLファイルを開きます。
- コピーしたコードを、
<form>タグなどで囲まれた適切な場所（検索窓を表示したい場所）に貼り付けます。
HTMLコード例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>キーワード検索</title>
</head>
<body>
<h2>サイト内検索</h2>
<div class="gcse-search"></div>
<script async src="https://cse.google.com/cse.js?cx=YOUR_SEARCH_ENGINE_ID"></script>
</body>
</html>
注意点:
YOUR_SEARCH_ENGINE_IDの部分を、先ほど控えたあなたの検索エンジンのIDに必ず置き換えてください。<div class="gcse-search"></div>の部分が検索窓と検索結果の表示エリアになります。<script>タグは、Googleのカスタム検索エンジンを動作させるためのJavaScriptコードです。async属性により、ページの読み込みを妨げずに実行されます。
このコードをHTMLファイルに保存してブラウザで開くと、同一ドメイン内を検索できるキーワード検索窓が表示されるはずです。
もし、Googleカスタム検索以外の方法をご希望でしたら、例えばJavaScriptだけで簡易的な検索機能を作る方法などもありますが、一般的にはカスタム検索エンジンを利用するのが手軽で高機能ですよ。何か他に知りたいことや、試してみてうまくいかないことがあれば、遠慮なく聞いてくださいね！
0 件のコメント:
コメントを投稿