【ルクセリタス】サイドバーのタイトルのみを編集：CSSクラス

今回は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クラス」でした。