*

検索フォームとその下のリンク部分の修正

公開日： : 検索結果ページをカスタマイズ

カテゴリーページと同じようになるように検索ページの検索フォームとその下部分のリンクを修正します。
キーワード検索結果ページのメニューバー修正後

まずは検索フォーム部分から。

「search.html」を開きましょう。

105行あたりの以下の部分が検索フォームになります。

<!-- ページ中段の検索フォーム -->
<hr>
<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=$FORM{sort}>
	
	<input type=text name=word value="$FORM{word}" size="20"><input type=submit value=" 検 索 "> <input type=reset value="リセット">
	&nbsp;
	<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>

ハイライトした行を全て削除して、以下のようにします。

<!-- ページ中段の検索フォーム -->
<hr>
<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=$FORM{sort}>
	
	<input type=text name=word value="$FORM{word}" size="20"><input type=submit value=" 検 索 "> <input type=reset value="リセット">
	<select name=method>
		<option value="and" selected>すべての語を含む
		<option value="or">いずれかの語を含む
	</select>
	<input type=hidden name=hyouji value="30">
</td>
</tr>
<tr><td></form>

そして「<input type=text name=word value=”$FORM{word}” size=”20″><input type=submit value=” 検 索 “> <input type=reset value=”リセット”>」から「 <input type=reset value=”リセット”>」の部分を削除し、「<input type=text name=word value=”$FORM{word}” size=”20″>」を「<input type=text name=word value=”$FORM{word}” size=”25″>」に変更します。

これでソースはこうなりました。

<!-- ページ中段の検索フォーム -->
<hr>
<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=$FORM{sort}>
	
	<input type=text name=word value="$FORM{word}" 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>

一度「search.html」を保存しサーバーにアップしてみましょう。

検索フォーム部分が以下のようになります。
検索フォーム部分修正後

続いて検索フォーム下の他のカテゴリやサイトマップ等へのリンクを修正いたします。

<!-- ページ中段の検索フォーム -->
<hr>
<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=$FORM{sort}>
	
	<input type=text name=word value="$FORM{word}" 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>
	 <font id=small>
	 [<a href="#other">他のカテゴリ</a>] 
	 [<a href="$EST{html_path_url}sitemap.html">サイトマップ</a>]
	 </font>
</td><td align=right>	<font id=small>
	[<a href="$EST{cgi_path_url}regist_ys.cgi?mode=help">ヘルプ</a>] 
	 [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=enter">修正・削除</a>] 
</font></td></tr>
</table>
<!--HTML-->

カテゴリーページと同じように、[他のカテゴリ]、[サイトマップ]、[ヘルプ]のリンクを検索フォームの上に移動します。

「<font id=small>」から「</font>」までの4行を「<!– ページ中段の検索フォーム –>」の下の「<hr>」の下に移動します。
さらに「[<a href=”$EST{cgi_path_url}regist_ys.cgi?mode=help”>ヘルプ</a>] 」を移動した部分の「</font>」の前に挿入、「ヘルプ</a>]」の後ろにある半角スペースを削除、「サイトマップ</a>]」の後ろに半角スペースを追加します。

ここまでの修正でソースはこうなります。

<!-- ページ中段の検索フォーム -->
<hr>
	<font id=small>
	[<a href="#other">他のカテゴリ</a>] 
	[<a href="$EST{html_path_url}sitemap.html">サイトマップ</a>] 
	[<a href="$EST{cgi_path_url}regist_ys.cgi?mode=help">ヘルプ</a>]
	 </font>
<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=$FORM{sort}>
	
	<input type=text name=word value="$FORM{word}" 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>
</td><td align=right>	<font id=small>
	 [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=enter">修正・削除</a>] 
</font></td></tr>
</table>
<!--HTML-->

続けて、「<font id=small>」の前に「<p>」を、「</font>」の後ろに「</p>」を追加。

「<td colspan=2>」の「 colspan=2」を削除。

「<tr><td></form>」の行の「<td>」を削除し、「</form>」を22行目にある「</td>」の前に移動します。

最後に「</td><td align=right> <font id=small>」の行から「</td>」を削除して修正は完了です。

最終的なソースです。

<!-- ページ中段の検索フォーム -->
<hr>
	<p><font id=small>
	[<a href="#other">他のカテゴリ</a>] 
	[<a href="$EST{html_path_url}sitemap.html">サイトマップ</a>] 
	[<a href="$EST{cgi_path_url}regist_ys.cgi?mode=help">ヘルプ</a>]
	 </font></p>
<table width="100%" cellpadding=8 cellspacing=0 border=0>
<tr id="mid-bar">
<td>
	<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=$FORM{sort}>
	
	<input type=text name=word value="$FORM{word}" size="25"> <input type=submit value=" 検 索 ">
	<select name=method>
		<option value="and" selected>すべての語を含む
		<option value="or">いずれかの語を含む
	</select>
	<input type=hidden name=hyouji value="30">
</form></td>
</tr>
<tr>
<td align=right>	<font id=small>
	 [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=enter">修正・削除</a>] 
</font></td></tr>
</table>
<!--HTML-->

「search.html」を保存してサーバーにアップロードし、スマホで見るとこうなりました。
検索フォーム下のリンク修正後

次回で検索結果ページのカスタマイズの仕上げをしたいと思います。

スポンサードリンク

【スポンサードリンク】

関連記事

検索結果ページ（PC）

検索結果表示ページのカスタマイズ

カテゴリーページのカスタマイズが一応終了しましたので、次に検索結果の表示ページをカスタマイズしようと

記事を読む

キーワード検索結果ページの登録サイト表示部分修正後

登録サイト表示部と上部メニューバーの修正

まずは登録サイトの表示部分です。 ここはカテゴリーページと同様に外部スタイルシートのID「

記事を読む

スポンサードリンク

【スポンサードリンク】

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREV
登録サイト表示部と上部メニューバーの修正

スポンサードリンク

【スポンサードリンク】

NEW ENTRY

検索フォーム下のリンク修正後
検索フォームとその下のリンク部分の修正

カテゴリーページと同じようになるように検索ページの検索フォームとその下

キーワード検索結果ページの登録サイト表示部分修正後
登録サイト表示部と上部メニューバーの修正

まずは登録サイトの表示部分です。 ここはカテゴリーページと同

検索結果ページ（PC）
検索結果表示ページのカスタマイズ

カテゴリーページのカスタマイズが一応終了しましたので、次に検索結果の表

登録サイト表示部分修正後
カテゴリーページのカスタマイズ仕上げ

前回まででカテゴリーページのカスタマイズはほぼ終了ですが、仕上げとして

検索フォーム下リンク部分カスタマイズ後
検索フォーム下のリンクをカスタマイズ

検索フォーム下の、[サイトマップ]、[ヘルプ]、[修正・削除]

→もっと見る

  • おすすめレンタルサーバー

  • 独自ドメインを取得するなら

PAGE TOP ↑