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

WordPress

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

2020年5月9日WordPressLuxeritas,WEB,WP

Posted by KT