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

カスタマイズ用デモサイトの「サーチエンジン」カテゴリーの子カテゴリー表示部分をリスト表示に変更した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>

これに適用するCSSを外部スタイルシートに追加していきます。

まず<div></div>で囲ってあるブロック要素に幅とマージンを指定します。
そしてリストについてはスタイルを無しにして前の黒丸を消し、マージンとパディングを0とします。
最後にリスト項目で行間、カテゴリーの間隔をマージンで調整、「float」で左から順に並ぶようにして、文字サイズを指定します。

そのCSSが以下になります。

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

これを外部スタイルシート（style.css）に追加してサーバーにアップロードして、パソコン、スマートフォンそれぞれで表示してみます。

パソコンで表示。

スマートフォンで表示。

CSSの「float」が解除されていないので、本来カテゴリー表示部の下にあった横罫線が右に回り込んで表示されてしまいます。（赤丸部分）

これを修正するために、スタイルシートに次のように回り込み解除用のクラスを追加します。

.c-both{clear:both;}

そして今度は「template」フォルダー内の「kt.html」をテキストエディタで開いて、カテゴリー表示部分の下の横罫線（<hr>）にこのクラスを適用します。
120行あたりに「<!– ページ中段の検索フォーム –>」とあります。その直下にある「<hr>」に「class=”c-both”」を加えて、「<hr class=”c-both”>」にすればOKです。

「style.css」と「kt.html」をそれぞれアップし、管理室でHTMLを更新すれば、子カテゴリー表示部のカスタマイズは終了です。

パソコンでの表示。

スマートフォンでの表示。

次回は、カテゴリーページの下にある、その他のカテゴリー表示部分をカスタマイズします。