FC2 ブログの検索フォームの改良と自作

今回は FC2 ブログで 検索フォームのプラグインの問題点を解決する改造と テンプレートで独自の検索フォームを付ける方法の紹介です。

検索フォームの問題点

FC2 ブログには、ブログ内の記事を検索する機能があり、 公式プラグインやブログの設定でその検索フォームをつけることができます。
ただし、これらのもともと用意されているものをそのまま使うと多少不便なところがあります。

たとえば、プラグインなどの検索フォームで検索して、検索結果のページを表示したとします。 そこで、たくさん記事がヒットして、もう少し絞り込みたいな という状況になることはよくあります。
しかし、検索フォームの中身はクリアされて、空欄になっているので、 最初から検索ワードを入力しなければいけなくなり、ちょっと面倒です。

そこで、検索ワードを残しておくことが出来れば、 使いやすくなります。

プラグインの検索フォームを改造したり、 テンプレートを直接修正して、独自の検索フォームを付けることで、 この機能をつけることができます。

ただし、ブログの上部に表示する検索バーの場合は改造することが出来ません。

基本的な検索フォーム

まずはシンプルなサンプルで、 ブログの検索フォームと検索ワードを残す方法を説明します。
<form action="./" method="get">
  <input type="text" name="q" maxlength="200" size="20"
    <!--search_area-->
    value="<%search_word>"
    <!--/search_area-->
    />
  <input type="submit" value=" 検索 " />
</form>
input フォームの属性の各意味は次の表のようになります。
改造する場合も size 以外は固定と思ってください。
属性 説明
type input フォームのタイプ。"text" でテキスト入力になる
name 識別名。サイト側で使用するため "q" で固定
maxlength 入力可能な最大文字数。 送信可能な量に制限があるので "200" ぐらいで
size 幅(横のサイズ)を指定する。 任意
value フォームのデフォルト値

value のところでテンプレート用変数を使って対応します。
search_area は検索モードでのみ有効になるブロック変数で、 <%search_word> は検索ワードの単変数です。
検索結果の表示画面では、テキストボックスにその検索ワードがデフォルト値として使用され、 それ以外では value が指定されないので、空欄となります。

検索モードなどのテンプレートの変数に関する基本的な説明は前回の記事を見てください。

プラグインの検索フォームの改造

プラグインの検索フォームを改造する場合には、まず ブログの管理ページで検索フォームを追加します。
  1. [環境変数] の [プラグインの設定]
  2. [公式プラグイン追加]
  3. [検索フォーム] のプラグインを追加

この検索フォームを改造します。

検索フォームプラグインの [詳細] リンクを選択します。
詳細

[html 編集] リンクでプラグインの html を表示します。
fc2blog_plugin_html.png

そこを以下の内容に変更します。
<form action="./" method="get">
  <p class="plugin-search" &align>
    <input type="text" size="20" name="q" maxlength="200" 
      <!--search_area-->
      value="<%search_word>"
      <!--/search_area-->
    /><br />
    <input type="submit" value=" 検索 " />
  </p>
</form>

独自の検索フォーム

簡単なものであれば、先ほどの基本的な検索フォーム であげたシンプルな例をテンプレートに記述すれば、検索フォームをつけることができます。
場所は好きな場所でかまいませんが、 自分で付ける場合も、ページの上部やサイドバーのあたりに配置しておいた方がわかりやすいと思います。

検索ボタンをアイコンに変更

[検索] ボタンを虫眼鏡のアイコンに変えるだけでちょっとかっこよくなります。 シンプルな例をアイコンを使ったものに変更してみましょう。
<form action="./" method="get">
  <input type="text" size="20" name="q" maxlength="200"
    title="サイト内検索"
    <!--search_area-->
    value="<%search_word>"
    <!--/search_area-->
  >
  <input type="image" alt="検索" title="検索"
    src="http://blog-imgs-44.fc2.com/y/o/h/yohshiy/search.png">
</form>
ボタンの input の type を image に変更します。
image タイプのボタンは submit と同じように送信ボタンになります。 クリックした座標を送信するという違いはありますが、使われないだけなので、 同じと思ってもらって構いません。

アイコンは使いたい画像を通常のファイルアップロード方法でブログにアップしておきます。 その時の URL を <img /> タグと同様に src 属性で指定します。

