今回は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の下空白のみ調整。
実際の見た目は下記の様になります。（解説付き）
以上が「ルクセリタスの「記事下よりさらに下ウィジェット」を編集する方法」でした。
地味にきになる部分かと思ったので今回記事にさせていただきました。少しでも参考になったら幸いです。
