検索フォームをカスタマイズ

次に検索フォーム部分をカスタマイズします。

背景色がグレーの部分です。

パソコン等、表示ウインドウの幅のあるデバイスで見た場合はそれほど気になりませんが、スマートフォンを縦持ちで見ると上の画像のように検索フォームが縦にかなりの領域を占めてしまいます。

ということで、リセットボタン、検索範囲の選択部分、メタサーチ部分、検索結果を次ページか別窓で表示するかの選択部分、最後の [More]と[New Window]のリンクを削除します。

「template」フォルダーの「kt.html」を開きます。
120行目あたりの以下の部分が検索フォームになっています。

<!-- ページ中段の検索フォーム -->
<hr class="c-both">
<table width="100%" cellpadding=8 cellspacing=0 border=0>
<tr id="mid-bar">
<td colspan=2>
	<form action="$EST{cgi_path_url}$EST{search}" method=get  target="" name="form1">
	<input type=hidden name=mode value=search>
	<input type=hidden name=page value=1>
	<input type=hidden name=sort value=$EST{defo_hyouji}>	
	
	<input type=text name=word value="" size="20"> <input type=submit value=" 検 索 "> <input type=reset value="リセット">
	&nbsp;
<!--HTML-->
#<!--(↓修正不可↓)
if($ganes{$LC_kt}){
print<<"<!--HTML-->";
	<select name=search_kt>
		<option value="${Ssearch_kt}-b_all" selected>このカテゴリ以下から検索
		<option value="$Ssearch_kt">このカテゴリから検索
		<option value="">全検索
	</select>
<!--HTML-->
}
#    (↑修正不可↑)-->
print<<"<!--HTML-->";
	<select name=method>
		<option value="and" selected>すべての語を含む
		<option value="or">いずれかの語を含む
	</select>
	<select name=engine>
<!--HTML-->
#<!--(↓修正不可↓)
&search_form;
#    (↑修正不可↑)-->
print<<"<!--HTML-->";
	</select>
	<select name=open_type onchange=ch_type(this)>
		<option value="0"selected>次ページで
		<option value="1">別窓で
	</select>
	 <font id=small>
	 [<a href="$EST{cgi_path_url}$EST{search}">More</a>]
	 [<a href="$EST{cgi_path_url}$EST{search}?window=_blank">New Window</a>]
	 </font>
	<input type=hidden name=hyouji value="30">
</td>
</tr>
<tr><td></form>

ハイライトした行を全て削除します。

そして11行目の「<input type=text name=word value=”” size=”20″> <input type=submit value=” 検 索 “> <input type=reset value=”リセット”>」から「 <input type=reset value=”リセット”>」を削除、「<input type=text name=word value=”” size=”20″>」を「<input type=text name=word value=”” size=”25″>」に変更しました。

変更後のソースです。

<!-- ページ中段の検索フォーム -->
<hr class="c-both">
<table width="100%" cellpadding=8 cellspacing=0 border=0>
<tr id="mid-bar">
<td colspan=2>
	<form action="$EST{cgi_path_url}$EST{search}" method=get  target="" name="form1">
	<input type=hidden name=mode value=search>
	<input type=hidden name=page value=1>
	<input type=hidden name=sort value=$EST{defo_hyouji}>	
	
	<input type=text name=word value="" size="25"> <input type=submit value=" 検 索 ">
	<select name=method>
		<option value="and" selected>すべての語を含む
		<option value="or">いずれかの語を含む
	</select>
	<input type=hidden name=hyouji value="30">
</td>
</tr>
<tr><td></form>

変更したら「kt.html」をサーバーにアップして、管理室でHTMLファイルを更新します。

以上で、スマホで表示すると次のようになります。

この検索フォーム部分は、その下の「サイトマップ」や「ヘルプ」へのリンク部分と一つのテーブルでレイアウトされていますので、次回はこのテーブルを調整したいと思います。