VKボタンブロックの使い方 タイトル画像

こんにちは、今回の第36回のウェブ講座では、
Lightningの「VKボタンブロック」の使い方(設定方法やカスタマイズ方法)について解説していきたいと思います。

前回の第35回ウェブ講座ではWordPress標準のボタンブロックの使い方について解説しました。
https://d-elephant.com/archives/2965

WordPressのテーマとしてLightningをインストールしている方は、WordPress標準の「ボタンブロック」と、Lightningの「VKボタンブロック」の両方を使うことができます。

ちなみに、
WordPressの「ボタンブロック」と
Lightningの「VKボタンブロック」との
機能的な違いはどこかというと、

WordPressの「ボタンブロック」で出来るけれど、
Lightningの「VKボタンブロック」で出来ないこととしては、
●ボタンの横並び配置・縦並び配置
●ボタンの角丸加工
があります。

Lightningの「VKボタンブロック」で出来るけれど、
WordPressの「ボタンブロック」で出来ないこととしては、
●サブテキスト挿入
●光るボタン(ボタンエフェクト)
●ボタン内のテキスト前後にアイコン挿入可能(FontAwesomeアイコン)
があります。

※Lightningでボタンの横並び配置はカラムを使って配置することは可能
 (このページの最後で解説しています)
※有料版Lightningには「横並びボタンブロック」がある

どちらのボタンブロックを使うかの使い分けとしては、
例えば、ボタンを角丸にして使いたい方はWordPress標準の「ボタンブロック」を使うといいですし、
ボタン内にサブテキストを表示させたりアイコンを表示させたい方はLightningの「VKボタンブロック」を使うといいです。

ページにブロック挿入するときには
間違わないように気を付けましょう。

①がLightningの「VKボタンブロック」(アイコンにVKが付いている方)
②がWordPress標準の「ボタンブロック」

ブロック一覧から探すときは、
Lightningの「VKボタンブロック」は、
VKBLOCKS
②2段目に「VKボタンブロック」のアイコンがあります。

ブロック一覧でVKボタンブロックはVKBLOCKSにあるキャプチャ画像

WordPress標準の「ボタンブロック」は、
デザイン
②最初に「ボタンブロック」のアイコンがあります。

ブロック一覧でWordPressボタンブロックはデザインにあるキャプチャ画像

では、ここからLightningの「VKボタンブロック」の使い方を
キャプチャ画像(スクリーンショット)を交えながら解説していきたいと思います。

VKボタンブロックをページに追加挿入します

固定ページ、投稿ページ、どちらでも「VKボタンブロック」を使うことができます。

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

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

今回は③に「/ボタン」と入力して「VKボタンブロック」を追加してみます。

ブロック追加挿入時のキャプチャ画像

③に「/ボタン」と入力するとウィンドウが開き
候補のブロックが表示されますので、
①のVKマークがある方の[ボタン]をクリックします。

WordPressのボタンブロックとLightningのVKボタンブロックが並んでいるキャプチャ画像

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

ページにVKボタンブロックが挿入されたキャプチャ画像

※挿入されるボタンのデフォルト色はキーカラーで表示されます。各々設定しているキーカラーで表示されますので、その人によってボタンの色は違うと思います。もちろん、カスタマイズでボタンの色は変更できます。

ボタンのテキストは太字やサイズ変更できます

ボタン内の文字入力は、段落ブロックでの文字入力と同じです。
ボタン内の「文字を入力」にカーソルを持って行って文字入力すればオッケーです。

上の段のボタンに「資料請求はこちら」と入力してみました。

VKボタンブロックにテキストを入力したキャプチャ画像

テキストを太字にしてみます

太字にしたいテキスト部分を選択した状態で
①ツールバーの[B]をクリックします。
すると選択したテキスト部分が太字(ボールド)になります。

下図では上の段のボタンの文字を太字にしています。

ボタン内テキストを太字(ボールド)にしたキャプチャ画像

テキストのサイズ変更をしてみます

①サイズ変更したいテキスト部分を選択した状態で、
ツールバーの②の部分をクリックします。
ウィンドウが開くので[インライン文字サイズ]をクリックします。

VKボタブロックのテキストサイズ変更を「インライン文字サイズ」でするキャプチャ画像

すると、①サイズ指定のウィンドウが開きます。
②の[S][M][L][XL]から選択して
③の[適用]をクリックします。
④をクリックすれば任意でサイズ指定できます。

インライン文字サイズで変更する場面のキャプチャ画像

[XL]を選択してみました。

インライン文字サイズ変更でテキストサイズを変更した後のキャプチャ画像

サブテキストの入力もできます

WordPress標準の「ボタンブロック」にない機能で、
「VKボタンブロック」では使える機能の一つがこのサブテキスト入力機能です。
サブテキスト入力は簡単です。

ページ編集画面の右側にブロックパネルがあります。
(ブロックパネルが開いていない場合は、ページ右上の設定マークをクリックすれば開きます。そして「投稿」ではなく、「ブロック」を選択している状態にします)

ブロックパネルに「サブテキスト」という項目があり、
その下にテキストの入力スペースがあります。
その入力スペースへテキストを入力します。
ここでは「無料ダウンロード」と入力してみました。

すると②ボタン内テキストに「無料ダウンロード」とサブテキストが表示されます。

VKボタンブロックでサブテキストを入力する方法のキャプチャ画像

ボタンサイズの設定

ブロックパネルで「サブテキスト」項目の下に
「ボタンサイズ」項目があります。

①ここでボタンの大きさを[大][標準][小]の3つから選んで設定できます。
②が各々[大][標準][小]を設定してみた例です。

