検索フォーム下のリンクをカスタマイズ
公開日:
:
カテゴリーページをカスタマイズ
検索フォーム下の[他のカテゴリ]、[サイトマップ]、[ヘルプ]、[修正・削除]、[このカテゴリに新規登録]のリンクがスマートフォンに適していませんので、修正を加えます。
「kt.html」の120行目付近から検索フォームとこれらのリンクをレイアウトするためのテーブルがあります。
以下の部分です。
print<<"<!--HTML-->"; <!-- ページ中段の検索フォーム --> <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> <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>] <!--HTML--> #<!--(↓修正不可↓) if(!$gane_UR{$LC_kt} && $LC_mode eq "kt"){ # (↑修正不可↑)--> print<<"<!--HTML-->"; [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=regist&kt=$LC_kt">このカテゴリに新規登録</a>] <!--HTML--> #<!--(↓修正不可↓) } # (↑修正不可↑)--> print<<"<!--HTML-->"; </font></td></tr> </table> <!--HTML-->
[他のカテゴリ]、[サイトマップ]、[ヘルプ]のリンクを検索フォームの上に移動することにしました。
ちょっとややこしいですが、21~24行目を3行目の「<hr class=”c-both”>」の下に移動します。
さらに26行目を移動した部分の「</font>」の前に挿入し、「ヘルプ</a>]」の後ろにある半角スペースを削除、「サイトマップ</a>]」の後ろに半角スペースを追加します。
ここまででソースは以下のようになりました。
print<<"<!--HTML-->"; <!-- ページ中段の検索フォーム --> <hr class="c-both"> <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=$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> </td><td align=right> <font id=small> [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=enter">修正・削除</a>] <!--HTML--> #<!--(↓修正不可↓) if(!$gane_UR{$LC_kt} && $LC_mode eq "kt"){ # (↑修正不可↑)--> print<<"<!--HTML-->"; [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=regist&kt=$LC_kt">このカテゴリに新規登録</a>] <!--HTML--> #<!--(↓修正不可↓) } # (↑修正不可↑)--> print<<"<!--HTML-->"; </font></td></tr> </table> <!--HTML-->
続けて、4行目の「<font id=small>」の前に「<p>」を追加。
8行目の「</font>」の後ろに「</p>」を追加。
11行目の「colspan=2」を削除。
25行目の「<td>」を削除し、「</form>」を23行目の「</td>」の前に移動。
26行目の「</td>」を削除します。
これでソースは以下のようになります。
print<<"<!--HTML-->"; <!-- ページ中段の検索フォーム --> <hr class="c-both"> <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=$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"> </form></td> </tr> <tr> <td align=right> <font id=small> [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=enter">修正・削除</a>] <!--HTML--> #<!--(↓修正不可↓) if(!$gane_UR{$LC_kt} && $LC_mode eq "kt"){ # (↑修正不可↑)--> print<<"<!--HTML-->"; [<a href="$EST{cgi_path_url}regist_ys.cgi?mode=regist&kt=$LC_kt">このカテゴリに新規登録</a>] <!--HTML--> #<!--(↓修正不可↓) } # (↑修正不可↑)--> print<<"<!--HTML-->"; </font></td></tr> </table> <!--HTML-->
「kt.html」をアップロードし、Yomi-Search管理室でHTMLを更新します。
「サーチエンジン」カテゴリーの今回カスタマイズした部分をスマホで表示するとこうなりました。
スポンサードリンク
関連記事
-
-
まずはカテゴリーページから
はじめにカテゴリーページをカスタマイズします。 なぜトップページからではなくカテゴリーページか
-
-
登録サイト表示部のカスタマイズ
カスタマイズ前と後を比較できるようにもう一つYomi-Searchをインストールしました。 「DE
-
-
上部メニューバーのカスタマイズ
カスタマイズ用のYomi-Searchである「DEMO2」の大カテゴリー「サーチエンジン」のページを
-
-
子カテゴリー表示部分のカスタマイズ1
それでは、子カテゴリー表示部分をカスタマイズします。 前回のカスタマイズでこのようになっていま
-
-
子カテゴリー表示部分のカスタマイズ2
カスタマイズ用デモサイトの「サーチエンジン」カテゴリーの子カテゴリー表示部分をリスト表示に変更したH
-
-
その他のカテゴリー表示部分のカスタマイズ
カテゴリーページの一番下にある【その他のカテゴリ】表示部分をカスタマイズします。 ここは前
-
-
検索フォームをカスタマイズ
次に検索フォーム部分をカスタマイズします。 背景色がグレーの部分です。 パソコン等、
-
-
カテゴリーページのカスタマイズ仕上げ
前回まででカテゴリーページのカスタマイズはほぼ終了ですが、仕上げとして少し手を加えましょう。
スポンサードリンク
- PREV
- 検索フォームをカスタマイズ
- NEXT
- カテゴリーページのカスタマイズ仕上げ