Lightningの見出しは前後にアイコンを表示できるのタイトル画像

こんにちは、今回の第28回のウェブ講座では、
WordPressのテーマLightningのVKブロック(VK Blocks)の見出しブロックを使って、見出しの前後にアイコンを表示させる方法を解説していきたいと思います。

見出しブロックはWordPressにもあるのですが、それとは別に、LightningのVKブロック(VK Blocks)の一つとしても見出しブロックがあり、VKブロックの方の見出しブロックを使うと、見出しの前後に簡単にアイコンを表示させることができます。(表示されるアイコンはFont Awesomeのアイコンです)

また、VKブロックの見出しブロックは、サブテキストも表示させることもできます。
その見出しにサブテキストを表示させる方法についても併せて解説していきたいと思います。

以下のような見出しを作る過程を、キャプチャ画像(スクリーンショット)を交えながら解説していきたいと思います。

見出しにアイコンとサブテキストを表示させたキャプチャ画像

実際に作った例はこちらのデモサイトでご覧いただけます。
https://d-elephant.com/demo_7th/archives/182

VKブロックの見出しブロックをページに追加します

固定ページ、投稿ページ、どちらでもVKブロックの見出しブロックを使うことができます。
見出しブロックの使い方(装飾や編集方法など)も同じです。

では、ページで[見出しブロック]を追加するところから始めていきます。

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

ページに見出しブロックを追加する方法のキャプチャ画像

今回は③に「/見出し」と入力して[見出しブロック]を追加してみようと思います。

「/見出し」と入力すると、
候補の一番上にWordPressの[見出しブロック]が表示され、
その下にLightningのVKブロックの[見出しブロック]が表示されました。
VKブロックの方の[見出しブロック]をクリックします。

ページにVKブロックの見出しブロックを追加するキャプチャ画像

VKブロックの[見出しブロック]がページに追加されました。
ツールバーののところがVKブロックの見出しになっていることも確認します。

VKブロックの見出しブロックが追加されたキャプチャ画像

「お問い合わせはこちらから」と見出しに入力してみました。

見出しブロックに「お問い合わせはこちらから」と入力したキャプチャ画像

編集画面右側にブロックパネルがあります。
見出しスタイルで[装飾なし]を選択してみました。

VKブロックの見出しブロックでスタイル(装飾)を選ぶキャプチャ画像

WordPressの見出しブロックはスタイルが豊富

ちなみにWordPressの見出しブロックは、スタイル(装飾)が10種類あります。
見出しにアイコンを表示させない、サブテキストもいらない、という場合は、WordPressの見出しブロックを使用するといいです。
なお、WordPressの見出しブロックについしては、第20回のウェブ講座でご紹介しております。

見出しの前にアイコンを表示させます

ページの編集画面右側のブロックパネルに見出しのアイコン設定があります。
ここでアイコンを選択したり、アイコンに色を付けたりできます。
アイコンは見出しの前後に表示できます。前後の両方に表示も可能です。

ブロックパネルのアイコン設定のキャプチャ画像

ここでは、見出しの前にアイコンを表示させたいので、
[文字の前]①[アイコンを選択]をクリックします。
するとアイコン選択のウィンドウが開きますので表示させたいアイコンをクリックして選択します。
ここでは②のアイコンを選択してみました。

見出しに表示させたいアイコンを選択するキャプチャ画像

もし、このウィンドウ内に表示させたいアイコンがない場合は、③の[Font Awesome アイコンリスト]をクリックするとFont Awesomeのウェブサイトが立ち上がりますので、表示させたいアイコンのHTMLコードをコビーしてきます。

この方法については、前回の第27回ウェブ講座の中の「使いたいアイコンをFont Awesomeで探して使う場合」で解説しています。


選択したアイコンが見出しの前に表示されました。

見出しの前にアイコンが表示されたキャプチャ画像

アイコンの色を変更したい場合は、
ページ画面右側のブロックパネルで「アイコン選択」の下に「アイコンの色」がありますので、そこで変更したい色を選択します。

ここでは、キーカラーを選択しました。
※キーカラーはWordPressのカスタマイズの色で設定したキーカラーの色ですので各々違います。

VKブロックの見出しブロックでアイコンの色を変更するキャプチャ画像

アイコンの色が選択したキーカラーに変更されました。

見出しのアイコンの色が変更されたキャプチャ画像

見出しの下にサブテキストを表示させます

ページの編集画面右側のブロックパネルに「サブテキスト設定」があります。
デフォルトでは[非表示]になっていますので、
①[表示]をクリックします。

すると②見出しの下に[サブテキストを入力]と表示されます
ここにサブテキストを入力します。

VKブロックの見出しブロックにサブテキスト表示させる設定方法のキャプチャ画像

「contact us」と入力してみました。

サブテキストにcontact usと入力したキャプチャ画像

サブテキストも色の変更ができます
①[キーカラー(暗)]を選択してみました。
②サブテキストに[キーカラー(暗)]が適用されました。

見出しのサブテキストの色を変更するキャプチャ画像

サブテキストは2行以上にもできます

見出しのサブテキストは1行と決まっているわけではありません。
2行以上での入力も可能です。
文章のテキストを改行するときと同じ改行で2行以上にできます。
試しにサブテキストを2行にしてみました。

VKブロックの見出しのサブテキストを2行にしたキャプチャ画像

ちなみに、このパターンでのアイコン表示は、見出しブロックの上にアイコンブロックを配置してアイコンを表示させています。
このやり方を知りたい方は、前回の第27回ウェブ講座「Lightningのアイコンブロックの使い方」をご参照ください。


以上で、第28回のウェブ講座、
「Lightningで見出しの前後にアイコンを入れる方法」は終了です。

大変お疲れ様でした。

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