その他のカテゴリー表示部分のカスタマイズ

カテゴリーページの一番下にある【その他のカテゴリ】表示部分をカスタマイズします。

ここは前々回と前回でカスタマイズした子カテゴリー部分と同じように、幅90％・横四列のテーブルです。
したがって、全く同じ手法でカスタマイズすればよいことになります。

この部分も「temp.cgi」で生成されていますので、ソースを見てみましょう。
「pl」フォルダー内の「temp.cgi」をテキストエディタで開きます。
該当部分は15行目あたりにある以下の記述です。

sub PR_other_kt{
#その他のカテゴリ表示(&PR_other_kt)

local($Ekt_row=4,$tr_flag=0,$td_flag=1,$PRkt_no,$path=$_[0]);
#$Ekt_row=>表示列数
	if($#gane_other>=0){
print<<"<!--HTML-->";
<a name=other></a>【その他のカテゴリ】<font id=small>[<a href="$path#top">↑ページTOPへ</a>]</font><center><table width="90%" cellpadding=3 id=mid>
<!--HTML-->

foreach $PRkt_no(@gane_other){
	if($td_flag==1){print "<tr>";}
	print "<td>■<a href=\"$Ekt$PRkt_no$Eend\">$ganes{$PRkt_no}</a></td>\n";
	if($td_flag==4){print "</tr>";}
	if($Ekt_row>$td_flag){$td_flag++;}
	else{$td_flag=1;}
}
if($td_flag!=1){print "</tr>";}

print<<"<!--HTML-->";
</table></center>
<hr>
<!--HTML-->
	}
}

8行目の「<a name=other></a>【その他のカテゴリ】<font id=small>[<a href=”$path#top”>↑ページTOPへ</a>]</font><center><table width=”90%” cellpadding=3 id=mid>」を「<a name=other>【その他のカテゴリ】<div id=”o-kt”><ul>」に変更します。

CSSは前回のID「kt」をそのまま当ててもよいのですが、それぞれに別のスタイルを適用したくなった場合を想定して一応別のIDで設定しました。

続いて、12行目を削除し、13行目の「print “<td>■<a href=\”$Ekt$PRkt_no$Eend\”>$ganes{$PRkt_no}</a></td>\n”;」を「print “<li>■<a href=\”$Ekt$PRkt_no$Eend\”>$ganes{$PRkt_no}</a></li>\n”;」に変更。

14、15、16、18行目を削除します。

そして、21行目の「</table></center>」を「</ul></div>」に変え、

22行目の「<hr>」を「<hr class=”c-both”>」にします。

これでテーブルでレイアウトされていたカテゴリーがリスト表示になります。

8行目でページのTOPへのリンクを削除したので、最後の横罫線の下に追加しましょう。
22行目の下に以下の2行を追加します。

<p class="right">[<a href="$path#top">↑ページTOPへ</a>]</p>
<hr>

変更後のソースです。

sub PR_other_kt{
#その他のカテゴリ表示(&PR_other_kt)

local($Ekt_row=4,$tr_flag=0,$td_flag=1,$PRkt_no,$path=$_[0]);
#$Ekt_row=>表示列数
	if($#gane_other>=0){
print<<"<!--HTML-->";
<a name=other></a>【その他のカテゴリ】<div id="o-kt"><ul>
<!--HTML-->

foreach $PRkt_no(@gane_other){
	print "<li>■<a href=\"$Ekt$PRkt_no$Eend\">$ganes{$PRkt_no}</a></li>\n";
}

print<<"<!--HTML-->";
</ul></div>
<hr class="c-both">
<p class="right">[<a href="$path#top">↑ページTOPへ</a>]</p>
<hr>
<!--HTML-->
	}
}

ソースの変更が終了したら「temp.cgi」をサーバーにアップロードし、Yomi-Search管理室にログインしてHTMLを更新します。

更新後スマホで表示した画像です。

該当部分のHTMLソースは次のようになります。

<a name=other></a>【その他のカテゴリ】<div id="o-kt"><ul>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/01.html">ホームページ作成</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02.html">サーチエンジン</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/03.html">無料サービス</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/04.html">コンピュータ</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/05.html">ライフスタイル</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/06.html">エンターテイメント</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/07.html">ゲーム</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/08.html">音楽</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/09.html">スポーツ</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/10.html">ショッピング</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/11.html">ニュース・マスコミ</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/12.html">健康・医療</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/13.html">旅行・地域情報</a></li>
<li>■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/14.html">教育</a></li>
</ul></div>
<hr class="c-both">
<p class="right">[<a href="#top">↑ページTOPへ</a>]</p>
<hr>

続いて外部スタイルシート（style.css）に以下を追加して、サーバーにアップします。

#o-kt{width:95%;margin:10px auto;}
#o-kt ul{list-style:none;margin:0;padding:0;}
#o-kt li{margin:0 20px 20px 0;float:left;font-size:16px;}

.right{text-align:right;}

以上のカスタマイズ終了後のカテゴリーページの表示です。

パソコンで表示

スマートフォンで表示

これで、その他のカテゴリー表示部分のカスタマイズは終了です。