カスタムサーチの新規作成

Yahoo!カスタムサーチを作成し必要なコードを取得する方法について解説します。検索ボックスのデザインや検索結果の表示方法などを設定することができます。設定する項目は非常に多いですが順に解説していきます。

1.Yahoo!カスタムサーチへのログイン
2.検索窓デザイン
3.検索設定
4.検索結果ページデザイン
5.検索結果HTMLソース確認

まずはYahoo!カスタムサーチの管理画面にログインしますブラウザから下記のURLへアクセスして下さい。

• http://custom.search.yahoo.co.jp/

画面左側の「Yahoo! Japan IDでログイン」と書かれた個所をクリックして下さい。ログイン画面が表示されます。

あらかじめ作成済のYahoo! Japan IDとパスワードを入力し「ログイン」ボタンをクリックして下さい。無事ログインに成功すれば次のような画面が表示されます。

この画面がカスタムサーチの管理画面となります。新しいカスタムサーチを作ったり、作成済のカスタムサーチの編集を行ったりします。

それでは最初のカスタムサーチを作成してみます。「新規設定」と書かれたボタンをクリックして下さい。

新規にカスタムサーチの作成が開始されます。

それでは順に見ていきます。

「設定名」は作成するカスタムサーチの名前です。複数作成した時に区別付けるための名前ですので自由に決めて頂いて結構です。検索ボックスなどには表示されません。(1つのアカウントで最大5つのカスタムサーチが作成できるようです)。

「検索対象」はウェブ検索とサイト内検索のどちら又は両方を使用するかどうかを選択します。ウェブ検索は通常の検索と同じく全世界のウェブを対象とした検索です。サイト内検索は指定したサイトだけを対象に検索を行います。

値を変更すると画面上部に表示されている「検索窓デザインのプレビュー」が変わります。「サイト内検索とウェブ検索の切り替えタイプ」を選択した場合は検索ボックスにどちらのタイプを使って検索を行うのかのラジオボタンが表示されます。

「サイト内検索のみ」または「ウェブ検索のみ」を選択した場合は検索ボックスにはラジオボタンが表示されません。

「サイト内検索の対象ドメイン」には検索対象に「サイト内検索」を使用するものを選んだ場合の検索対象となるドメイン又はURLを入力します。指定する場合は「example.com」や「www.example.com」「www.example.com/dir/」のように「http://」の部分は除いた部分を入力します。

「検索窓の幅」では検索ボックスの横幅を指定します。この幅はキーワードを入力するテキストボックスの幅のことではなく、検索ボタンなどを含めた全体の幅となります。

幅は「300px」「600px」「150px」「300～600pxの間で任意の値」から選択できます。「150px」以外の場合は検索ボックスは次のようなデザインとなります。(下記は300pxの場合です。この場合、検索ボックス全体の横幅が300pxとなります)。

「150px」以外に設定した場合だけ次のようなデザインとなります。

「色の設定」では検索ボックスの背景色と枠線の色を指定します。16進コードを直接入力するかテキストボックス右のアイコンをクリックして色を選択して下さい。

ここで「枠の色」と「背景の色」とは下記図のところ色のことです。

「クレジットタイプの選択」ではクレジットをどこに表示するのかを選択します。

例えばバッジタイプ1を選択した場合は次のようになります。

また検索タイプを「サイト内検索のみ」にした上でクレジットタイプを「ウォーターマークタイプ」を選択した場合は次のようになります。

「文字コード」では検索ボックスを設置するページで使用している文字コードを選択します。選択できる値は「UTF-8」「Shift_JIS」「EUC-JP「ISO-2022-JP」のいずれかです。また後で設定する検索結果ページのレイアウトでインラインタイプを利用される場合には、UTF-8を選択してください。

「検索結果の表示」では検索結果を別ウィンドウで表示する場合はチェックボックスにチェックを入れてください。

ここまでの設定が終わりましたら画面下部の「検索設定へ」ボタンをクリックして下さい。

続いて検索設定です。ここではウェブ検索を行う場合に関する設定を行います。(サイト内検索だけを行う場合には関係ありません)。

「検索対象」のところは設定された内容が後から反映される部分ですので入力は行えません。ここは飛ばして下さい。

「追加クエリ」は検索の際に常に追加するキーワードを指定します。また「削除クエリ」は検索の際に常に除くキーワードを指定します。どちらも省略可能です。

