子カテゴリー表示部分のカスタマイズ1

それでは、子カテゴリー表示部分をカスタマイズします。

前回のカスタマイズでこのようになっています。

上のスクリーンショット画像でカテゴリー「サーチエンジン」の下に子カテゴリーへのリンクが表示されています。HTMLソースを見てみると、この部分は、幅が90％で横四列のテーブルになっています。
横幅が狭いのでカテゴリー名が改行されることで非常に読みにくくなっています。

テーブルを横二列すればある程度見栄えは良くなりそうですが、そうすると横幅の広いパソコン等で表示したときに、とんでもなく間延びしてしまいます。
そこで、ここはテーブルを使わずにリスト表示にして、スタイルシートでレイアウトを調整することにします。

この部分のHTMLは「template」フォルダー内の「kt.html」ではなく、「pl」フォルダー内にある「temp.cgi」にあるルーチンで生成されています。
「temp.cgi」をテキストエディタで開き、680行目あたりからの以下の部分を変更します。
（「¥」が「バックスラッシュ」に変換されていると思いますのでご注意ください）

sub PRbelow_kt{
#直下カテゴリを表示(&PRbelow_kt)
local(@arg,$T3,$td_flag,$key,$value,$area,@AREA,@PR_below_kt,%Clog1);
@arg=@_; %Clog1=%Clog;

	#その他の設定
	if($EST{html}){$Eend=".html";}

$T3=1;
print "\n<center><table width=\"90%\" id=mid>";

$td_flag=0;
	local($key,%check);
	while(($key)=each %ganes){
			if($key =~ /^$arg[0]_(\d+)$/){push(@PR_below_kt,$key);}
			elsif($key=~/^$arg[0]_(\d+)_/){
				$Clog1{"${LC_kt}_$1"}+=$Clog1{$key};
				$check{"${LC_kt}_$1"}=1;
			}
	}
	@PR_below_kt=sort @PR_below_kt;
	foreach $key(@PR_below_kt){
			if($T3==0){print "</td></tr>"; $T3=1;}
			if($T3==1){print "\n<tr><td>"; $td_flag=1;}
			else{print "</td>\n<td>";}
			
			if(!$Clog1{$key}){$Clog1{$key}=0;}
			print " ■<a href=\"$Ekt$key$Eend\">$ganes{$key}";
				if($check{$key}){print "*";}
			print "</a>";
			if($arg[1]){print"<i>($Clog1{$key})</i>";}
			
			if($T3<$arg[2]){$T3++;}
			else{$T3=0;}
	}
	if($gane_ref{$LC_kt}){
	@AREA=split(/&/,$gane_ref{$LC_kt});
	foreach $area(@AREA){
			if($T3==0){print "</td></tr>"; $T3=1;}
			if($T3==1){print "\n<tr><td>";  $td_flag=1;}
			else{print "</td>\n<td>";}

			print " ■<a href=\"$Ekt$area$Eend\">$ganes{$area}\@</a> \n";

			if($T3<$arg[2]){$T3++;}
			else{$T3=0;}
	}
	}
	
	if(!$td_flag){print "<tr><td>";}
	if($T3){print "</td></tr>";}
	print "\n</table></center>";

}

CGIは全く分かっておりませんので多分なのですが、カテゴリーをカウントしていって、四つおきに</tr>と<tr>を入れるというようなルーチンになっているんじゃないかと思います。
CGIを修正できればスッキリするんだろうなという気はしますが、私にはできませんので力技（？）でいきます（笑）。

上のソースでは10行目「print “\n<center><table width=\”90%\” id=mid>”;」を「print “\n<div id=\”kt\”>\n<ul>”;」に変えます。

続けて、
23行目「if($T3==0){print “</td></tr>”; $T3=1;}」を「if($T3==0){print “</li>”; $T3=1;}」に、

24行目「if($T3==1){print “\n<tr><td>”; $td_flag=1;}」を「if($T3==1){print “\n<li>”; $td_flag=1;}」に、

