標準タイプ及びブログタイプのレイアウト

カスタムサーチを使って検索した結果をどのように表示するかについて3つの方法が用意されています。ここでは「標準タイプ」及び「ブログタイプ」の2つについてそれぞれどういった表示が行われるのかをロゴの指定方法などを含めて解説します。

1.標準タイプ
2.ブログタイプ

検索結果の画面レイアウトに関する設定は「検索結果」のところで設定を行うことができます。(設定変更の行い方については「カスタムサーチの設定変更と削除」をご参照下さい)。

3つのレイアウトが用意されていますがまずは「標準タイプ」について確認していきます。標準タイプはYahoo!側で用意したページに検索結果が表示さえるタイプで画面左上に指定したロゴが表示され、その右に検索ボックスが表示されます。実際の例としては次のようなものです。

左上に表示されてるのが自分で用意したロゴ画像です。このような検索結果の画面となります。

それでは標準タイプを使用する場合の設定方法について確認します。まずは「レイアウト」で「標準タイプ」にチェックをして下さい。

次に使用するロゴ画像を指定します。インターネット上に既にアップロードされている画像を使用する場合は「URL」を選択し画像のURLを入力します。

自分のPCなどに保存されている画像を使用する場合は「アップロード」を選択し「ファイルを選択」ボタンをクリックして自分のPCなどに入っているいる画像ファイルを指定します。

最後にロゴ画像をクリックした時の移動先のURLを指定して(省略も可)、画面最下部の「決定」ボタンをクリックすれば設定は完了です。

実際に検索すると先ほどのような検索結果の画面となります。

ブログタイプの場合はヘッダー部分が全て指定したロゴ画像が表示され、その下に検索ボックスが表示されます。実際の例としては次のようなものです。

画面上部に表示されてるのが自分で用意したロゴ画像です。このような検索結果の画面となります。

それではブログタイプを使用する場合の設定方法について確認します。まずは「レイアウト」で「ブログタイプ」にチェックをして下さい。

ロゴ画像の指定方法については「標準タイプ」と同じなのでここでは省略します。

ブログタイプの場合重要となるのが「検索結果の幅」です。先ほどの例ではロゴ画像の幅が800ピクセルで検索結果の幅は指定しませんでした。レイアウトがブログタイプの場合に検索結果の幅の指定を省略すると自動的に800ピクセルとなるためロゴ画像の幅と検索結果の幅が同じとなりぴったり表示されました。

もしロゴ画像の幅が900ピクセルで検索結果の幅を指定しない場合、次のような検索結果画面となってしまいます。

この場合、検索結果の幅は800ピクセルとなりロゴ画像は左上に合わせて配置されるためロゴ画像の右側100ピクセル分がカットされて表示されています。(ロゴ画像の横幅の方が検索結果の幅より少ない場合は、左上からロゴ画像が配置され右側に空白が表示されます)。

Yahoo!カスタムサーチでは「検索結果の幅」が設定できますので、ロゴ画像の幅が900ピクセルであればそれに合わせて検索結果の幅を同じく900ピクセルに合わせてみます。

設定を保存後に検索を実際に行ってみると、次のような検索結果画面となってしまいます。

検索結果の幅は900ピクセルでロゴ画像の横幅も900ピクセルなのですが実際に表示されたロゴ画像の幅は800ピクセル分で切れてしまいました。これはちょっと予想外だったのですがブログタイプのロゴ画像の横幅は800ピクセルに固定されているのかもしれません。(または単なる不具合かもしれません)。

現時点ではロゴ画像の横幅は800ピクセルに設定し、検索結果の幅も800ピクセルに設定しておくことをおすすめします。(右側が空白になっても問題ないロゴ画像であれば別です)。

AjaxTower