インラインタイプのレイアウト

カスタムサーチを使って検索した結果の表示方法として、インラインタイプのレイアウトを使用する方法について解説します。このタイプの場合はページの外観部分は自分で作成したページを使用し、そのページ内に検索結果をインラインフレームで表示することになります。

1.検索結果を表示するページの作成
2.コードの取得

まず検索結果を表示するページを事前に作成しておきます。このページの文字コードは UTF-8 で作成して下さい。ページに後から追加するコードとしては「検索窓HTMLソース」のコードと「検索結果HTMLソース」のコードの2つとなります。(検索結果のページに検索ボックスが不要であれば最初のコードは貼り付ける必要はありません)。

今回はシンプルに次のようなページを用意しました。

ページ内に表示されているテキストとフッターの間に検索結果と検索ボックスを表示させることにします。作成した検索結果を表示するページを自分で使用しているサーバにアップロードを行い、そのURLをメモしておいて下さい。

それではYahoo!カスタムサーチ側の設定です。まずは「レイアウト」で「インラインタイプ」にチェックをして下さい。

次に「検索結果表示ページURL」に先ほどメモしておいた自分のサイトの検索結果を表示するページのURLを入力して下さい。

必要であれば「検索結果の幅」や色などを設定されたあとで画面最下部の「決定」ボタンをクリックして下さい。

検索結果ページに記述するコードが2つ表示されます。(検索ボックスのコードも変更されていますので、検索ボックスのコードを貼り付けてあるページについても新しいコードに変更が必要です)。

表示されたコードをメモしたら「完了」ボタンをクリックして設定変更を完了させておいて下さい。

検索結果を表示するためのページのHTMLコードを編集し、「検索窓HTMLソース」のコードを検索ボックスを表示したい位置に記述し、「検索結果HTMLソース」のコードを検索結果を表示したい位置に記述して下さい。これで全ての準備は完了です。

では試してみます。検索ボックスが設置されたページから検索を行うと、検索結果を表示するために用意したページ内に検索結果が表示されます。

今回はヘッダーとフッターしか無いページに検索結果を挿入して表示しましたが、検索結果ページは自分で作成したページですので自由にページ構成を決めることができます。(ただし利用規則で検索結果ページにアフィリエイトなどを設置することは禁止されていますのでご注意下さい。詳しくは「商用サイトでの利用をご参照下さい)。

AjaxTower