言葉には羽がある

言葉には羽根がある The words have wings.

 

Googleカスタム検索エンジンのアカウント作成設定方法

検索エンジンIDの取得

まずはじめに、自分のサイト専用の検索エンジンを作るために、検索エンジンのIDを取得します。GmailアカウントがあればGmailアカウントでログインします。アカウントを持っていない場合はGmailアカウントを新規作成してください。

 

 

Gmailアカウントがない方はアカウントを作ってください。

 

 

 

Gmailアカウントを持っている方はこちらのページにアクセスして、「新しい検索エンジン」をクリックします。

 

 

 

 

 

検索エンジンの作成

すると設定画面になります。

 

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

 

 

①検索するサイト:検索対象にしたいURLを入力(複数のURLでも可能)。ドメインに*(アスタリスク)をつけると検索範囲を指定することができます。

 

 

(例)

  • 個々のページ: www.example.com/page.html

  • サイト全体: www.mysite.com/*

  • サイトの一部: www.example.com/docs/* または www.example.com/docs/

  • ドメイン全体: *.example.com

 

 

 

②言語: 日本語圏の場合は日本語の方が良い

 

 

③検索エンジンの名前:好きなもので良い

 

 

ここまで入力できたら「作成」をクリック。

するとこんな画面になります。

 

 

 

「検索エンジンを編集」のコントロールパネルか左側にある検索エンジンの編集を選択。

 

 

 

検索エンジンの編集

基本設定

 

Googleカスタム検索エンジン設定方法

 

 

まずは基本設定から

 

 

  1. 「検索エンジンID」をクリックすると、作成したカスタム検索エンジンのIDが表示されます。
  2. 「公開URL」はこの検索エンジンのみが表示されているURL。きになる方は試しにクリックしてみよう。

Googleカスタム検索のロゴデザインを変更する方法

Googleカスタム検索エンジンのアカウント作成方法

 

 

Googleカスタム検索の検索結果画面に出てくるロゴデザインを変更する方法についてご紹介します。Googleカスタム検索エンジンの作り方や設定方法などについてはこちらをご覧ください。

 

 

Google検索結果ロゴデザイン変更する方法

 

 

検索結果が表示される時に、検索バーの隣にあるロゴデザインの変更方法について解説します。

上の画像の赤い四角で囲われている部分です。上の画像はロゴデザイン変更済みのものになります。デフォルトではお馴染みGoogleの画像になっています。これを自分の好きなロゴに変更できます。とっても簡単にできるので楽しんでやってみましょう!

 

 

Googleカスタム検索エンジンの「コントロールパネル」を開きます。

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

 

 

 

手順

上から順番に作業手順を解説しています。動画と合わせてご覧いただくとスムーズに作業が進められると思います。

 

 

  1. 左にある「デザイン」をクリック
  2. 「レイアウト」
  3. 「Googleがホスト」を選択
  4. 「新しいウインドウ」を選択
  5. 「カスタマイズ」
  6. 「ロゴの画像URL」にロゴとして使用したい画像が置いてあるURLを入力
  7. 「ロゴのリンク先」ロゴをクリックした時に飛ばしたいページのURLを入力
  8. 「ロゴの高さ」(縦幅に従って横幅も自動で決まります)→「保存」

 

 

以上になります。

 

 

Googleカスタム検索エンジンについて学ぶ

 

 

Googleカスタム検索エンジンのアカウント作成方法

 

 …

Googleカスタム検索の検索ボタンを好きな画像に変更する方法

Googleカスタム検索エンジンのアカウント作成方法

 

 

Googleカスタム検索エンジンの「検索ボタン」をオリジナル画像に変更する方法をご紹介します。

 

Googleカスタム検索デザインのカスタマイズ

 

検索バーの右側にある「検索」ボタンを画像に差し替える方法をご紹介します。

 

 

 

検索バーのコード

 

<div id="search-box">
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="検索エンジンID" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
</div>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

 

 

 

 

↓この部分を、

<input type="submit" name="sa" value="検索" 

Googleカスタム検索をアドセンスに紐付けて収益化する方法

Googleカスタム検索エンジンのアカウント作成方法

 

 

グーグルカスタム検索エンジンをアドセンスに紐付けて収益化する方法をご紹介します。アドセンスに紐付けることによって、あなたのGoogleカスタムエンジンからもアドセンス収益に繋げることができます。下に貼り付けた動画と合わせてご覧いただくことでスムーズにグーグルカスタム検索エンジンとアドセンスを紐付けできると思います。

 

 

 

グーグルカスタム検索エンジンのコントロールパネルを開きます。

こちらからGoogleカスタム検索エンジンのコントロールパネルを開きます。

 

 

 

アドセンスを紐付けたい検索エンジンを選択します。

 

 

カスタム検索エンジンを1つ作っている場合は上の画像のように、1つだけ表示されているのでそれを選択します。複数のカスタム検索エンジンを作っている方はアドセンスを紐付けたいカスタム検索エンジンを選択してください。

 

 

 

 

検索エンジンの収益化を「オン」にします。

 

Googleカスタム検索エンジンをアドセンスに紐付ける方法

 

「広告を設定」を選択し、検索エンジンの収益化を「オン」にします。青い枠の部分に、紐付けられたアドセンスIDが表示されます。

 

 

 

以上になります。

 

Googleカスタム検索エンジンについて学ぶ

 

Googleカスタム検索エンジンのアカウント作成方法

 

 …

Googleカスタム検索のデザインを変更する方法

2016年2月1日

以前書いた記事「Googleカスタム検索のデザインをカスタマイズする方法」で、htmlだけでもなかなかカッコイイデザインが出来たと思っていたのですが、また一から検索エンジンを作りましたので紹介したいと思います。

 

 

 

こちらの記事と合わせて読んでいただくことで、Googleカスタム検索エンジンのデザインをオシャレに自分好みに変更できると思います。

 

 

 

初心者用(コードを貼る場所の説明)

ワードプレスを最近はじめた方やブログのcssを最近いじり始めた方など、実際どこに何を貼ればいいのかとかわからないと思いましたので、Googleカスタム検索エンジンのhtmlのコードとcssをどこに貼れば表示されるか簡単にですが説明します。

 

 

 

WordPressでカスタム検索エンジンを運用する場合は、このhtml コードを「単一記事の投稿(single.php)」や「固定ページテンプレート(page.php)」や「テーマヘッダー(header.php)」な ど好きな場所に貼ってください。

 

 

コードを貼ったページでカスタム検索エンジンが表示されるようになります。投稿ページ、や固定ページでテキスト入力で Googleカスタム検索のコードを貼っても表示させることができます。

WordPress以外のサイトの場合も同様に、index.php、ヘッダー、フッターなど、検索エンジンを表示させたい部分にコードを追記すれば表示されます。

 

 

 

Googleカスタム検索のhtml

Googleカスタム検索のhtml部分のコードです。

 

 

 

<div style="display:none;">
<aside class="searches">
	<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
	<div>
		<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx"/>
		<input type="hidden" name="ie" value="UTF-8" />
		<input type="text" name="q" size="29" />
		<input 

Googleカスタム検索設置方法

2016年2月8日 更新

Googleが提供しているGoogleカスタム検索エンジンの作成方法と使い方について解説していきます。

 

 

このページにまとめられた記事を上から順番に実践すれば、ホームページにカスタム検索エンジンを実装したり、検索ボックスのデザインを変更したり、アドセンスと関連付けてマネタイズ出来るようになります。(Googleカスタム検索エンジンのアカウント作成方法

 

 

 

Googleカスタム検索とは?

Gmail無料アカウントがあれば、誰でも無料で自分のサイトにカスタマイズしたGoogleの検索エンジンを設置することができます。設定次第で、インターネット上のインデックスされている全てのサイトを検索結果に出すことも出来るし、好きなURLを設定することでサイト内検索をすることも可能です。複数のサイトを設定することも出来ます。

 

 

他にもテーマやトピックなどニーズに応じて検索エンジンをチューニングすることが出来たり、htmlやcssをカスタマイズすることで自分だけのオシャレな検索バーをデザインすることも出来ます。さらに、アドセンスのアカウントを持っていれば自分のアドセンスIDと紐付けることで、カスタム検索エンジンを収益化することも出来ます。これは、サイト内検索をした時に表示された広告から収益を上げる仕組みとなっています。

 

 

 

↑色がついている部分が広告です。

 

 

 

Googleカスタム検索エンジンのアカウント作成と設定

Googleカスタム検索エンジンIDの作成方法とアカウント設定方法

 

 

デザインの変更とカスタマイズ方法

htmlとcssで色や検索ボックスのサイズ変更、ロゴデザインを変更したりできます。

Googleカスタム検索のデザインを変更する方法

 

 

 

 

アドセンスと紐付けて収益化する方法

Googleカスタム検索エンジンをGoogleアドセンスに紐付けることによって、あなたのGoogleカスタム検索エンジンを収益化することができます。

Googleカスタム検索をアドセンスに紐付けて収益化する方法

 

 

Googleカスタム検索エンジンのアカウント作成方法

 …

Googleカスタム検索のデザインをカスタマイズする方法

 

・Googleカスタム検索のデザインを変更する方法 を一緒にご覧いただくことで、手間はかかりますがhtmlとcssで検索エンジンを好きなデザインに変更できるようになります。

 

 

 

検索ボタンをオリジナル画像に変更する方法

 

Googleカスタム検索デザインのカスタマイズ

 

検索バーの右側にある「検索」ボタンを画像に差し替える方法をご紹介します。

 

 

 

検索バーのコード

<div id="search-box">
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="検索エンジンID" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
</div>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

 

 

 

↓この部分を、

<input type="submit" name="sa" 
Translate »