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

Programming

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました