Lightning PR Blockに画像を入れて4つ並べる

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

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

PR Block画像4列
前回は、アイコンフォントで色を変えるという設定を掲載しましたが、今回はアイコンフォントではなく、画像を入れて3列を4列にするという方法について解説します。
3列表示する方が多い中、4列表示してみるのも面白いかもしれません。
 

PR Blockに画像を入れる

PR Block
通常なら上記のようにアイコンフォントで表示される部分なのですが・・・
 
アイコンフォント設定
外観 → カスタマイズ → Lightning Font Awesomeで設定する場合は、画像を入れるところないですね。どうやって入れるのでしょうか?
どこからかそんなんできるん?
って聞こえてきそうですが・・・
表示
こちらは、①のところでチェックを外しておきます。

PR Blockウィジェット
カスタマイズの中にあるPR Blockではなくウィジェットの中にあるPR Blockを使います。
タイトルをクリックすると下にどこに入れるのか聞いてきますので今回は、トップページコンテンツエリアを選択してください。
PR Blockを4列に
トップページコンテンツエリアが開いてると思うので設定をしていきます。
4列に変更する場合に3列→4列に変更して先に保存をしてから画像もしくはアイコンフォントの挿入をするようにしてください。
サンプルでは、4列を1段でやっていますが2段にしても面白いかもしれません。
Blockで最初に設定するのはタイトル部分です。
このタイトルは、必須になっているようです。
また、リンクを入れる場合はリンク先に設定とリンクの開き方を設定します。
タイトルの下に説明文など入れたい場合などは、概要となるテキストに入れておきますが、今回は端折ります。
カスタマイズの時と同じくアイコンフォントを使うことを前提として考えているようですが、下に画像を選択できるところがありますね。
クリックするとメディアが開くので画像挿入に関しては記事の作成時と同じです。
ただ、このウィジェットについては画像だけの表示ができません。
タイトルを入力してはじめて表示します。
また、画像を入れた場合は、アイコンフォントより優先して表示します。
ここまでがBlock1つの工程なのであと3回繰り返してください。
最後に「保存」ボタンをクリックすると表示されているはずです。
確認してみてください。
PR Blockウィジェット

どうでしょう?
ちゃんと表示できましたでしょうか?
今回は、Lightningでと書いていますが、機能は必須プラグインのVK All in One Expansion Unitの機能を利用しています。
ということは、テーマによっては使えるテーマもあるということです。
MH Magazine Liteでは使えるということを確認しました。



 

チャンネル登録

 

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

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

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