Googleカスタム検索のサイト内設置方法!デザインカスタマイズ方法は?

Googleカスタム検索は無料で使える検索システムです。自分のサイト内に検索エンジンを埋め込み設置する方法を解説します。さらに、検索エンジンのカラーや表示デザインのカスタム方法もご紹介。検索エンジンとGoogleAdSenseと関連付けると収益UPも!

Googleカスタム検索のサイト内設置方法!デザインカスタマイズ方法は?のイメージ

目次

  1. 1Googleのカスタム検索をサイト内に設置するメリット
  2. Googleの高精度の検索システムが無料で使える
  3. 設置が簡単
  4. 2Googleのカスタム検索を自分のサイト内に設置する方法
  5. カスタム検索エンジンの作成方法
  6. カスタム検索エンジンの埋め込み方法
  7. 3Googleのカスタム検索は表示デザインもカスタマイズOK
  8. 表示カラーや検索結果のレイアウト変更が可能
  9. 画像検索も設定可能
  10. 検索ボックスや検索ボタンもカスタマイズ
  11. 4カスタム検索エンジンをGoogle AdSenseに関連付け
  12. 自分のサイトに関連のある検索結果で収益UPも
  13. 5Google カスタム検索を有効利用しよう!
  14. Googleの記事が気になった方にはこちらもおすすめ!

Googleのカスタム検索をサイト内に設置するメリット

Googleのカスタム検索をサイト内に埋め込み、設置するメリットはどのような点でしょうか。まずは、Googleカスタム検索について解説します。

Googleの高精度の検索システムが無料で使える

Googleのカスタム検索とは、ウェブサイトにGoogleの検索エンジン(検索窓)を埋め込み設置できる無料のシステムです。Googleの高精度の検索技術を利用して、サイト内の検索が可能になります。サイト全体を検索、もしくは一部から検索する設定や、検索エンジンや検索結果のデザインを自分好みにカスタマイズもできます。

カスタム検索窓

上の画像がGoogle検索エンジン(窓)です。(イメージ)Google検索エンジンの高精度な点は、関連する検索結果から順に表示されるところと、かな表記とカタカナ表記をどちらでも検索してくれるところです。(例:スマホ、すまほ)

設置が簡単

また、Googlカスタム検索を埋め込み設置する方法はとても簡単です。Googleアカウントを持っていれば、だれでも簡単にカスタム検索をサイトに埋め込み、設置できます。また、Googleが企業向けに提供していた有料検索サービスのGoogle Site Serachが終了しましたが、Googleカスタム検索は継続して使用可能です。

ThumbGoogleアカウントの作成方法!新規登録してGmailアカウントも取得!
Googleを取得すると、GmailなどのGoogleの便利なWebサービスを使えるようにな...

Googleのカスタム検索を自分のサイト内に設置する方法

では、Googleのカスタム検索を自分のサイト内に埋め込み、設置する方法を解説していきます。

カスタム検索エンジンの作成方法

まずは、Googleアカウントにログインしてから、「Googleカスタム検索」を開きます。そして、右上にあるカスタム検索エンジンの作成」をクリックします。(下の画像で赤枠部分)

Googleカスタム検索画面

すると、カスタム検索作成画面に切り替わります。そして、検索エンジンを設置したいサイト名を入力します。(下の画像で黄色線部分)

検索エンジン作成

