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

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

「横並びボタンブロック」は有料版Lightningで使える機能となっています。
(有料版Lightning公式ページ⇒)

無料版Lightningでボタンを横並びで表示させたい場合は、カラムブロックの中にボタンブロックを挿入して表示させる方法があります。その方法については、第36回「Lightning VKボタンブロックの使い方を解説」で取り上げております。

また、WordPress標準の「ボタンブロック」には、ボタンを横並びに配置する機能がありますので、こちらのボタンブロックを利用しても良いかと思います。その方法についても、第35回「WordPress ボタンブロックの使い方を解説」で取り上げております。ただし、ボタン内のサブテキスト表示や、FontAwesomeのアイコン表示はできません。

Lightningの「横並びボタンブロック」を使えば、
例えば、このようなボタン表示ができます。

Lightning横並びボタンブロックで作ったボタンの例

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

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

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

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

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

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

ページで横並びボタンブロックを追加挿入するキャプチャ画像

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

ページで横並びボタンブロックを追加挿入するキャプチャ画像2

①ページに「横並びボタンブロック」が挿入されました
ブロックパネルが横並びボタンブロックのカスタマイズパネルとなります。
③の[■+]ボタンをクリックするとボタンが追加できます。

ページで横並びボタンブロックを追加挿入するキャプチャ画像3

ボタンを横に追加してみます

③の[■+]をクリックしてボタンを追加してみます。

横並びボタンブロックでボタンを追加するキャプチャ画像

ボタンが追加されました。
[■+]ボタンをクリックすることで4個、5個とボタンを追加していくことができます。

横並びボタンブロックでボタンが追加されたキャプチャ画像

ボタン内のテキスト入力

ボタン内のテキスト入力は段落ブロックでのテキスト入力と同じです。
太字やハイライト等の装飾もできます。
ボタン内でのテキスト改行もできます。

①にカーソルを持っていき
文字入力をすればオッケーです。

横並びボタンブロックでボタンに文字を入れるキャプチャ画像

テキストを太字にできます

「資料請求はこちら」と文字入力してみました。
入力した文字を太字(ボールド)にしてみます。

①太字にしたい文字を選択している状態で
②ツールバーの[B(ボールド)]をクリックします。

横並びボタンブロックでボタンのテキストを太字にするキャプチャ画像

「資料請求はこちら」が太字になりました

対比として隣のボタンに「お問い合わせはこちら」を入力してみました。
こちらはノーマルのままです。

テキストのサイズ変更ができます

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

横並びボタンブロックでボタン内テキストのサイズ変更方法のキャプチャ画像

テキストサイズ変更のウィンドウが開きます。
①で[S][M][L][XL]から選択します。
[適用]ボタンをクリックします。
(※任意でピクセル単位等でサイズ指定したい場合は③をクリックします)

横並びボタンブロックでボタン内テキストのサイズ変更方法のキャプチャ画像2

「資料請求はこちら」のテキストサイズを[XL]にしてみました。

ボタン内テキストにサブテキスト表示もできます

Lightningのボタンブロックの特徴的な機能の一つに、
ボタン内テキストにサブテキストを表示できる機能があります。

やり方はとても簡単です。

①サブテキストを表示させたいボタンを選択している状態で、
②ブロックパネルの「サブテキスト」項目の入力スペースに、
表示させたいサブテキストを入力します。
ボタンにサブテキストが表示されます。

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

「お問い合わせはこちら」の方のボタンにもサブテキストを入力してみました。

横並びボタンブロックでサブテキストを表示させた例

ボタンサイズの変更もできます

ボタンサイズの変更をしたい場合は、
①ブロックパネルの「ボタンサイズ」項目にて
[大][標準][小]の3サイズから選べます。
※ボタンサイズに合わせてボタン内テキストサイズも変更されます。

横並びボタンブロックでボタンサイズ変更のキャプチャ画像

ボタンの幅の設定

ブロックパネルで[ボタンサイズ]の項目の下に
①の[ボタンの幅]の項目があります。

「モバイル」「タブレット」「PC」の各々の端末ごとに、
[25%][50%][75%][100%]から選びます。
表示画面の何パーセントかという設定かと思います。

横並びボタンブロックでボタン幅の設定の仕方のキャプチャ画像

例えば、2つの横並びボタンの場合、2つのボタンの大きさをテキストの長さに関係なく50%で指定してデザインバランスを取りたいときなどに[ボタンの幅]を利用すると良いのではないでしょうか。

