PRコンテンツブロックの設定方法 タイトル画像

こんにちは、今回の第44回のウェブ講座では、
WordPressのテーマLightningのVKブロック(VK Blocks)の一つである「PR Content(コンテンツ)ブロック」の設定方法について解説していきたいと思います。

「PRコンテンツブロック」は、画像とテキストの組み合わせブロックです。

前回の第43回ウェブ講座で、WordPress標準のブロックである「メディアとテキストブロック」について解説しましたが、「メディアとテキストブロック」も画像とテキストの組み合わせブロックでした。

今回の「PRコンテンツブロック」は、「メディアとテキストブロック」をベースにアレンジした発展形のブロックと考えても良いかも知れません。

各々の特徴としては

「メディアとテキストブロック」のテキスト部分は、自分で見出しブロックなどのブロックを挿入しなければいけませんでしたが、それだけいろいろとブロックを複数追加できるという融通性が高いブロックでした。ボタンブロックも追加できます。

一方、「PRコンテンツブロック」は、あらかじめブロックに見出し・テキスト、そしてボタン(ボタンは非表示でもオッケー)がセットになっているので、初心者の方にとっては、形に添ってテキスト等を入力していけばいいので簡単かもしれません。ただし、見出し・テキスト・ボタン以外の表示を、ブロックを追加するなどして表示させるという融通性はありません

ご自身にとって使いやすい方でページ作りをすると良いと思います。

それでは、「PRコンテンツブロック」使って
下図のようなブロック作る過程を、
キャプチャ画像(スクリーンショット)を交えながら解説していきたいと思います。

PRコンテンツブロックの使用例

キャプチャ画像を撮った作例はこちらのデモサイトでご覧いただけます。
https://d-elephant.com/demo_7th/archives/386

PRコンテンツブロックをページに追加挿入します

固定ページ、投稿ページ、どちらにも「PRコンテンツブロック」を使うことができます。

では、ページで「PRコンテンツブロック」を追加するところから始めていきたいと思います。

ブロックの追加方法は、
①または②の[■+]ボタンをクリックするか、
③の[ブロックを選択するには「/」を入力]のスペースに「/」を入れて追加するか、のどちらかです。

今回は③に「/pr」と入力して「PRコンテンツブロック」を追加してみます。

ページ編集画面でブロックを挿入するキャプチャ画像

③に「/pr」と入力するとウィンドウが開き
候補のブロックとして上から2番目に
「PR Contentブロック」表示されますので、
①の[PR Content]をクリックします。
(ちなみに一番上の「PR Blocks」第31回解説済みです)

PRコンテンツブロックの挿入方法1

「PRコンテンツブロック」が挿入されました
ブロックパネルが「PRコンテンツブロック」のカスタマイズパネルとなります。

PRコンテンツブロックがページに挿入されたキャプチャ画像

ちなみに、
①の[■+]をクリックした場合は、
ページ左にブロック一覧ウィンドウが開きますので、
下へスクロールしていきます。
「VKBLOCKS」が現れてVKブロックのアイコンが並んでいますので、
②の[PR Content]をクリックします。
すると、「PRコンテンツブロック」が挿入されます。

PRコンテンツブロックの挿入方法2

ブロックへ画像(写真)を入れます

PRコンテンツブロックの左側にある
[画像を選択]をクリックします。

「画像を選択」ボタンをクリックするキャプチャ画像

するとメディアライブラリが開きます。

今回はメディアライブラリへアップロード済みの写真を使いますので、
配置したい画像をクリックして選択します。
②代替テキスト欄へ代替テキストを入力します。
[選択]ボタンをクリックします。
(PCからアップロードに変更したい場合は、④[ファイルをアップロード]をクリックします。)

メディアライブラリのキャプチャ画像

選択した写真画像が配置されました。

PRコンテンツブロックへ画像が挿入されたキャプチャ画像

タイトル(見出し)を入力します

次にブロック右側のテキスト入力部分に入力をしていきたいと思います。

まずは「タイトルを入力してください。」の欄へ
タイトル(見出し)を入力します。

PRコンテンツブロックへタイトルを入力するキャプチャ画像

ここでは「当日の自家焙煎で」と入力してみました。

PRコンテンツブロックのタイトル欄は見出しブロックではないので、右寄せ・中央寄せ・左寄せなどの従来の見出しブロックでできる操作でもできないものもありのす。

本文テキストを入力します

タイトル入力欄の下の
「本文を入力してください。」の欄へ
本文テキストを入力します。

PRコンテンツブロックへ本文を入力するキャプチャ画像

本文テキストを入力してみました。

PRコンテンツブロックの本文入力欄も従来の段落ブロックではないので、右寄せ・中央寄せ・左寄せなどの従来の段落ブロックでできる操作でもできないものもありのす。

リンクボタンを付けることもできます

リンクボタンを付けることができるからと言って、
必ずしもリンクボタンを付けなくてはいけないという訳ではありません。

