WordPress(ワードプレス)のブロックエディターでは、ボタンブロックを利用して、簡単に申し込みボタンなどを作ることができます。
今回は、ボタンブロックを利用してボタンを作る方法・ぼったんブロックの使い方を紹介します。
※本記事は、WordPress5.7、利用テーマLightningで解説しています。
■WordPress ボタンブロックの使い方・ボタンの作り方(動画解説版)
もくじ
(関連記事)ブロックエディターの使い方について
本記事では、ボタンブロックのやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
WordPress ボタンブロックの作り方
ボタンの基本的な追加方法
まずは、WordPressの固定ページまたは投稿ページの編集画面を開き、ブロックの追加ボタンを押下します。
ボタンブロックが挿入されました。
ボタンの文言を入力してみましょう。
上ツールバーからボタンのリンクを設定することができます。リンクボタンをクリックします。
ボタンのリンク(URL)を入力して確定しましょう。
以上でボタンの追加は完了です。ここからはボタンブロックの説明についてもう少し詳しく説明していきます。
ボタンブロックの構成説明
ボタンブロックのいろいろな設定を説明する前に、まずボタンブロックの構成について説明します。
ボタンブロックは下記のように外側のボタンブロックと内側のボタンブロックから構成されており、外側と内側でそれぞれできる設定が異なります。
■ボタンブロックの構成
| 項目 | 内容 |
|---|---|
| 外側ボタン でできる設定 |
|
| 内側ボタン でできる設定 |
|
※ご利用のテーマやWordPressバージョンによって上記と異なる場合があります。
内側にあるボタンに対してできる設定
まずは内側のボタンに対してできる設定を説明していきます。
ボタンのスタイル
内側ボタンでは、右メニューのスタイルから、「塗りつぶし」か「アウトライン」を選ぶことができます。
■「塗りつぶし」の場合(標準)
■アウトラインの場合
ボタンの文字色と背景色を変更
内側ボタンでは、色設定でボタンの文字色と背景色を変更することができます。
ボタンの角の丸み設定
枠線設定＞角丸半径＞数値を入れると、好みの角丸に変更できます。
ボタンの幅の設定
幅の設定からお好みのパーセンテージを選ぶと、お好みの幅に調節できます。
外側にあるボタンに対してできる設定
外側にあるボタンでは、ボタン全体の設定や新しいボタンの追加ができます。
外側ボタンをうまく選択できない場合は左下にあるブロックのナビゲーションから、外側のボタンを選択してください。
配置変更ボタンで「左寄せ」「中央揃え」「右寄せ」したい場合
以下の部分から配置変更ボタンをクリックして、「左寄せ」「中央揃え」「右寄せ」に設定します。
なお、中央寄せや右寄せの設定をしても編集画面ではうまく反映されない場合がありますが、実際にプレビューを見るとうまく中央寄せ/右寄せなど設定が効いていればOKです。
ボタンの新規追加
この状態（文書→ボタン→ボタン）で下にあるプラスボタンでボタンを追加すると、ボタンを横に複数並べることができます。
２個目のボタンが追加されました。
ボタンバリエーション(水平/垂直)の設定
外側ボタンを選択した状態で右メニューからボタンバリエーションの変換で、各ボタンの配置を横に並べるか、縦に並べるか設定できます。
■ボタンバリエーションが縦の場合
■ボタンバリエーションが横の場合
なお、エディター編集画面ではうまく反映されない場合がありますが、実際にプレビューを見たときに設定が効いていればOKです。
まとめ
まとめです。今回はWordPressでボタンブロックを利用してボタンを作る方法をご紹介しました。
ボタンブロックは、外側ボタンと内側ボタンの二つから構成されており、設定できる項目が違うので注意しましょう。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室
。
のブロックエディターでは、ボタンブロックを利用して、簡単に申し込みボタンなどを作ることができます。 今回は、ボタンブロックを利用してボタンを作る方法・ぼったんブロック){kind=link}