Yahoo!のカスタムサーチ検索窓をmt.Vicunaに設置するテストをやったことのメモです
作業メモ程度なので細かい部分は省略しています。あと、カスタム検索の仕様変更等で内容が当てはまらない部分がでてくることがあります。
1.カスタムサーチ窓の作成
カスタムサーチは、Yahoo! JAPANの検索を自分のサイトにあった検索窓を作成することができます。以下のページからYahoo!JAPANのIDを用意して作成します。
説明にしたがって作成していけば数分で検索窓設置用のコードが作成されます。検索窓の設定数の上限は５つで、今回用に新たに作成しました。幾つか種類があるのですが、ウォーターマークタイプを選択してみました。
2.コードのスタイルとJavaScriptを分離する
カスタムサーチの説明では、作成されたコードをそのまま貼り付けることで動作することになっていますが（コードを改変すると動作しなくなることがある、といった注意書きがあります）、スタイルシートの部分と検索フォームの部分とを分離させて作業することにしました。
スタイルシートの箇所は<style type="text/css">から</style>の間の部分でstyleタグを除いた部分を一旦コピーしてテキストエディタを起動させペーストしておきます。（すぐに作業するのであればファイル保存してなくてもおｋ）
JavaScriptの部分も同様にscriptタグを除いたJavaScriptのコードをコピーしてエディタに貼ります。
テンプレートの作成
はじめに環境を説明しておきますと、テンプレートはmt.Vicuna（2.2.0）、Vicunaのスキンはテンプレートセット同梱のSmart Canvas、Movable Typeは、MTOS version 4.23-en をInstaMTにておこなってます。
インデックステンプレートでJavaScriptの部分とCSSの部分のテンプレートを作成。MTLinkタグで楽をしたいだけなので、普通に.cssファイルと.jsファイルを作ってしまってもかまわないのですが。
フッターテンプレートにコードを貼り付ける
スタイルシートとJavaScriptを除いた部分、即ち先頭の<div id="srchBox">と<img src="" ... /></div>までのコードをフッターのテンプレートに貼り付けします。フッターにこだわる必要は特にないですが、ヘッダーから記事にかけての構造を崩したくなかったので。スタイルシートで画面上部にもっていくということで対応してみます。
JavaScriptの部分は、</body>の上付近に外部.jsファイルの読み込みを記述しておきます。
<script type="text/javascript" src="<MTlink template="インデックステンプレートでY!検索のJavaScriptのコードの部分を作成した時のテンプレート名">"></script>
スタイルシートの調節
ヘッダーのlink要素が入っているテンプレートモジュールに先に作成したCSSファイルを読み込むコードをうめておく必要があります。
<link rel="stylesheet" href="<$MTLink template="インデックステンプレートでY!検索のCSSのコードの部分を作成した時のテンプレート名"$>" type="text/css" />
カスタム検索のタイプにより調整箇所が異なったり、細かい部分が多いので詳しいことは省略しますが（というか今ココみたいな感じで調整中なので）、要は検索フォームの部分をposition: absoluteで上部にくるように調節します。
以下のような形になりました。
追記：2009/08/23 実際に設置されているカスタム検索窓は、このブログ上ではなく、サイトトップなどです。確認されたいかたは以下よりどうぞ。