▲PAGE TOP

複数のWEBサイト内を検索するGoogleカスタム検索フォームを設置する


HPに検索機能を付けます。
機能を考慮して、やはりGoogleの検索エンジン(Googleカスタム検索)を実装しようと思います。Googleの強力かつ迅速な検索エンジンを自分のHPのみを検索対象にすることで、自分のHP内の検索が可能です。

ただしGoogleの場合は、上部に広告が表示されます。ただし現在普及している検索エンジン(Google、Yahoo、gooなど)で検索すると、必ず広告が表示されます。そのことから、オーナーでは特に気になる他社の広告ですが、ユーザーにとっては気にならないということを前提に実装します。

検索エンジンで検索されるワードは、基本的に公開されているページのみを対象としています。
そのためスタッフ専用サイトなど非公開にしているサイトは、たとえ自分のページであっても検索できませんのでご了承ください。

--------------------------------------------------------------------------------
の色と大きさを変更する場合>> アイコン( icon-search2020.psd )をダウンロードする 
--------------------------------------------------------------------------------

【注意】
Bloggerで運営しているサイトを検索対象とするときは、....blogspot.jpのアドレスでも...blogspot.comで登録をする>>詳細は http://am-yu.net/2012/08/03/google_custom_search/


■Googleカスタム検索への登録
---------------------------------------------------------------------------
  • http://www.google.com/cse/ を開き、必ずinfo@******.comのアカウントIDでログインする
  • 左の”カスタム検索エンジンの作成”をクリックする
  • 検索エンジンの名前 : ホームページ名+検索エンジン 例)hans-huber検索エンジン
  • 検索エンジンの説明 : 空欄のままでOK
  • 言語 : 適当なものを選ぶ
  • 検索対象 Twitterは検索対象外にする
    • http://www.*****.com 公式ホームページ
    • http://blog.*****.com ブログ
    • http://faq.*****.com  Q&Aサイト 
    • http://www.facebook.com/pages/********  Facebookページ
    • http://www.youtube.com/user/********  Youtube   
    • https://picasaweb.google.com/*******  Picasa公開ギャラリー
    • 【任意】 http://*****.ocnk.net/ おちゃのこネット 
  • エディションの選択 : スタンダードエディションを選ぶ 
  • ”次へ”をクリックする
  • スタイルの選択 : 特に設定の必要なし 設定する場合は適当にカスタマイズする
  • 下の”次へ”をクリック
  • 一番上にある”デザインページで設定を変更してください”をクリック
  • 基本をクリックして、検索エンジンIDをコピーする
  • 検索エンジンIDを下のソースの検索エンジンID貼り付け箇所にペーストする
  • ロゴの変更方法】検索結果ページの左上に表示されるロゴを変更する方法は、こちらで詳しく紹介されています
■検索ウィンドウのソースコード
------------------------------------------------------------------------------
  • 赤字の部分に検索エンジンIDを入力します 例)001516698100576333786:yxvglntvum4
  • 青字の部分を変更するとフォームの枠線と大きさ、背景色または背景画像、文字色などを変更できます
  • ミドリ字の部分を変更すると検索アイコンを変更できます

フォームデザイン:枠線と背景色あり
<table cellpadding=0 cellspacing=0>
<tr><td align=right>
<table cellpadding="0"cellspacing="0"><tr>
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<td>
<input type="hidden" name="cx" value="001516698100576333786:yxvglntvum4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="30" style="color:#555555 ; border: 1px #669966 solid; background-color: #B3DAB3;" /></td><td><input type="image" src="http://www.hans-huber.com/0102030405/img/icon-search2020.png" alt="検索" name="sa" />   
</td></form></tr></table></td></tr></table>


フォームデザイン:枠線と背景画像あり

<table cellpadding=0 cellspacing=0>
<tr><td align=right>
<table cellpadding="0"cellspacing="0"><tr>
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<td>
<input type="hidden" name="cx" value="001516698100576333786:yxvglntvum4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="30" style="color:#555555 ; border: 1px #669966 solid; background:transparent url(http://www.hans-huber.com/0102030405/img/bg-search.png) ;" /></td><td><input type="image" src="http://www.hans-huber.com/0102030405/img/icon-search2020.png" alt="検索" name="sa" />   
</td></form></tr></table></td></tr></table>



フォームデザイン:枠線のみ(背景色:透明 背景画像なし)

<table cellpadding=0 cellspacing=0>
<tr><td align=right>
<table cellpadding="0"cellspacing="0"><tr>
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<td>
<input type="hidden" name="cx" value="001516698100576333786:yxvglntvum4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="30" style="color:#555555 ; border: 1px #669966 solid; background:transparent url() ;" /></td><td><input type="image" src="http://www.hans-huber.com/0102030405/img/icon-search2020 .png" alt="検索" name="sa" />   
</td></form></tr></table></td></tr></table>




COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)