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

SSLで読む場合 https://wp908.com/にアクセス

この記事を読むのに必要な時間は約 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にお任せください。

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

この記事が気に入ったらいいね!
お願いします!

The following two tabs change content below.
神戸市にて事務所を構えSNSを活用したWordPressの活用法をメインにリスト化を初心者の方でもできるパッケージの開発等を手がける。 オーナーくまはちは、パソコン歴31年ホームページ制作歴21年。 お問い合わせは、FacebookメッセージからでもOKですよ。

最新記事 by くまはちLAB (全て見る)