例えば「追加クエリ」に「車」と指定しておいた場合、検索をされる人がキーワードとして「ホンダ」と入力して検索すると自動的に「ホンダ AND 車」として検索されます。(ただし検索ボックスには追加クエリに関する情報は表示されません)。

また「削除クエリ」に「花火」と指定しておいた場合、検索をされる人がキーワードとして「花」と入力して検索すると自動的に「花 NOT 花火」として検索されます。(ただし検索ボックスには追加クエリに関する情報は表示されません)。

「削除ドメイン」では(ウェブ検索の場合の)検索結果に表示しないドメイン又はURLを入力します。指定する場合は「example.com」や「www.example.com」「www.example.com/dir/」のように「http://」の部分は除いた部分を入力します。

最大5ドメイン、1ドメインあたり半角128文字まで指定可能です。必要無ければ省略して下さい。

「検索対象ドメイン」では(ウェブ検索の場合の)検索対象とするドメイン又はURLを入力します。指定する場合は「example.com」や「www.example.com」「www.example.com/dir/」のように「http://」の部分は除いた部分を入力します。

最大5ドメイン、1ドメインあたり半角128文字まで指定可能です。省略した場合は全ドメインが対象となります。

「対象言語」では検索対象とする言語を指定します。「日本語のみ」「すべての言語」の他に複数の言語をチェックして設定も可能です。

ここまでの設定が終わりましたら画面下部の「検索結果ページデザインへ」ボタンをクリックして下さい。

続いて検索結果ページデザインです。ここでは検索結果をどのように表示するのかについて設定します。

「レイアウト」では検索結果のレイアウトについて設定します。検索結果には指定したロゴを表示することができるのですが、左上にロゴを表示するのか、それとも横幅いっぱいまで使ったヘッダー部分全体の画像を指定するのかを選択します。またインラインタイプを使って自分で用意したページの中に検索結果をインラインで表示することもできます。

レイアウトについては別のページで詳しく解説します。今回は「標準タイプ」を選択しておきました。

「画像付き検索結果」では、サイト内検索の検索結果に表示されるページ内の画像がYahoo!画像検索のインデックスに登録されている場合は、その画像を検索結果の横に表示するかどうか、表示する場合はどこに表示するのかを設定します。

「検索結果の幅」では検索結果の幅を指定します。指定しない場合、レイアウトの設定が「標準タイプ」「インラインタイプ」の場合はブラウザの幅などによって決まり、レイアウトの設定が「ブログタイプ」の場合は800ピクセルになります。

「検索結果表示ページURL」ではレイアウトとして「インラインタイプ」を設定した場合の検索結果を表示するページのURLを指定してください。

「テーマカラー」では検索結果で使用される色の組み合わせを設定します。「デフォルト」「クラシック」「キュート」「エスニック」「ナチュラル」「モダン」から選択します。またより細かく指定したい場合には細かく色を設定したり背景画像を指定することもできます。

例えばテーマカラーで「デフォルト」を選択した場合は次のような検索結果となります。

今度はテーマカラーで「エスニック」を選択した場合は次のような検索結果となります。

テーマを選択しておいてから必要な個所だけ個別に色を変更してもいいですし、全ての色を指定されても構いません。

「ロゴ画像」では検索結果に表示するロゴの画像、ロゴの画像がクリックされた時の移動先のURL、ロゴの代替テキストの値を設定します。

画像はURLで指定するか「アップロード」を選択してからローカルからファイルを選択してアップロードすることもできます。また「指定しない」こともできます。指定しなかった場合は代替テキストの値が表示されます。

画像はURLで指定するか「アップロード」を選択してからローカルからファイルを選択してアップロードすることもできます。また「指定しない」こともできます。

※ ロゴについても詳しくは別のページで解説します。今回は「指定しない」を選択し代替テキストだけ指定しておきました。

ここまでの設定が終わりましたら画面下部の「HTMLソース確認へ」ボタンをクリックして下さい。

ここまでで新規のカスタムサーチの設定は完了です。検索ボックスがどのように表示されるのかと検索ボックスを設置するWebページに記述するコードが表示されます。

表示されたコードをコピーしておいて下さい(いつでも表示することができますので、後からコピーもできます)。コピーが終わりましたら画面下部の「完了」ボタンをクリックして下さい。

カスタムサーチの管理画面に戻ります。先ほど作成したカスタムサーチが画面上に表示されていることが確認できます。

それでは次のページで実際にWebサイトにコードを記述して検索結果が表示されるかどうかを確認してみます。

AjaxTower