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

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

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

PR Blockに画像を入れる

PR Block 通常なら上記のようにアイコンフォントで表示される部分なのですが・・・   アイコンフォント設定 外観 → カスタマイズ → Lightning Font Awesomeで設定する場合は、画像を入れるところないですね。どうやって入れるのでしょうか? どこからかそんなんできるん? って聞こえてきそうですが・・・ 表示 こちらは、①のところでチェックを外しておきます。 [wc_row] [wc_column size=”one-half” position=”first”] PR Blockウィジェット [/wc_column] [wc_column size=”one-half” position=”last”] カスタマイズの中にあるPR Blockではなくウィジェットの中にあるPR Blockを使います。 タイトルをクリックすると下にどこに入れるのか聞いてきますので今回は、トップページコンテンツエリアを選択してください。 [/wc_column] [/wc_row] [wc_row] [wc_column size=”one-half” position=”first”] PR Blockを4列に [/wc_column] [wc_column size=”one-half” position=”last”] トップページコンテンツエリアが開いてると思うので設定をしていきます。 4列に変更する場合に3列→4列に変更して先に保存をしてから画像もしくはアイコンフォントの挿入をするようにしてください。 サンプルでは、4列を1段でやっていますが2段にしても面白いかもしれません。 Blockで最初に設定するのはタイトル部分です。 このタイトルは、必須になっているようです。 また、リンクを入れる場合はリンク先に設定とリンクの開き方を設定します。 タイトルの下に説明文など入れたい場合などは、概要となるテキストに入れておきますが、今回は端折ります。 [/wc_column] [/wc_row] [wc_row] [wc_column size=”one-half” position=”first”] カスタマイズの時と同じくアイコンフォントを使うことを前提として考えているようですが、下に画像を選択できるところがありますね。 クリックするとメディアが開くので画像挿入に関しては記事の作成時と同じです。 ただ、このウィジェットについては画像だけの表示ができません。 タイトルを入力してはじめて表示します。 また、画像を入れた場合は、アイコンフォントより優先して表示します。 ここまでがBlock1つの工程なのであと3回繰り返してください。 最後に「保存」ボタンをクリックすると表示されているはずです。 確認してみてください。 [/wc_column] [wc_column size=”one-half” position=”last”] PR Blockウィジェット [/wc_column] [/wc_row] どうでしょう? ちゃんと表示できましたでしょうか? 今回は、Lightningでと書いていますが、機能は必須プラグインのVK All in One Expansion Unitの機能を利用しています。 ということは、テーマによっては使えるテーマもあるということです。 MH Magazine Liteでは使えるということを確認しました。

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

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

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