今回はWordPressの人気無料テーマのLuxeritas（ルクセリタス）のサイドバーのタイトルのスタイルをカスタムする方法を紹介します。（CSSクラスとスタイルの記述）
ルクセリタスとは？
ルクセリタスは「るな」さんという方が制作しているWordPressの無料テーマです。SEO対策関連が非常に強く、PWAに対応、AMP対応。カスタムのし易さ、完全レスポンシブ対応。そしてスピードが超速い。とにかく扱いやすく高機能で個人的に最もおすすめなテーマです。しかも「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用が可能です。
Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです。
詳しくはルクセリタス公式ページより。
サイドバータイトルのCSSクラス（id名）
サイドバーのCSSクラスは無く、idで分類されています。そのid名は「#side」です。
サイドバータイトルのCSSクラスは「h3」「h4」でした。
そのためサイドバーのタイトルのみを変えたい場合は「side h3, #side h4」で可能です。
| サイドバーのid | #side |
| サイドバータイトルのCSSクラス | side h3, #side h4 |
例えば、サイドバーのタイトル部分の色を変えたい場合は、下記の様な記述になります。
/*サイドバー*/
#side h3, #side h4 {
color: red;
}
サイドバータイトルのみデザインを変える
サイドバータイトルのみデザインを変えるには、テーマのスタイルシートに上記のクラスとid部分に対してCSSを記述していきます。
例えば下記の様な上下にボーダーを付けたい場合は次の様な記述になります。
#side h3, #side h4 {
color: #364e96;
padding: 0.5em 0;
border-top: solid 3px #364e96;
border-bottom: solid 3px #364e96;
}下記の様に、関連記事の左にあるアイコンと同じ様にしたい場合はFont Awesomeのアイコンを呼び出します。
/*サイドバー*/
#side h3{
position: relative;/*相対位置*/
line-height: 1.4;/*行高*/
padding: 0px 0px 0px 30px; /*アイコン分のスペース*/
}
#side h3:before {
font-family: "Font Awesome 5 Free";
content: "\f00b";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #111; /*アイコン色*/
}以上が「【ルクセリタス】サイドバーのタイトルのみを編集：CSSクラス」でした。
