WordPressのLightningで3PRの画像を大きくする方法

WordPressのLightningで3PRの画像を大きくする方法をご紹介します。

条件

  • WordPress
  • テーマ:Lightning
  • プラグイン:VK All in One Expansion Unit

Lightningの3PR

Lightning用の無料プラグインである「VK All in One Expansion Unit」を用いると、ウィジェットで任意の場所に「VR PR Blocks」という、3つのPR用ブロックを追加することが出来ます。

以下の画像は、トップページを1カラムにして、トップページコンテンツエリアに「VR PR Blocks」を設定した状態です。

VR PR Blocksの画像拡大

「VR PR Blocks」はアイコンの他に、任意の画像を設定することが出来ます。

しかし、PRというには画像サイズが小さくていまいちな感じです。

そこで、cssを個別に設定して画像サイズを大きくします。

cssの設定

WordPressで個別cssを設定する場合、”子テーマに対してstyle.cssを編集する”などの方法がとられることが多いです。

しかし、「VK All in One Expansion Unit」を用いれば、子テーマを用いることなく個別cssを設定することが出来ます。

管理画面の左メニュー > ExUnit > CSSカスタマイズ を選択します。

VK All in one Expansion Unit CSSカスタマイズ画面が開くので、入力欄にcssを入力してcssを保存するボタンを押します。

今回は以下のようなcssを入力します。

.prBlock .prBlock_image {
    width:100% !important;
    max-width:400px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    height:auto !important;
    border-radius:100% !important;
    margin-bottom:20px;
}

.prBlock .prBlock_image img {
    width:100% !important;
    max-width:400px !important;
    height:auto !important;
}

ちなみに、cssで指定する画像のクラスは、Chromeで画面を右リック > 検証 を選択すれば確認することが出来ます。

変更前

画像が小さくてインパクトに欠けます。

変更後

画像が大きくなって、迫力があります。

画像サイズの調整

画像サイズは、cssの以下の値を変更することで調整することが出来ます。

.prBlock .prBlock_image {
    ・・
    max-width:400px !important;
    ・・
}

以下の画像は、「max-width:200px」として結果です。
このくらいが丁度いいかもしれません。

参考

Lightning

Lightningトップページ

ExUnit:CSSカスタマイズ

CSSカスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です