alt の属性も img タグと同じで、画像が表示されないときの代替文字列です。
title はツールチップの表示です。 おそらく、虫眼鏡で検索するというのは浸透していると思いますが、 念のためツールチップで説明を記述しています。


あとは境界線等のスタイルを CSS を使って変更していきます。 サンプルとしてこのブログで使っている検索フォームの HTML と CSS のコードを紹介します。

メニューバーにある検索フォーム

ページ上部のメニューバーに付けている検索フォームです。
fc2blog_search_menu.png

HTML
<form action="./" method="get">
  <input class="menu_search_input" type="text" name="q" maxlength="200"
    title="サイト内検索"
    <!--search_area-->
    value="<%search_word>"
    <!--/search_area-->
  >
  <input class="menu_search_btn" type="image" alt="検索" title="検索"
    src="http://blog-imgs-44.fc2.com/y/o/h/yohshiy/search.png">
</form>
CSS で指定するためにタグに class 属性をつけています。
また、 size 属性はスタイルに関係するところなので、 CSS の width でした方がいいと思って外しています。 といいつつ、デフォルトの幅でちょうどいいかなという気がしたので、ここでは CSS でも指定していません。

CSS
input.menu_search_input {
    height: 18px;
    background-color: white;
    padding: 2px;
    padding-left: 6px;
    padding-right: 22px;    /* 入り込んだボタンの分、空ける */
    border: 1px solid #CCC; /* 境界線をメニューバーよりに明るめにして、へこんだ感じを出す */
    border-radius: 10px;    /* 境界に丸みを付ける */
    margin-right: 0px;
}

input.menu_search_btn {
    margin: 0px;
    margin-bottom: -3px;
    margin-left: -26px;     /* ボタンを左に移動する */
    padding: 1px;
}
CSS の主な設定は次のような点です。
  • 検索ボタンのアイコンはテキストボックス内に表示
    • ボタンに逆マージンをかけて左に浸食させ、テキストボックスではその分パディングを空ける
  • テキストボックスをへこます。
    • メニューバーより明るめの境界線を付ける。
      境界線にはへこんだ感じを出すための inset というオプションがあるが、 丸みを付けているとおかしな感じになるので、周りより明るめの線を引くだけにしている。
  • テキストボックスに丸みを付ける
    • border-radius を使う
border-radius は CSS3 の機能で IE では対応していません(2012-4-13)が、 見え方がちょっと変わるだけなので、気にせず使っています。
こういった新機能のブラウザの対応状況を調べるのには HTML5 Please という便利なサイトがあります。

検索モードで表示する検索フォーム

このブログでは、メニューの検索フォームだけでなく、 検索を実行した後の検索結果ページ(検索モード)に、もう一つ検索フォームをつけています。 そちらでは大きめの検索フォームを表示して、 絞り込み検索などをさらにやりやすいようにしています。
fc2blog_search.png

HTML
<form
  action="./" method="get">
  サイト内検索
  <input class="search_input" type="text" name="q" maxlength="200"
    value="<%search_word>">
  <input class="search_btn" type="image" alt="検索"
    src="http://blog-imgs-44.fc2.com/y/o/h/yohshiy/search_button.png">
</form>
html のコード片に search_area のブロック変数がないのは、 検索フォーム全体を search_area のブロックに入れているためです。

CSS
input.search_input {
    width: 75%;
    padding: 2px 2px 2px 6px;
    border: 1px solid #CCC;
    height: 22px;
}

input.search_btn {
    position: absolute;
    top: 1px;
    margin-left: 2px;
}
ここでの CSS の設定はほとんど位置の微調整です。
あと、こちらは幅を width で指定しています。

その他のサンプル

FC2 ブログ向けというわけではありませんが、 以下のサイトが参考になるのではないかと思います。
関連記事
スポンサーサイト
Prev.    Category    Next 

trackback

まとめteみた.【FC2 ブログの検索フォームの改良と自作】

今回はFC2ブログで検索フォームのプラグインの問題点を解決する改造とテンプレートで独自の検索フォームける方法の紹介です。検索フォームの問題点FC2ブログには、ブログ内の記事を検...

新規トラックバック


この記事にトラックバックする(FC2ブログユーザー)

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
33位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

04月 | 2017年05月 | 06月
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。