WordPress ボタンブロックの使い方ボタンの作り方

WordPress

WordPress ボタンブロックの使い方・ボタンの作り方を解説

2021年5月12日

WordPress(ワードプレス)のブロックエディターでは、ボタンブロックを利用して、簡単に申し込みボタンなどを作ることができます。

今回は、ボタンブロックを利用してボタンを作る方法・ぼったんブロックの使い方を紹介します。
 

ボタンブロックの例
 

※本記事は、WordPress5.7、利用テーマLightningで解説しています。
 

■WordPress ボタンブロックの使い方・ボタンの作り方(動画解説版)


 


 

(関連記事)ブロックエディターの使い方について

本記事では、ボタンブロックのやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

WordPress ボタンブロックの作り方

ボタンの基本的な追加方法

まずは、WordPressの固定ページまたは投稿ページの編集画面を開き、ブロックの追加ボタンを押下します。
 
ボタンブロックの追加
 

ボタンブロックが挿入されました。
ボタンブロックが挿入された
 

ボタンの文言を入力してみましょう。
ボタンの文言を入力
 

上ツールバーからボタンのリンクを設定することができます。リンクボタンをクリックします。
ボタンのリンクを設定
 

ボタンのリンク(URL)を入力して確定しましょう。
ボタンのリンク(URL)を入力して確定
 

以上でボタンの追加は完了です。ここからはボタンブロックの説明についてもう少し詳しく説明していきます。
 

ボタンブロックの構成説明

ボタンブロックのいろいろな設定を説明する前に、まずボタンブロックの構成について説明します。
 

ボタンブロックは下記のように外側のボタンブロックと内側のボタンブロックから構成されており、外側と内側でそれぞれできる設定が異なります。
外側ボタンと内側ボタン
 

■ボタンブロックの構成
ボタンブロック
 

項目 内容
外側ボタン
でできる設定
  • ボタン全体の配置設定(左/中央/右)
  • ボタン全体の方向設定(水平か垂直か)
  • 内側ボタンの新規追加
内側ボタン
でできる設定
  • ボタンスタイル(塗りつぶし/アウトライン)
  • 文字色
  • 背景色
  • 角の丸み
  • 幅(%)

※ご利用のテーマやWordPressバージョンによって上記と異なる場合があります。
 

内側にあるボタンに対してできる設定

まずは内側のボタンに対してできる設定を説明していきます。
 

ボタンのスタイル

内側ボタンでは、右メニューのスタイルから、「塗りつぶし」か「アウトライン」を選ぶことができます。
 
■「塗りつぶし」の場合(標準)

 
■アウトラインの場合

 

ボタンの文字色と背景色を変更

内側ボタンでは、色設定でボタンの文字色と背景色を変更することができます。
 


 

ボタンの角の丸み設定

枠線設定>角丸半径>数値を入れると、好みの角丸に変更できます。
 


 

ボタンの幅の設定

幅の設定からお好みのパーセンテージを選ぶと、お好みの幅に調節できます。

 

外側にあるボタンに対してできる設定

外側にあるボタンでは、ボタン全体の設定や新しいボタンの追加ができます。
 

外側ボタンをうまく選択できない場合は左下にあるブロックのナビゲーションから、外側のボタンを選択してください。

 

配置変更ボタンで「左寄せ」「中央揃え」「右寄せ」したい場合

以下の部分から配置変更ボタンをクリックして、「左寄せ」「中央揃え」「右寄せ」に設定します。

 

なお、中央寄せや右寄せの設定をしても編集画面ではうまく反映されない場合がありますが、実際にプレビューを見るとうまく中央寄せ/右寄せなど設定が効いていればOKです。
 

ボタンの新規追加

この状態(文書→ボタン→ボタン)で下にあるプラスボタンでボタンを追加すると、ボタンを横に複数並べることができます。
外側ボタンの設定>新規ボタンの追加
 

2個目のボタンが追加されました。
外側ボタンの設定>2個目のボタンが追加された
 

ボタンバリエーション(水平/垂直)の設定

外側ボタンを選択した状態で右メニューからボタンバリエーションの変換で、各ボタンの配置を横に並べるか、縦に並べるか設定できます。
外側ボタンの設定>ボタンバリエーション
 

■ボタンバリエーションが縦の場合
ボタンバリエーションが縦の場合
 

■ボタンバリエーションが横の場合
ボタンバリエーションが横の場合
 

なお、エディター編集画面ではうまく反映されない場合がありますが、実際にプレビューを見たときに設定が効いていればOKです。
 

まとめ

まとめです。今回はWordPressでボタンブロックを利用してボタンを作る方法をご紹介しました。
 

ボタンブロックは、外側ボタンと内側ボタンの二つから構成されており、設定できる項目が違うので注意しましょう。
ボタンブロックの構成
 

まだ少し慣れない部分もありますが、慣れていったらとても便利そうですね!

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。

 

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8


検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,

© 2021 WEBST8のブログ Powered by AFFINGER5