Luxeritasの色設定できる箇所全部まとめ+設定にないリンク色変更方法

2019-05-10カスタマイズ

 

今回は、ルクセリタスのカスタマイザーなどから「色」設定できる箇所のまとめと、設定項目では変更できない箇所のリンク色を変更する方法についてです。

 

カスタマイザー等から設定できないリンク色の変更はCSS追記で可能です。

 

 

バージョンと初期デザインについて

 

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9

ダウンロードはこちら

 

 

色の変更には以下もご利用下さい。

 色別カラーコード

マカロンビビッドパステル和色セーフ色名 配色パターンサンプル

 

カスタマイザーから

 

 「外観」→「カスタマイズ」から設定する項目です。

 

6894_11

 

PAGE TOPボタン

 「細部の見た目」で設定

6894_01

6894_12
PageTopボタン 表示例

 

全体・ヘッダー・フッターの文字色・リンク色

 「文字色」で設定

6894_02

 

パンくずリンクの文字・背景・枠線

 「パンくずリンク」で設定

6894_03

 

ヘッダーナビ

6894_13

 「ヘッダーナビ(グローバルナビ)」で設定

6894_04

 

ヘッダーの上の帯状メニュー

6894_14

 「ヘッダーの上の帯状メニュー」で設定

6894_05

 

検索ボックス文字色・背景色・透過

6894_15

帯状メニュー内に表示できる検索ボックスの色設定です。「検索ボックス表示」にチェックしていれば有効。

 「ヘッダーの上の帯状メニュー」で設定

6894_06

 

目次の文字・背景・枠線・ボタン色

3296_16

 「目次」で設定
6894_07

外部リンクアイコン色

6894_16

 「外部リンク」で設定

「記事の外部リンクにアイコンを付ける」をチェックした場合に有効です。

6894_08

 

SNSシェアボタン

6894_17

6894_18

 「SNSシェアボタン(1)」で設定

記事上、記事下の個別に指定可能です。

6894_09

 

Luxeritasの管理画面から

6894_19

 

サイト内検索ハイライト

6894_20

サイト内検索で見つかった記事内の対象文字をハイライトする機能の背景色を設定。

 「検索」タブで設定

100色以上(数えてませんが・・)の色名から選択が可能です。

6894_10

 

吹き出しの色

 「定型文登録」から

6894_30

定型文利用時

6894_33

6894_34

 

ショートコード利用時

6894_32

 

6894_31

 

その他 CSS対応のリンク色変更

 

※初期値では、リンクホバーは大抵 文字は「」、画像枠は「」になっています。

  • デフォルトのコード #dc143c
  • デフォルトのコード #337ab7
CSSで対応できる箇所の、初期コードを記載しておきますので、カスタマイズしたいエリアの色を変更するCSSを追記する際にご利用下さい。

 

記事一覧の「記事を読む」リンク

6894_21
ホバー時
.read-more-link:hover {
color: #dc143c;
background: #f0f0f0;
text-decoration: none;
}

 

記事タイトル

6894_23

6894_22
ホバー時
.entry-title a:hover {
color: #dc143c;
}

 

ページネーション

6894_24

.pagination > li > a:hover {
color: #fff;
background: #dc143c;
}

 

Next/Prevナビゲーション

6894_25

#pnavi a:hover {
color: #dc143c;
}
#pnavi a:hover > img {
border-color: #337ab7;
}

 

関連記事タイトル

6894_26
ホバー時
#related h3 a:hover {
color: #0099ff;
}

 

コメント送信ボタン

6894_27
ホバー時
#comments [type="submit"]:hover {
background: #dc143c;
}

 

サムネイル枠線

6894_28

.term img:hover {
border-color: #0066cc;
}

 

パンくずリンクのホバー時の下線

6894_29

#breadcrumb a:hover {
text-decoration: underline;
}

下線を消したければ

#breadcrumb a:hover {
text-decoration: none;
}

 

 

ヘッダーナビ

文字・背景・ホバー等の色はカスタマイザーで設定出来ますので、テキスト装飾等を追加したい場合に使用

#gnavi li:hover > a, #gnavi li:hover > a > span, div.mobile-nav:hover, ul.mobile-nav li:hover {
color: #fff;
background: #0099ff;
}

 

帯状メニュー

文字・背景・ホバー等の色はカスタマイザーで設定出来ますので、テキスト装飾等を追加したい場合に使用

.band-menu li a:hover {
color: #0099ff;
}

 

以上です!

 

その他クラス名は以下も参考にして下さい。

 

その他のカスタマイズは以下もご覧ください。

 

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