Lightning PR Blockの色だけを変更する

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 3 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

PR Block
PR Blockとは、Lightningのテーマインストール後に表示される上記画像の部分です。
ただ、Lightningのデザイン設定で指定したカラーが適用されるので思い通りに色を変更できないという方も多いかもしれません。
変更するには、スタイルシートの知識が必要になります。
PR Blockの通常の設定方法は、下記より
→ Lightningカスタマイズ
 

カスタマイズ

PR Block
上記をサンプルにカスタマイズしてみようと思います。
上記は、まだ初期設定のままです。ここからまず色を変更してマウスをのせるとまた色を変えるようにしてみます。
PR Block色の変更
淡い青から紺色に変更してみました。
また、マウスがのると色を変更します。
PR Blockマウスオーバー
上記は、左端のデスクトップのアイコンにマウスがポイントされた状態です。
では、どこをどう設定するのでしょうか?
スタイルシートを追記して設定します。

PR Block スタイルシート
外観→カスタマイズ→追加CSSで開きます。
左記のところの末尾にCSSを追記します。
CSSソース
/* PR Blockのアイコンの色 */
.prBlock_icon {
color: #191970 !important;
}
.prBlock_icon_outer {
border: 1px solid #191970 !important;
background-color: transparent !important;
}
/* PR Blockマウスオーバー時に色を変える */
.prBlock_icon_outer:hover {
border: solid 1px #0000ff !important;
background-color: transparent !important;
}.prBlock_icon_outer:hover .prBlock_icon {
color: #0000ff !important;
}

上記のスタイルシートを追加CSSに追記してください。
また、赤字にしている部分は色コードなのでサイトに合う色に変更してください。
これで完了です。
ZOOM



 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!