必要に応じてリンクボタンを付けてください

では、リンクボタンを付ける説明をしていきたいと思います。

ページ編集画面の右側のブロックパネルをご覧ください。
「色設定」の下に
「ボタン設定」があります。
この「ボタン設定」をクリックするとボタン設定の項目が現れます。

ブロックパネルの「ボタン設定」を開く

ボタン設定の項目が現れました。


一番上の①「ボタンの文字」に文字を入れると、
自動的に先ほど入力した本文の下に②リンクボタンが挿入されます。

ポンタの文字を入れるとボタンが表示される

次に、
リンクURLを入力し、
②リンクを別ウィンドウで開くか指定し、
③ボタンタイプを[直線]か[ゴーストボタン]か選びます
[直線]は色付き
[ゴーストボタン]は色なしです。
デフォルトは[直線]で色が付いています。
ここでは[ゴーストボタン]を選んでみました

ボタンタイプでゴーストを選択

ボタンの色は
①の「標準色」で選択してもいいですし、
②の「ボタンカラー」で選択してもいいです。
今回は「ボタンカラー」で③の[キーカラー(明)]を選択してみました
(※キーカラーについては第10回ウェブ講座「色設定(キーカラー等)を設定する方法」で解説しています)

ボタンの色の選択方法

リンクボタンにアイコンを付けることもできます

PRコンテンツブロックのリンクボタンには
デフォルトで人型のアイコンが文字の前後の両方に付いています。
アイコンはFontAwesome(フォントオーサム)のアイコンです。

デフォルトで付いている人型のアイコンを任意のアイコンに変更できます。
アイコンが必要ない場合は削除してもかまいません。

リンクボタンのデフォルトアイコン

今回は文字の前のアイコンは必要ないので、
削除
して無くしたいと思います。

①の「文字の前」の欄にあったアイコンのタグを削除すると
(薄くタグが見えますがここにこういうタグが入るというガイドです)
②にあった人型アイコンが無くなりました。

アイコンを削除

次に、「文字の後」のアイコンを
ショッピングカートのアイコンに変更したいと思います。

①の[アイコンを選択]ボタンをクリックします。
すると、アイコン選択のウィンドウが開きます。
②のアイコン一覧にショッピングカートのアイコンがないので
③の[Font _Awesome アイコンリスト]ボタンをクリックします。

フォントオーサムでアイコンを探して選ぶ

すると「Font Awesome」のウェブサイトが開きますので、
使いたいアイコンを探してタグをコピペします。

この「Font Awesome」ウェブサイトでの一連の作業の進め方については
第27回ウェブ講座の中の「使いたいアイコンをFont Awesomeで探して使う場合」で解説していますのでご参照ください。

「Font Awesome」ウェブサイトでコピーしたアイコンのタグを
①の「文字の後」の欄にペーストします。
すると②ボタンの文字の後にショッピングカートのアイコンが表示されました。

ショッピングカートのアイコンを表示させる

レイアウト変更(画像位置を左右から選べる)もできます

PRコンテンツブロックはデフォルトでは、
画像位置が左ですが、
①「レイアウト設定」
[左][右]を選んで変更できます。

試しに[右]を選んでみました。
写真画像が右に、テキストが左の配置になりました。

画像レイアウトの左右を変更

色設定で、見出し、本文、画像の線の色を変更できます

ページ編集画面右側のブロックパネルの一番上に
①「色設定」があります。
この「色設定」をクリックすると
見出し、本文、画像の線の色を変更するカラーパレットが開きます。

見出しの色、本文の色、画像の線の色の変更方法

・見出しの色
・本文の色
・画像の線の色
3つのカラーパレットが開きますので、
色を変更したい場合は、
変更したい色をクリックして選びます。

今回のウェブ講座のまとめ

以上がPRコンテンツブロックの設定方法の解説となります。

PRコンテンツブロックはある程度形がカチッと決まっていますので、
画像とテキストの組み合わせブロックでもっと自由度が高いブロックを使いたいという方は、
前回のウェブ講座で解説しましたWordPress標準の「メディアとテキストブロック」を利用されるのが良いと思います。

PRコンテンツブロックは形がカチッと決まっている分、
画像を入れて見出しとテキストを挿入すればいいだけですので初心者の方にはとっつきやすいと思います。

それぞれ利点がありますので、ご自分のニーズに合わせてどちらを使うかを決めると良いでしょう。

次回のウェブ講座では、今回の「PRコンテンツブロック」と似ている「スタッフブロック」というブロックをご紹介予定です。
「スタッフブロック」も画像とテキストの組み合わせブロックですし、必ずしもスタッフ紹介に限った使い方に限定されず、アレンジしだいでいろいろと使い道があるブロックとなっていますので、そちらも併せて、画像とテキストの組み合わせブロックはどれを使うか決めるといいかも知れません。

それでは、次回の第44回ウェブ講座でまたお会いいたしましょう~^^