各ページに検索ボックスを設置

 サイト内検索は全てのページに置くのが良いということを聞いたので、設置することにしました。

 各コンテンツのページを圧迫したくなかったので、パンくずリストの脇に置くことにしました。合わせて、検索ボタンを虫眼鏡アイコンにして、次のような今風の検索ボックスにしました。

検索ボックス

HTML

 form 自身と、text box, submit button に id を付けます。これは、css でスタイルを設定していくためです。次のようなフォームにします。

<form id="search_form" accept-charset="EUC-JP" method="get"
action="cgi-bin/Search/namazu.cgi">
<input id="search_text" type="search" name="query" size="35" placeholder="サイト内検索"
title="サイト内検索" value="" required>
<input id="search_button" type="submit" name="submit" value="" alt="検索">
:
</form>

 ちなみに、自分は、通常のスタイルは class で行います。class と id の違いは、class は一つのページに複数の箇所で使えますが、id は、ページ内では一箇所しか付けられません。検索ボックスは複数あることはないので id にしました。

 submit ボタンの value は空にしています。値があると、ボタンに表示されてしまいます。しかし、css を理解しないブラウザでは空白となってしまうので、alt 属性を付けています。

CSS

 アイコン画像として、背景を透明にした虫眼鏡のアイコンを用意しました。背景を透明にすることで、ボタンにマウスが乗ったときにボタンの背景色を変えることで視覚的にわかりやすくなります。

 検索ボックスは右寄せで表示するようにしています。必要であれば、ボックス要素で囲んで位置調整できます。

/* 検索ボックス用 */
#search_form { position: relative; }
#search_text {
padding: 2px 1.8em 1px 1em;
position: absolute;
right: 0;
top 0;
}
#search_button {
background-image: url('/Images/loupe.gif');
background-size: 1.5em;
position: absolute;
right: 1px;
top: 1px;
width: 1.5em;
height: 1.5em;
background-color: transparent;
border: none ;
}
#search_button:hover { background-color: #87cefa; }

 サイズの設定を、ピクセルではなく、文字サイズを基準に指定しています。(一部はボーダーなのでピクセルで指定しています。)

 また、テキストボックスと検索ボタンを重ねて表示しています。テキストボックス内にボタンがあるイメージです。入力したテキストがボタンに重ならないように padding で余白を設定しています。

 ボタンの背景色は透明にしていますが、マウスが重なったときに色を変えてわかりやすくしています。

web サイト

Posted by sirius