25行目「else{print “</td>\n<td>”;}」を「else{print “</li>\n<li>”;}」に、

39行目「if($T3==0){print “</td></tr>”; $T3=1;}」を「if($T3==0){print “</li>”; $T3=1;}」に、

40行目「if($T3==1){print “\n<tr><td>”; $td_flag=1;}」を「if($T3==1){print “\n<li>”; $td_flag=1;}」に、

41行目「else{print “</td>\n<td>”;}」を「else{print “</li>\n<li>”;}」に、

50行目「if(!$td_flag){print “<tr><td>”;}」を「if(!$td_flag){print “<li>”;}」に、

51行目「if($T3){print “</td></tr>”;}」を「if($T3){print “</li>”;}」に、

最後に52行目「print “\n</table></center>”;」を「print “\n</ul>\n</div>”;」に変更します。

以下が変更後です。

sub PRbelow_kt{
#直下カテゴリを表示(&PRbelow_kt)
local(@arg,$T3,$td_flag,$key,$value,$area,@AREA,@PR_below_kt,%Clog1);
@arg=@_; %Clog1=%Clog;

	#その他の設定
	if($EST{html}){$Eend=".html";}

$T3=1;
print "\n<div id=\"kt\">\n<ul>";

$td_flag=0;
	local($key,%check);
	while(($key)=each %ganes){
			if($key =~ /^$arg[0]_(\d+)$/){push(@PR_below_kt,$key);}
			elsif($key=~/^$arg[0]_(\d+)_/){
				$Clog1{"${LC_kt}_$1"}+=$Clog1{$key};
				$check{"${LC_kt}_$1"}=1;
			}
	}
	@PR_below_kt=sort @PR_below_kt;
	foreach $key(@PR_below_kt){
			if($T3==0){print "</li>"; $T3=1;}
			if($T3==1){print "\n<li>"; $td_flag=1;}
			else{print "</li>\n<li>";}
			
			if(!$Clog1{$key}){$Clog1{$key}=0;}
			print " ■<a href=\"$Ekt$key$Eend\">$ganes{$key}";
				if($check{$key}){print "*";}
			print "</a>";
			if($arg[1]){print"<i>($Clog1{$key})</i>";}
			
			if($T3<$arg[2]){$T3++;}
			else{$T3=0;}
	}
	if($gane_ref{$LC_kt}){
	@AREA=split(/&/,$gane_ref{$LC_kt});
	foreach $area(@AREA){
			if($T3==0){print "</li>"; $T3=1;}
			if($T3==1){print "\n<li>";  $td_flag=1;}
			else{print "</li>\n<li>";}

			print " ■<a href=\"$Ekt$area$Eend\">$ganes{$area}\@</a> \n";

			if($T3<$arg[2]){$T3++;}
			else{$T3=0;}
	}
	}
	
	if(!$td_flag){print "<li>";}
	if($T3){print "</li>";}
	print "\n</ul>\n</div>";

}

変更した「temp.cgi」をサーバーにアップし、Yomi-Searchの管理室で全てのカテゴリーのHTMLログを更新します。

更新後のカテゴリーページをパソコンで見るとこのように、

スマートフォンだと、

で、該当部分のHTMLソースが以下のようになっていればここまでのカスタマイズは成功です。

<div id="kt">
<ul>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_01.html">総合</a><i>(0)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_02.html">Yomi-Search系</a><i>(2)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_03.html">エンターテイメント</a><i>(1)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_04.html">音楽</a><i>(0)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_05.html">ゲーム</a><i>(0)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_06.html">ショッピング</a><i>(0)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_07.html">辞書・地図</a><i>(0)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_08.html">地域情報</a><i>(1)</i></li>
<li> ■<a href="http://yomi-search.joo-hoo.com/ys-demo2/link/02_09.html">その他</a><i>(0)</i></li>
</ul>
</div><!-- ページ中段の検索フォーム -->

次回は、外部スタイルシートで見栄えを調整します。