VKボタンブロックでボタンサイズを選択するキャプチャ画像

ボタンの位置設定

ブロックパネルで「ボタンサイズ」項目の下に
「ボタンの位置」項目があります。

①ここでボタンの位置を[左][中央][右][幅広][Block]の5つから選んで設定できます。
②が各々を設定してみた例です。

VKボタンブロックでボタンの位置を選択するキャプチャ画像

ボタンスタイルの設定(ベタ塗りや背景なしなど)

ブロックパネルで「ボタンの位置」項目の下に
「ボタンスタイル」項目があります。

①ここでボタンのスタイルを[ベタ塗り][背景なし][テキストのみ]の3つから選んで設定できます。
②が各々を設定してみた例です。

VKボタンブロックでボタンスタイル(ベタ塗りなど)を選択するキャプチャ画像

ボタンエフェクトの設定(ボタンが光る)

ブロックパネルで「ボタンスタイル」項目の下に
「ボタンエフェクト」項目があります。

①ここでボタンのエフェクト[光る]を設定できます。
②が設定してみた例です。
(※スタイルが[ベタ塗り]のみエフェクトを設定できます)

VKボタンブロックでボタンエフェクト(光る)を設定するキャプチャ画像

この光るエフェクトもWordPress標準の「ボタンブロック」にはない効果です。

ボタンの色設定

ブロックパネルで「ボタンエフェクト」項目の下に
「色」項目があります。

①の標準色は8色の中からプルダウンで選ぶことができます。
下図ではとりあえず②の4色を設定してみました。

標準色以外の色を使いたい場合は、
カスタムカラーのカラーパレットで色を選びます。
ここでは④[黒]を選んでみました。

VKボタンブロックでボタンの色を変更する方法のキャプチャ画像

ボタンにアイコンを表示させる(FontAwesome)

WordPress標準の「ボタンブロック」にない機能の一つがこのアイコン表示です。
ですので、ボタンにアイコンを表示させたい場合は、Lightningの「VKボタンブロック」の方をご利用ください。

表示するアイコンはFontAwesomeのフォントアイコンです。

アイコンを表示させたいボタンを選択している状態で、
[アイコンを選択]ボタンを押します


文字の前にアイコンを表示させたい場合は①の方で、
文字の後ろにアイコンを表示させたい場合は②の方で、
各々アイコンを選択します。
前後両方に表示させることもできます。

VKボタンブロックでボタン内にアイコンを表示させる方法

では、文字の前にアイコンを表示させてみます。

[アイコンを選択]ボタンをクリックすると
②アイコン一覧のウィンドウが開きます。
表示させたいアイコンをクリックします(ここではファイル型のアイコンを選んでみました)。
④ボタンに選んだファイル型アイコンが表示されました。

VKボタンブロックでボタン内にアイコンを表示させる方法2

アイコン一覧に表示させたいアイコンが見当たらない場合は、

FontAwesomeのウェブサイトで探してきて表示させることもできます。そのやり方につきましては、第27回ウェブ講座「アイコンブロックの使い方」内で解説していますのでご参照ください。


もう一つボタンを作って
文字の後ろにもアイコンを表示させてみました。
①のサイズで20px指定して少し大きくしてみました。

VKボタンブロックでボタン内にアイコンをテキストの前後に表示させる方法

ボタンにリンクURLを挿入します

ボタン設置をする主な目的としましては、
ボタンにリンクを貼って、リンク先ページへ誘導し、
アクションを起こしていただく、
ということだと思います。

では、ボタンにリンクURLを挿入してみましょう。

リンクURLを挿入したいボタンを選択している状態で
ツールバーで[リンク]をクリックします。
リンク挿入のウィンドウが開きますので
②へリンク先のURLを入力します(あるいはコピペします)。
③リンク先を新しいタブで開きたい場合はチェックします。
[エンターマーク]をクリックするとリンク挿入が完了します。

VKボタンブロックでボタンにリンクURLを挿入するキャプチャ画像

カラムを使ってボタンを横並び配置する

WordPress標準の「ボタンブロック」はボタンの横並び配置機能があるのですが、
Lightningの「VKボタンブロック」には横並び配置機能は付いていません
(有料版Lightningにはあります)

ですが、カラムブロックを使えばボタンの横並び配置を実現できます。

下図では3カラムのカラムブロックで
各カラムにボタンブロックを挿入してボタンを横並びに配置してみました。

2つのボタンは配置を完了し、
最後の3番目のカラムにボタンブロックを挿入するところです。

①のカラム内[+]ボタンをクリックすると
ブロック選択ウィンドウが開きます。
VKボタンブロックのアイコンをクリックします。
(※もしVKボタンブロックのアイコンが見当たらない場合は、③の検索窓に「ボタン」と入力すればVKボタンブロックのアイコンが表示されるはずです)

Lightningでカラムブロックを使ってボタンを横並び配置するキャプチャ画像

3番目のカラムにVKボタンブロックが挿入されました。

Lightningでカラムブロックを使ってボタンを横並び配置するキャプチャ画像2

この方法で無料版Lightningの「VKボタンブロック」でもボタンを横並び配置ができますので、横並びでボタンを表示したい場合は試してみてください。

なお、カラムブロックを使ってのボタンの横並び配置を含め
キャプチャ画像を撮った作例はこちらのデモサイトでご覧いただけます。
https://d-elephant.com/demo_7th/archives/271


以上で、第36回のウェブ講座、
「Lightning VKボタンブロックの使い方」は終了です。

大変お疲れ様でした。

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