ルクセリタスの「記事下よりさらに下ウィジェット」を編集する方法

今回はWordPressの人気無料テーマのLuxeritas（ルクセリタス）の「記事下よりさらに下ウィジェット」を編集する方法（CSSクラス）を紹介します。今回は関連記事と合わせる様なデザインにカスタムしていきます。

ルクセリタスとは？

ルクセリタスは「るな」さんという方が制作しているWordPressの無料テーマです。SEO対策関連が非常に強く、PWAに対応、AMP対応。カスタムのし易さ、完全レスポンシブ対応。そしてスピードが超速い。とにかく扱いやすく高機能で個人的に最もおすすめなテーマです。しかも「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用が可能です。

Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです。
詳しくはルクセリタス公式ページより。

記事下よりさらに下ウィジェットのCSSクラス

「記事下よりさらに下ウィジェット」のCSSクラスは「.posts-under-2」です。
divのCSSクラス（id）は「div[id^=”thk_recent_posts-2″].widget.posts-under-2.thk_recent_posts」です。
テキストのCSSクラスは「p.posts-under-2」です。

記事下よりさらに下ウィジェット	.posts-under-2
div内	div[id^=”thk_recent_posts-2″].widget.posts-under-2.thk_recent_posts
テキスト	p.posts-under-2

記事下よりさらに下ウィジェットの見た目を変更

続いては、先ほどのCSSとidに対してスタイルを記述して「記事下よりさらに下ウィジェット」の見た目を変更します。

デフォルトだと下記の様に見出し部分となる「新着記事」の文字が小さくて少しメリハリが無い印象なので、このテキストを大きくして、ついでに「関連記事」が近いので同じアイコンを付けてあげます。（関連記事と合わせる様に）

下記のCSSをコピペして下さい。関連記事のセクションと同じ様な見た目になります。

/* 記事下よりさらに下 */
p.posts-under-2 {
 font-size: 2.4rem;
 line-height: 2;
 margin: 0 0 5px;
}
p.posts-under-2:before {
 font-family: "Font Awesome 5 Free";
 content: "\f00b";
 font-weight: 900;
 margin-right: 7px;
 padding: 1px 0;
}
.posts-under-2 {
padding-bottom: 0px;
}
div[id^="thk_recent_posts-2"].widget.posts-under-2.thk_recent_posts {
padding-bottom: 30px;
}

3行目からの記述はテキストの大きさと位置調整。9行目からの記述は関連記事と同じアイコンフォントを設置。17行目は全体の下空白を調整。21行目はdivの下空白のみ調整。

実際の見た目は下記の様になります。（解説付き）