【Luxeritas】ウィジェットのカテゴリー欄に罫線を追加する方法

2019年5月13日

※(2019/4/18)
記事を修正いたしました。
以前の記事ではクラス名を決め打ちしていましたが、コードの拡張性を考えた場合、以下修正記事の内容がスマートと判断致しました。ご迷惑をお掛けして大変申し訳ありません。

こんにちは。行未です。
当サイトのテーマはLuxeritasですが、相変わらず使いやすくて便利でございます。

さて、今回はウィジェットのカテゴリに罫線を追加する方法です。

そもそも何故この記事を書くに至ったかというと、
Luxeritasのウィジェットの、「更新された記事」等はデフォルトで罫線が入っているんですね。

ですが、カテゴリー欄については罫線が入っていません。
同様に罫線が入っていない例としては、アーカイブ等もありますね。

それで、どうせなら罫線を入れたいと思い立ったわけです。

完成形は以下の形です。それぞれ大見出しの下に罫線を入れます。

カテゴリー欄の罫線追加ビフォーアフター

そもそもカテゴリー欄を追加するには

前段階として、Luxeritasでカテゴリー欄を追加する方法について説明します。

WordPressのダッシュボード画面にて、「外観」→「カスタマイズ」→「ウィジェット」→サイドバータイプを選択→「ウィジェットを追加」をクリックし、カテゴリーをクリックすれば追加されます。

カスタマイズ画面カテゴリキャプチャ画面

もしくは、WordPressのダッシュボード画面の「外観」→「ウィジェット」からでも同様に設定が行えます。

罫線の追加

今回の追記に当たり、子セレクタを用います。

子テーマのスタイルシートに以下のように追記します。

基本的にコピペでOKです。

#side .widget_categories > ul > li:not(:last-child) {
 border-bottom:dotted 1px #ccc;
}

カテゴリはリスト形式で記述されています。
したがって、「li:not(:last-child)」と記述することにより、最後のリスト要素のみ除外対象とします。