WordPress個別サポート

Lightningでおなじみ、アイコンが3つ並んだ「PR Block」のカスタマイズ例を紹介します。アイコンを変えたり説明文を変更するのは簡単ですが、アイコンの色を変更するとサイト全体に影響するので工夫が必要です。ここではアイコンの色だけを変えたりマウスオーバー時の動作などをカスタマイズする方法を説明します。

この記事はLightningバージョン6.2.0で検証しています。

マウスオーバー時に色を変える

LightningのPR Blockへのマウスオーバー時に色を変える

スポンサーリンク

LightningのPR Blockとは

LightningのPR Blockとはトップページに表示された宣伝用に使えるブロックで、丸い3つのアイコンが特徴的です。アイコンや説明文などは「外観」-「カスタマイズ」-「Lightning トップページ PR Block」メニューから設定できます。

LightningのPR Block

LightningのPR Block

VK All in One Expansion Unitプラグインをインストールすれば「外観」-「ウィジェット」メニューの「VK PR Block」から新たに追加できるようになります。

ウィジェットで追加したPR Block

ウィジェットで追加したPR Block(VK All in One Expansion Unitプラグイン)

以下、PR Blockのアイコンのカスタマイズ例を紹介します。

アイコンを変更する

「外観」-「カスタマイズ」-「LightningトップページPR Block」メニューを開きます。

ウィジェット版のPR Blockでも同じようなメニューになります。

表示するアイコンは「アイコン1」「アイコン2」「アイコン3」で指定します。

指定したコードのアイコンが表示される

指定したコードのアイコンが表示される

アイコンのコードは「Icon list」をクリックしてFont Awesomeのサイトから取得することができます。

Font Awesomeのサイトへ

Font Awesomeのサイトへ

開いたFont Awesomeのサイトから好きなアイコンをクリックします。

使いたいアイコンをクリック

使いたいアイコンをクリック

アイコンコード(例:fas fa-anchor)をコピーします。

アイコンのコードをコピー

アイコンのコードをコピー

ダッシュボードに戻って「アイコン」にペーストすると、アイコンが切り替わります。

選んだアイコンに切り替わる

選んだアイコンに切り替わる

「アイコン2」や「アイコン3」も「アイコン1」と同じように変更できます。

アイコンの色を変更する

アイコンの色は「Lightningデザイン設定」の「キーカラー」で変更できますが、このキーカラーを変えるとサイト全体のパーツ色にも影響します。

アイコンの色のみを変更したい場合は、次のようなCSSを子テーマのstyle.cssまたは「VK ExUnit」‐「CSSカスタマイズ」メニューなどに入力します。「darkred」(2箇所)が色の指定です。好きなカラーコードに変更してください。

/* PR Blockのアイコンの色 */
.prBlock_icon {
    color: darkred !important;
}
 
.prBlock_icon_outer {
    border: 1px solid darkred !important;
    background-color: transparent !important;
}

表示結果は次のようになります。

PR Blockのアイコンの色を変更する

PR Blockのアイコンの色を変更する

アイコンの枠線を消す

アイコンの枠線を消すには次のCSSを使います。

/* PR Blockの枠線を消す */
.prBlock_icon_outer {
    border: none !important;
}

表示結果は次のようになります。

アイコンの枠線を消す

アイコンの枠線を消す

アイコンマウスオーバー時に色を変える

アイコンにマウスオーバーしたときに色を変えるには次のCSSを使います。

/* PR Blockマウスオーバー時に色を変える */
.prBlock_icon_outer:hover {
    border: solid 1px darkred !important;
    background-color: transparent !important;
}
 
.prBlock_icon_outer:hover .prBlock_icon {
    color: darkred !important;
}

表示結果は次のようになります。

マウスオーバー時に色を変える

マウスオーバー時に色を変える

アイコンマウスオーバー時に薄くする

アイコンマウスオーバー時に薄くするには次のCSSを使います。

/* PR Blockマウスオーバー時に色を変える */
.prBlock_icon_outer:hover {
    opacity: 0.5;
}

表示結果は次のようになります。

アイコンマウスオーバー時に薄くする

アイコンマウスオーバー時に薄くする

うまくいかないときはWordPress個別サポートにご相談ください。

WordPress個別サポート
この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・ログインできない・サーバー移転 ... )
いろいろ質問できる対面サポートまたは作業代行を依頼できるメールサポートで対応します。ご都合に合わせて気軽にご相談ください。
現在までの対応件数:1806件
WordPress個別サポート
WordPress講座の問い合わせ先
wordpress講座受講予約

関連記事

スポンサーリンク