簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

Googleカスタム検索をホームページに設置する

自分のホームページに検索窓をつけて、サイト内検索を可能にする方法をご紹介します。
Googleの「カスタム検索」という無料の機能を使います。

※この機能の利用にはGoogleアカウントでログインが必要です。
 
grayline500.png

1)カスタム検索エンジンにログインする。
 
http://www.google.com/cse/

右上の「カスタム検索エンジンにログイン」ボタンをクリック。

google-search001.png


2)検索エンジンの編集

1、下の画面が表示された場合は「検索エンジンの編集」を「すべて」(もしくは「All」)を選択します。
2、「Add」ボタンをクリック。

google-search002.png


3)検索エンジンの作成

1、検索するサイトに「http://」以下のドメインを入力。
2、言語は「日本語」を選択します。
3、名前(検索エンジンの名前)は自由に付けられます。
  変更する場合は「名前を変更」をクリックして任意の名前を入力します。
4、すべて設定したら「作成」をクリック。

google-search003.png


4)カスタム検索エンジンのコードを取得する

1、「コードを取得」ボタンをクリック。

google-search004_1.png

2、グレー背景に記述されているコードを選択してコピーします。
  メモ帳などに貼り付けて保存しましょう。

google-search004_2.png


5)ホームページに設置する
サイドカラムにカスタム検索ボックスを設置します。(ACE/LEOプラン対応)
※スマホサイトでは表示されません、ご注意ください。(AMSのサイドHTMLがスマホ表示非対応のため)

1、「HTMLソースを編集」画面を開きます。
※スクリプトタグをご利用する場合は、使用許諾の同意が必要です。
スクリプトタグの有効化についてはこちら

google-search013.png

2、「4)カスタム検索エンジンのコードを取得する」の2でメモ帳などに保存したコードを貼り付けます。
3、図のように、貼り付けたコードの前後に「divタグ」を追記します。
4、「登録」ボタンをクリック。

google-search005.png

 
6)検索結果の確認

「プレビュー」ボタンをクリックして検索できるか確認します。
問題なければ「web更新」をクリックして公開しましょう。

google-search006_2.png

google-search006_1.png


grayline500.png

カスタム検索は、カスタマイズが可能です。
2つ設定方法をご紹介します。


テーマの変更
検索ボタン、検索結果のテキストの色などを変更できます。

1、検索エンジンの編集→デザイン→テーマタブを選択します。
2、お好みのテーマを選択します。(右側にサンプルが表示されます)
3、既にサイト内にカスタム検索を設置している場合は「保存」をクリック。自動反映されます。
※サイトに未設置の場合は「保存してコードを取得」をクリックしてコードを取得しましょう。
取得したコードの設置方法はこちらから

google-search007.png


検索結果ページのレイアウト変更
検索結果ページのレイアウトを指定できます。
検索ボックスを常にサイドメニューに表示し、
検索結果をサイト内のメインカラムに表示するように設定します。


1)検索結果表示ページの追加
1、検索結果を表示する新規ページを追加します。
  ページの追加方法はこちら
  ※ページの公開設定を「隠しページとして公開」で登録します。
2、追加したページのファイル名を変更します。
  ※初期設定では出力ファイル名が「数字.html」となっています。ページの内容に合わせたファイル名に変更しましょう。
  ファイル名の変更方法はこちら

2)検索エンジンの設定
1、検索エンジンの編集→デザイン→レイアウトタブを選択します。
2、「2ページ」を選択します。
3、「保存してコードを取得」をクリック。

google-search008_1.png

4、検索結果ページのURLの設定
  「検索結果の詳細」をクリック。
  「1)検索結果表示ページの追加」の2で設定したページのURLを入力し、「保存」します。
  ※パラメーター名の設定の変更は特に変更は必要ありません。

google-search009.png

5、検索ボックスのコードを取得
  表示されたコードをコピーしてメモ帳などに保存します。
  「次へ:検索結果コードの取得」をクリック。

google-search008_2.png

6、検索結果コードの取得
  表示されたコードをコピーしてメモ帳などに保存します。

google-search010.png

3)ホームページに設置する
サイドカラムにカスタム検索ボックスを設置します。(ACE/LEOプラン対応)
※スマホサイトでは表示されません、ご注意ください。(AMSのサイドHTMLがスマホ表示非対応のため)

1、「HTMLソースを編集」画面を開きます。
2、検索ボックスを設置する
  「2)検索エンジンの設定」の5でメモ帳などに保存したコードを貼り付けます。
  図のように、貼り付けたコードの前後に「divタグ」を追記します。
  「登録」をクリック。

google-search005.pngのサムネイル画像

3、検索結果コードを設置する
  「1)検索結果表示ページの追加」の1で追加したページの編集画面を開きます。
  「ページ見出し」部分をクリックして「記事を追加する」をクリック。

google-search011.png

本文の「ソース」ボタンをクリック。(青色になります)
2)検索エンジンの設定」の6でメモ帳などに保存したコードを貼り付けます。
図のように、貼り付けたコードの前後に「divタグ」を追記します。
「登録」をクリック。

google-search012.png

4、検索結果の確認
  「プレビュー」ボタンをクリックして検索できるか確認します。
  問題なければ「web更新」をクリックして公開しましょう。
 
grayline500.png

今すぐログインしてカスタム検索を表示しよう! >
grayline500.png

■ 全部アリ!最上級プランで本格派ビジネスサイトを!
サイドHTMLの設定の仕方を、電話で聞きたい…
そんなアナタには、ACEプランがオススメ!
ACEプランで出来る事 >

サイト制作代行+初年度利用料で…48,000円!

もしこの記事がお役に立てれば、下記ボタンから共有頂けると運営の励みになります。

このエントリーをはてなブックマークに追加
【0120-55-4682】平日9:00~18:00 /土曜10:00~17:00

平日9:00〜18:00/土曜10:00〜17:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ
はじめてのAMS

月別アーカイブ