カスタム検索では、サイト内の検索したい箇所によってURLを変更して表記します。(上の画像で緑枠部分)個々のページを検索したい場合は「/page.html」を末尾につけます。サイトの一部を検索したい場合は、「/docs/*」か「/docs/」をつけます。ドメイン全体から検索したい場合は、 「*.example.com」と入力します。

検索エンジン作成完了画面

次に、「言語」では検索に使用する「日本語」を選択します。(画像赤枠部分)そして、検索エンジンに名前を付けます。(上の画像で黄色枠部分)カスタム検索での検索エンジンの命名ルールは、「Google」と入れないこと、許可なく商標を使用しないこと、2~3語で短いものを使用することです。次に、「作成」をクリックし検索エンジンの作成完了です。(上の画像で青枠部分)

カスタム検索エンジンの埋め込み方法

続けて、カスタム検索エンジンの埋め込み方法を開設します。Googleカスタム検索エンジン作成が完了したら、表示される画面から「コードを取得」をクリックします。(下の画像で赤枠部分)

コード取得画面

「コードを取得」画面が表示されます。そのページにある検索エンジンの〈script〉をコピーします。(画像はサンプルですが、下の青枠部分をコピー)

scriptサンプル

コピーした検索エンジンのsprictコードを、埋め込みしたいサイトの箇所に貼り付けします。これで、Google検索エンジンが指定したサイトに埋め込みされました。

ThumbGoogleとYahooは同じ検索エンジンなの?検索順位の違いの理由は?
本記事ではGoogleとYahoo! Japanの検索エンジンについての紹介、及びGoogl...

Googleのカスタム検索は表示デザインもカスタマイズOK

また、Googleのカスタム検索は表示デザインもカスタマイズできます。検索エンジンのカスタム方法を解説します。

表示カラーや検索結果のレイアウト変更が可能

まずは、検索エンジンの表示カラーを変更します。カスタム検索の、「検索エンジンの編集」から「デザイン」を選択し、「テーマ」のタブをクリックします。(下の画像で赤枠部分)「デフォルト」、「シンプル」、「エスプレッソ」、「グリーンスカイ」、「バブルガム」、「シャイニー」、「クラシック」の7種類の中から好みの検索エンジンのテーマを選びます。(下の画像で青枠部分)

デザイン選択画面

保存をクリックすると、検索エンジンの表示カラーが変更されました。(上の画像で黄色枠部分)次に、検索エンジンで検索した結果のレイアウト変更をしてみます。同じく、カスタム検索ページから「検索エンジンの編集」(下の画像赤枠)から「レイアウト」のタブ(下の画像黄色枠)をクリックします。

検索エンジンレイアウト

レイアウトは、「オーバーレイ」、「2ページ」、「全幅」、「2列」、「コンパクト」、「結果のみ」、「Googleがホスト」の7種類があります。好きな検索エンジンのレイアウトを選択して、(下の画像では赤枠でオーバーレイを選択)「保存」をクリックします。(下の画像で青枠部分)

レイアウト決定画面

これで検索エンジンのレイアウトが変更されました。

画像検索も設定可能

カスタム検索では、画像検索も設定可能です。Googleカスタム検索での画像検索設定の方法をみていきましょう。まず、カスタム検索画面から「設定」をクリックし、「基本」タブを選択します。(下の画像で赤枠部分)

カスタム検索基本画面

画像検索の項目で、ボタンを「オン」にします。(下の画像で赤枠部分)すると自動で保存され、画像検索機能が追加されました。

画像検索オン画面

検索ボックスや検索ボタンもカスタマイズ

さらに、検索ボックスや検索ボタンの色もカスタマイズできます。「デザイン」の「カスタマイズ」タブを選択します。(下の画像で赤枠部分)

カスタマイズ

検索ボックスの色を変更したい場合は、「検索ボックス」を選び、▼マークから色を選択します。矢印で指した箇所に、適用された色と検索ボックスの見本が表示されています。(下の画像の赤枠・矢印箇所)

検索ボックスカスタマイズ

同様に、「検索ボタン」をクリックすると、検索ボックスの枠線の色、背景色、アイコンの色を選択できます。(下の画像青枠・青線箇所)

検索ボタンカスタマイズ

「Googleブランド表示」を選択し、「Googleブランドを無効にする」に設定すると、検索エンジンボックス内からGoogleのロゴが消えました。(下の画像で黄色枠部分)

Googleブランド表示

このように、細かい検索エンジンのデザイン設定までカスタマイズできます。

カスタム検索エンジンをGoogle AdSenseに関連付け

Googleカスタム検索エンジンをGoogle AdSense(グーグルアドセンス)に関連付けることで、さらに利用者にメリットがあります。Google AdSense(グーグルアドセンス)とは、クリックすると報酬が得られる広告のことです。

自分のサイトに関連のある検索結果で収益UPも

Google AdSense(グーグルアドセンス)とは、ユーザーが広告をクリックしただけで数十円から数百円の報酬がもらえるアフィリエイト(成果報酬型広告)です。訪問者が、自分のサイトでカスタム検索を使うと、検索結果に関連のある広告が表示されます。その広告がクリックされると、サイト所有者の収益になるのです。

アドセンスホーム

まず、Google AdSense(グーグルアドセンス)を使用するには、アドセンス側からの設定が必要になります。Google AdSense(グーグルアドセンス)に必要な申請の手順から説明します。

Google AdSense(グーグルアドセンス)ホームページを開いてください。そして、「お申込みはこちら」を選択します。(上の画像で赤枠部分)

アドセンス申し込み画面

アドセンスを使用したいサイトのURLとGmailアドレスを入力します。(上の画像で赤枠部分)GoogleAdSense(グーグルアドセンス)を使用するには、独自のドメインを取得する必要があります。HPやブログを開設するツールには、無料のものと有料のものがあり、独自ドメインの有無も違いがありますので、注意してください。

アドセンス申し込み画面2

アドレスに情報を受け取るか否かを選択し、(上の画像で赤枠部分)「保存して次へ」をクリックします。(上の画像で青枠部分)

アドセンスオンライン規約

GoogleAdSense(グーグルアドセンス)の利用規約を確認して、チェックボックスにチェックをし、「アカウントを作成」をクリックします。(上の画像で赤枠部分)

支払先住所

続いて、「支払先住所の詳細」画面になります。名前と住所欄をすべて入力して、情報を「送信」します。すると、電話番号確認画面になります。「電話番号」を入力し、確認コード受け取り方法をSMSかメールか選択します。「確認コード取得」をクリックします。

電話番号

選択した連絡先に届いた「確認コード」を入力して「送信」します。次に、「サイトをAdSenseにリンク」の画面が表示されます。

サイトウィンク画面

上の画像で赤枠部分のコードをコピーし、自身のHTMLの<head>と</head>タグの間に貼り付けます。貼り付け完了したら、チェックボックスにチェックをつけて、「完了」をクリックします。(上の画像で青枠部分)

アカウントの有効化画面

これで申請が終わりました。あとは、アドセンスからの審査の合否結果を待ちます。通常は1日程度で審査結果が出ます。

広告設定画面

アドセンスの審査を通過したら、Googleカスタム検索側の設定をします。まず、「検索エンジンの編集」から「広告」のタブを選択します。そして、右下にある「検索エンジンの収益化」を「オン」に設定します。Googleカスタム検索からの設定はこれで完了です。

Google カスタム検索を有効利用しよう!

Googleカスタム検索は、無料で簡単に設置可能で高性能検索のため、自分のサイトに埋め込みすると便利な検索ツールです。検索エンジンのデザインもお好みでカスタマイズできますし、カスタム検索とAdSense(アドセンス)と関連付けるとアフィリエイトで収益をUPすることも可能です。今回の記事を参考に、Googleカスタム検索を有効利用してみましょう。

Googleの記事が気になった方にはこちらもおすすめ!

ThumbGoogleの便利な検索オプション29選!高度な検索条件の指定方法を解説!
Googleは普通に単語を入力して検索する他に、検索オプションを利用して検索をするとより精密...
ThumbGoogle画像検索のやり方!PC/スマホで手元の画像の類似画像をネット検索!
本記事では便利なGoogle画像検索のやり方(方法)を紹介します。スマホやPCからも利用可能...
ThumbGoogleとYahooは同じ検索エンジンなの?検索順位の違いの理由は?
本記事ではGoogleとYahoo! Japanの検索エンジンについての紹介、及びGoogl...
ThumbGoogleトレンドの使い方!検索推移/急上昇ワード/ランキングの見方は?
Googleトレンドを使うとユーザーがどのキーワードを検索しているか、どのようにトレンドが推...
ThumbGoogleマップの検索履歴とタイムラインの行動履歴を確認・削除・残さない方法!
Googleマップには、実は検索しているうちにGoogleマップ履歴によって怖いことが起きる...

関連するまとめ

Noimage
この記事のライター
asanri