下図も50%・50%に幅を指定して
左右のボタン幅を統一してみた例です。

ボタンスタイル(デザイン)の設定

ブロックパネルで[ボタンの幅]の項目の下に
①の[ボタンスタイル]の項目があります。

[ベタ塗り][背景なし][テキストのみ]から選びます。

横並びボタンブロックでボタンスタイルの設定方法のキャプチャ画像

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

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

ボタンが光るエフェクト効果です。
[なし][光る]から選びます。

横並びボタンブロックでボタンに光るエフェクトを設定するキャプチャ画像

ボタンの色の設定

ボタンの色はデフォルトではウェブサイトのキーカラーに設定した色となります。
色を変更したい場合は、
ブロックパネルで[ボタンエフェクト]の項目の下にある
[色]で選びます。

①の「標準色」は8色の中からプルダウンメニューで選びます。
[Primary][Secondary]などの8色です。

①の標準色ではなく別の色にしたい場合は
②の「カスタムカラー」のカラーパレットから色を選びます、。

下図の上4色は標準色から選んでみました。
一番下の黄色はカスタムカラーから選びました。
カスタムカラーで色を選ぶと文字の色を選択するカラーパレットが開くので文字の色も選択できます。

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

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

Lightningのボタンブロックの特徴的な機能の一つに、
FontAwesom(フォントオーサム)のアイコンを表示できる機能があります。

ボタン内テキストの前後どちらにも表示できますし、
前後両方に表示させることもできます。

では、アイコンを挿入してみましょう。

①アイコンを挿入したいボタンを選択している状態で
②の[アイコンを選択]をクリックします。

横並びボタンブロックでボタン内にアイコンを表示させる方法のキャプチャ画像1

すると、①アイコン一覧のウィンドウが開きますので、
表示させたいアイコンをクリックして選びます。
③へ選んだアイコンが表示されました。

横並びボタンブロックでボタン内にアイコンを表示させる方法のキャプチャ画像2

アイコン一覧に希望のアイコンがない場合は

④の[Font Awesome アイコンリスト]をクリックすると、FontAwesomeのウェブサイトが開きますので、希望のアイコンを探して選択します。FontAwesomeウェブサイトでアイコンを選択して反映させる手順などは、第27回ウェブ講座「アイコンブロックの使い方」内で解説していますのでご参照ください。

「文字の前」へのアイコン表示設定の下に、
「文字の後」へのアイコン表示設定がありますので、
同じように希望のアイコンを選んで表示させることができます。

隣のボタンの「お問い合わせはこちら」にも前後にアイコンを表示させてみました。

横並びボタンブロックでボタン内にアイコンを表示させた例

ボタンギャップの指定もできます

ボタンキャップとはボタンとボタンの間の幅です。
この幅をpx(ピクセル)などの単位で指定できます。

横並びボタンブロックを選択している状態で、
①ボタンギャップサイズの入力スペースに数値を入力します。
(pxの他に%/EM/REM/VW/VHの単位を選択できます)
②へ指定した幅が反映されます。

横並びボタンブロックでボタンギャップサイズを設定するキャプチャ画像

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

ウェブページにボタンを挿入する目的としては、
目につくボタンを配置することでクリックを促してあるページへ誘導し、
そのページで資料請求などのアクションを起こしていただくことだと思います。

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

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

横並びボタンブロックでボタンにリンク挿入するキャプチャ画像

横並びボタンブロックの揃え位置

ボタンの揃え位置を[左揃え][中央揃え][右揃え][項目の間隔]から選ぶことができます。

横並びボタンブロックを選択している状態で、
ツールバーの[項目の揃え位置の変更]をクリックすると
②ウィンドウが開くので希望の揃えを選択します。

横並びボタンブロックでボタンの揃え位置を変更する方法のキャプチャ画像

横並びボタンブロックは有料版Lightningで使えるブロックです

有料版Lightning「Vektor Passport」(旧VK Blocks Pro、Lightning G3 Pro Unit)は
ライセンス期間1年で¥9,900(税込)です。
1年ごとの更新となります。
私もこの1年更新で契約しています。

ライセンス期間3年で26,400円(税込)、
ライセンス期間5年で39,600円(税込)、
こちらの長期間での契約もできます。

有料版Lightning「Vektor Passport」ページ


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

大変お疲れ様でした。

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