スマートフォンでのカテゴリー一覧のをリンクボタン化してタップしやすくしよう。
STINGER3のカテゴリー一覧は行間が狭すぎる。
指でタップでできないよ。
行間を広くしてもいいけどついでだからリンクボタンにしてみようと思う。
smart.cssではなく、スタイルシートのほうを同じようにカスタマイズするとPC表示でもカテゴリーがリンクボタン化できるはず。
スマートフォン表示STINGER3サイドバーのリンクボタン化
1、smart.cssの中からsideを探す。
2、/*-------------------------------
side
--------------------------------*/
の下に、以下の記述を追加する。
#side ul li a {
color: #000;
text-decoration: none;
background-color: #f3f3f3;
padding: 20px;
margin-top: 10px;
display: block;
}
#side ul li a:hover {
color: #FFF;
text-decoration: none;
background-color: #FFC4C4;
padding: 25px;
color: #FFF;
display: block;
}
【続きを読む】とか【もっと】と同じ色彩になる。
数字とかカラーコードとかは自由に変えてみて。
子カテゴリーの左側を少し開ける
親カテゴリーも子カテゴリーも開始位置が同じになるので子カテゴリーの左を少し空けたい。
この場合、以下の記述を書き加える。
ul.children li a {
margin-left: 20px;
}
こちらも数字とかカラーコードとかは自由に変えてみてOK。
件数をリンクボタンの中に含める場合
カテゴリーに件数を表示している場合、このままだと件数がリンクボタンの中に入らない。
件数をリンクボタンの中に入れたい場合はfunction.phpの最後にある【?>】 の上にしたの記述を追加する。
add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
$output = preg_replace('/<\/a>\s*\((\d+)\)/',' ($1)</a>',$output);
return $output;
}
function.phpをいじるときはサーバーの簡易FTPで編集したほうが安心。
コメント