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

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

ブログ内検索のカスタマイズ

2008年05月05日(月)

ブログ内検索の検索フォームは、テンプレートのデザイン要素のひとつとしてうまく活用すれば、見た目も使い勝手も向上します。 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が参考になります。

#151
カテゴリ:FC2ブログ
タグ[ HTML カスタマイズ テンプレート変数 ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-1件)

http://mb.blog7.fc2.com/tb.php/151-616b237b

コメント内容も検索できるブログ内検索フォーム

コメント内容も検索できる検索フォームの設置をとのご要望を頂戴し、えっ?と思った管理人。 あれっ?ブログ内検索って、コメントも検索でき...

  • 2009年05月27日(水)14:17:46
  • from Novel テンプレート

<<FC2ブログのブログ内検索に関する仕様変更 | ブログ内検索にGoogleを利用する>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。