記事内に広告が含まれています。

子カテゴリーの前に擬似要素で記号をつける

HTMLとスタイルシート ウェブサイト・ブログ作成
HTMLとスタイルシート
ウェブサイト・ブログ作成
この記事は約2分で読めます。

 子カテゴリーにリストマークらしきものをつける。

 リストマークは種類が少ないのでスタイルシートの擬似要素の:beforeというものを使ってリストマークの代用にする。

 文字でも、画像でも、音声でもリストマークの変わりに利用することができる。

 ちなみに、擬似要素の:afterを使うと、後ろに記号をつけたりもできる。

広告

子カテゴリーに擬似要素:beforeで記号をつける

1.【外観】⇒【テーマの編集】⇒【スタイルシート (style.css)】をクリックしてスタイルシートを開く。

2.スタイルシートに以下の記述を追加。

ul.children li :before {
  content: "⇒";
}

 デフォルトのwordpressテーマの場合これでもいい。

 が、ウィジェットを使っていない場合、親カテゴリーまで記号がついてしまうケースがでてくる。

ウィジェットを使わない場合カテゴリー一覧のコードを書き換える

1.カテゴリー一覧のコードを書き換える。

<!--カテゴリー一覧-->
<h4 class="menu_underh2">カテゴリー一覧</h4>
<ul>
<li class= "children"><?phpwp_list_categories('title_li=&show_count=1' ); ?></li>
</ul>
<!--/カテゴリー一覧-->

 メインは赤い字の部分。

 <!--カテゴリー一覧--><!--/カテゴリー一覧-->はただのコメント、ブログには表示されない。

 <h4 class="menu_underh2">カテゴリー一覧</h4>はいま使っているwordpressのテーマのスタイルと見出しレベルなので、テーマによって変わる。

 これで、親カテゴリーに記号が付かなくなる。

 ただし、テーマによってはうまくいかない場合もあるかも。

コメント

タイトルとURLをコピーしました