Google Search(グーグル検索)

Googleカスタム検索①

Googleのカスタム検索を導入してみたので、

そのメモ書きです。

 

まず、
以下のサイトにアクセスしてください。
http://www.google.com/cse/manage/create?hl=ja

 

すると、
検索エンジンの設定画面が開きます。
Googleカスタム検索_検索エンジンの設定

必須項目である「名前」「検索するサイト」を入力します。
「名前」はそのサイトに合ったものを適当に入力してやります。
「検索するサイト」は実際にサイト内検索を行いたいサイトのURLを入れてください。

 

今回は取り敢えず、
名前:サンプルサイト
検索するサイト:google カスタム検索

としておきます。

 

で、
「エディション」を選択して、
利用規約を読んだ上で「次の利用規約を読んだうえで同意します」にチェックを入れてから、
「次へ」ボタンをクリックします。

 

 

※この際、広告を表示させたくない場合には「エディション」で有料版の「Site Search」の方を選択してください。

 

 

次に、
テスト画面へ移動します。
Googleカスタム検索_テスト

検索結果をテストしたい方は、ここでテストしてみてください。

 

今回はテストは飛ばします。

 

で、

さらに「次へ」ボタンをクリックすると、コードの取得画面へ遷移します。

Googleカスタム検索_コードの取得

 

今回だと、

<!-- Put the following javascript before the closing </head> tag. -->
<script>
(function() {
var cx = '001963001459958428322:icpwdrhhguc';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>

こんなソースを取得できるので、

これをサイト内のどこかにそのまま貼り付けます。

するとこんな感じでユーザー側には表示されます。

google カスタム検索_参考

デザインなんかはいろいろカスタマイズできるので、

興味がある方は勉強してみてください。

この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

関連記事

最近の記事

  1. 常時SSL通信設定後にやっておくべきこと
  2. 常時SSL通信設定方法
  3. htaccessとは
  4. WordPress
  5. WordPress
  6. 動的URLを疑似静的化
  7. ホームページ(homepage)
  8. 日本語ドメイン
  9. パンくずの構造化
  10. ホームページを公開したら、必ずやるべき事

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

アーカイブ

PAGE TOP