てんぽ: ブログ内検索のカスタマイズ

ブログ内検索の検索フォームは、テンプレートのデザイン要素のひとつとしてうまく活用すれば、見た目も使い勝手も向上します。 FC2ブログでは公式プラグインとしてサイドバーに設置するものが提供されていますが、それをそのまま使うだけではもったいない。

まず、検索フォームの位置ですが、画面右上に配置するのが多くの場合において最適だと考えます。 また、すべてのページで表示しておき、 いつでも検索できるようにしておきます（ヤコブ・ニールセンのガイドラインを踏まえています）。

検索フォームの具体的なコードは以下のようになります（検索フォームのサンプル）。

<form action="./" method="get" class="search">
<fieldset>
<legend>ブログ内検索</legend>
<input type="text" name="q" value="<%search_word>" size="30" /><input type="submit" value="検索" /><br />
<label><input name="w_res" type="checkbox" value="on" />コメントも検索対象に含める</label>
</fieldset>
</form>

form要素の直下にインライン要素であるinput要素は置けないのでここではfieldset要素を使っていますが、 inputを囲む要素としてpやdivもよく使われます。今回のカスタマイズのポイントは強調箇所。

value属性に<%search_word>を入れておくことで、検索結果画面で検索語を検索フォーム内に残すことができます。 これは一般的な検索エンジンと同様の動作です（<%search_word>は検索結果画面以外では表示されない）。

<input name="w_res" type="checkbox" value="on" />を入れておくことで、 コメント投稿者名とコメント内容を検索対象に含めるか否かというオプションを与えられます。 name属性の値をw_tbにすれば「トラックバックを検索対象にする」、 orで「いずれかの語を含むキーワードで検索」というオプションも可能 （この方法はkofumoさんのブログを参考にしました）。

ただし、検索オプションをはじめから多く提示すると見た目に煩雑ですし、かえってユーザビリティを低下させる原因になる場合もあります。 <!--search_area--> ～ <!--/search_area-->を使い、検索結果画面でのみ表示するように工夫するのもひとつの方法です。

<form action="./" method="get" class="search">
<fieldset>
<legend>ブログ内検索</legend>
<input type="text" name="q" value="<%search_word>" size="30" /><input type="submit" value="検索" /><br />
<!--search_area-->
<label><input name="or" type="checkbox" value="on" />いずれかの語を含むキーワードで検索（OR検索）</label><br />
<label><input name="w_res" type="checkbox" value="on" />コメントも検索対象に含める</label><br />
<label><input name="w_tb" type="checkbox" value="on" />トラックバックも検索対象に含める</label>
<!--/search_area-->
</fieldset>
</form>

また、常にコメントやトラックバックを検索対象にしたいのであれば、type="checkbox"の代わりにtype="hidden"を使います。

<form action="./" method="get" class="search">
<fieldset>
<legend>ブログ内検索</legend>
<input type="text" name="q" value="<%search_word>" size="30" /><input type="submit" value="検索" /><br />
<input name="w_res" type="hidden" value="on" />
<input name="w_tb" type="hidden" value="on" />
</fieldset>
</form>

見た目の調整に関してはADP: フォームにCSS 2007が参考になります。