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

この記事を読むのに必要な時間は約 3 分です。

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

カスタマイズ

PR Block 上記をサンプルにカスタマイズしてみようと思います。 上記は、まだ初期設定のままです。ここからまず色を変更してマウスをのせるとまた色を変えるようにしてみます。 PR Block色の変更 淡い青から紺色に変更してみました。 また、マウスがのると色を変更します。 PR Blockマウスオーバー 上記は、左端のデスクトップのアイコンにマウスがポイントされた状態です。 では、どこをどう設定するのでしょうか? スタイルシートを追記して設定します。 [wc_row] [wc_column size=”one-half” position=”first”] PR Block スタイルシート [/wc_column] [wc_column size=”one-half” position=”last”] 外観→カスタマイズ→追加CSSで開きます。 左記のところの末尾にCSSを追記します。 [/wc_column] [/wc_row]
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にお任せください。

サービス 制作事例
お問い合わせ
]]>

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