★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【特典画像】 【あなたのお手伝い】
 

サイト内 検索窓の作り方

 
トップページ はじめに 講座の効果 作成実績 受講者の声 パーツテンプレート ホームぺージ講座 スマホサイト講座 よく使う用語集
 
 
プロフィール商品一覧特典画像お手伝い
 

サイト内 検索窓の作り方

 
トップページ 基礎知識 ホームページソフト スマホサイト講座 AI活用法 レンタルサーバ 用語集 HTMLタグ CSS入門 テクニック集
 
 
  トップページ > ホームページ作成で使えるテクニック
 

「サイト内 検索窓」をホームページに設置する方法

「サイト内 検索窓」をホームページに設置する方法をお伝えします。

まず、検索エンジンを使うと、インターネット上に公開されているコンテンツを検索しますよね。

でも、「サイト内 検索」の場合は、そのホームページの中にあるコンテンツだけを対象にして、検索結果を表示します。

コンテンツの多いホームページの場合、「サイト内検索」の窓を設置しておくと、使い勝手が良くなりますよ。お客さんとしても、「この情報はどこにあったっけ?」というときに、サイト内検索ができると、便利ですからね。設置も簡単にできるので、ページ数の多いホームページの場合は、サイト内検索の窓を設置することをおすすめします


そのため、ページ数の多いホームページを運営している場合は、「サイト内 検索窓」を設置した方が良いです。

具体的には、ページ数が100ページくらいを超えるホームページの場合は、「サイト内 検索窓」を設置することをおすすめしますね。


なお、「サイト内 検索窓」を設置する方法は、いくつかありますが、ここでは、「Google カスタム検索」を使って設置します。

「Google カスタム検索」は、無料で使うことができて、しかも検索の性能が高いので、ぜひ活用していきましょう!


【注意】

Googleの管理画面は頻繁に構成などが変わるので、下記手順でお伝えしている画面も、少し異なっている箇所があるかもしれません。 ただ、基本的な流れは一緒なので、どうかご理解ください。




「サイト内 検索窓」をホームページに設置する方法の手順

 
手順1:下記、「Google カスタム検索」のサイトにアクセスする。

https://cse.google.com/cse/all

Google アカウントでのログインが必要です。



手順2:サイトの右上にある「追加」のボタンをクリックする。




手順3:「新しい検索エンジンを作成」の画面で、「検索エンジン名」とサイトのURLを入力する。



なお、「検索の対象」は、当サイトであれば、「toretama.jp/*」と入力して、「追加」のボタンを押します。

URLの最後に、「アスタリスク(*)」が必要なので、注意してください。



手順3:「基本」の中にある、「コードを取得」のボタンをクリックする。




手順4:ソースをコピーして、ホームページに貼り付ける。



ソースが表示されるので、そのソースをコピーして、ホームページ上に貼り付けましょう。 なお、貼り付ける場所は、「サイト内 検索窓を表示させたい箇所」に貼り付けるようにしてください。



手順5:ホームページ上に、「サイト内 検索窓」が表示されることを確認する。

下記のように、ホームページ上に「サイト内 検索窓」が表示されることを確認してください。

あとは、適当なキーワードで検索をして、検索結果が表示されれば、作業は完了です。





ちょっとしたカスタマイズ方法

 

「Google カスタム検索」は、デザインなどを細かく設定することができます。

具体的には、Google カスタム検索のサイトにアクセスして、 「デザイン」の中にある「すべてのデザインの設定」をクリックすると、検索窓の色や表示(レイアウト)を細かく設定できますよ。



あとは、設定を保存して、ソースコードを、ホームページに貼り付けます。

これについては、表示を確認しながら、自分の好みで変更してみてくださいね。
(ただ、デザイン以外は、そのままの設定で使う形で、良いと思います)



やり方が分からない場合は?

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。


「こういうことを実現したい!」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。





【よく読まれている関連記事】


【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒ 当サイトで使用しているサンプルサイトの無料ダウンロードはこちら



【特典画像100枚】オフィスで働いている女性が人差し指を立てている画像

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒ オフィスで働いている女性が笑顔で人差し指を立てている画像について



AIやChatGPTを使ってインターネットビジネスを行う講座

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒ 「AI」や「ChatGPT」を活用してビジネスを行う講座はこちら



 
^