ボタンブロック

ブロック一覧へ戻る

ボタンブロックを使うと固定ページや投稿へ一つまたは複数のボタンを追加できます。

参考: このボタンブロック(buttons block)は WordPress 5.4から利用可能です。以前のボタンブロック(button block)は非推奨になりました。

ボタンブロックを追加するには、ブロックを追加アイコンをクリックしてブロックライブラリを開き、ボタンブロックを選びます。

空のブロックへ /buttons (または /ボタン)と入力して Enter キーを押す方法でも、簡単に追加できます。

ブロック追加の詳しい方法はこちらをご覧ください。

ブロックツールバー

ブロックツールバーを表示するには、ブロックをクリックします。ほとんどのブロックには固有のツールバーアイコンとコントロールがあり、エディター内でブロックを操作できます。

ボタンブロックには、各ボタンのツールバーと、ブロック全体のツールバーがあります。

ブロック全体のツールバーには標準で5個のボタンがあります。

• 変換
• 移動用ハンドル
• 配置を変更
• 項目の揃え位置を変更
• 他のオプション

変換

ボタンブロックをグループブロックまたはカラムブロックへ変換できます。

移動用ハンドル

上下の矢印を使って、ドキュメント内でブロックを上下に移動できます。

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

配置を変更

現在のテーマがサポートしていれば、幅広または全幅を選べます。

• 幅広 – ブロックの幅をコンテンツ幅に合わせます。
• 全幅 – 画面の幅いっぱいまでブロックの幅を広げます。

項目の揃え位置を変更

項目(ボタン)の揃え位置として左、中央、右を選べます。また項目の間にスペースを入れて均等に配置することもできます。

他のオプション

追加設定を表示(非表示)

追加設定を表示(非表示)オプションを使うと、エディターのサイドバーにあるブロック設定パネルを表示する(または隠す)ことができます。

コピー

コピーを使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロックを複製できます。

前に挿入

新しいブロックを選択したブロックの前へ挿入します。

後に挿入

新しいブロックを選択したブロックの後へ挿入します。

移動

移動を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロックがそこへ移動します。

HTML として編集

HTML として編集を使うと、選択したブロックの HTML コードを変更できます。

再利用ブロックに追加

再利用ブロックに追加オプションを使うと、選択したブロックを再利用ブロックのリストへ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

グループ化

ブロックをまとめて一つの単位として扱いたい場合、グループ化オプションを選択します。例えば共通の背景色や他のブロックをグループへ追加できます。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロックをコンテンツから削除できます。

トップ ↑

各ボタンのブロックツールバー

各ボタンのツールバーには以下のオプションがあります。

• スタイル変更
• 移動用ハンドル
• リンク
• テキスト編集オプション
• 他のオプション

スタイル変更

スタイル変更をクリックすると、ボタンのスタイルを変えられます。

リンク

ボタンへリンクを追加できます。リンクを新しいタブで表示するオプションを選ぶこともできます。

テキスト編集オプション

太字

テキストを選択してから、太字オプションまたはキーボードの Ctrl+B (または Command+B) を使うと、太字にできます。これは通常、周囲のテキストより重いウエイトです。

イタリック

テキストを選択してから、イタリックオプションまたはキーボードの Ctrl+I (または Command+I) を使うと、イタリック体にできます。これは通常、右に傾いて見えます。

他のテキスト編集オプション

インラインコード

テキスト内のちょっとしたコードの書式を変えるにはインラインコード機能を使います。書式を変えるだけでなく、コードが表示されず実行されてしまうのを避けることもできます。

インライン画像

インライン画像機能を使うと段落に画像を追加できます。オプションが一つあり、画像のピクセル幅を入力します。

キーボード入力

テキスト内の一部だけ書式を変えるにはキーボード入力機能を使います。(選択したテキストに HTML の <kdb> 要素が付加されます。)

テキスト色

テキストの色を指定するにはテキスト色が使えます。

例: ボタン, 段落, 画像

下付き

文字を普通より少し下にするには下付きが使えます。

例: ボタン_ブロック

上付き

文字を普通より少し上にするには上付きが使えます。

例: ボタン^ブロック

打ち消し線

選択したテキストの真ん中に水平線を引くには打ち消し線が使えます。

例: ボタンブロック

各ボタンの他のオプション

追加設定を非表示

追加設定を非表示オプションを使うと、エディターのサイドバーにあるブロック設定パネルを隠す(または表示する)ことができます。

コピー

コピーを使うと、選択したブロック(ボタン)をコピーしてボタンブロック内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロック(ボタン)を複製できます。

移動

移動を選ぶと、ボタンブロックの中に青い線が現れます。その後、上下の矢印を使って線を左右に移動し、選択したブロック(ボタン)の移動先を指定できます。最後にキーボードの Enter を押すとブロック(ボタン)がそこへ移動します。

HTML として編集

HTML として編集を使うと、選択したブロック(ボタン)の HTML コードを変更できます。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロック(ボタン)をボタンブロックから削除できます。

トップ ↑

ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディターのサイドバーにあります。もしサイドバーが見当たらなければ、公開(更新)ボタンの隣にある「歯車」ボタンをクリックしてください。

バリエーションへの変換

ボタンを横に並べるか、縦に並べるかを選べます。

高度な設定

ボタンブロック自体に、HTML アンカーおよび CSS クラスを追加できます。

HTML アンカーは特定のボタンブロックにユニークな Web アドレスを作ることができます。その後、ページ内のボタンブロックへ直接リンクできます。

追加 CSS クラスはブロックへ CSS クラスを追加できます。その後、カスタム CSS を書いてブロックに好みのスタイルを付けることができます。

トップ ↑

各ボタンのブロック設定

単独のボタンをクリックすると、ボタンブロックとは異なるオプションがサイドバーに表示されます。

スタイル

各ボタンのスタイルを変更できます。

タイポグラフィ

テキストのフォントサイズを変更できます。デフォルトのサイズから選ぶか、カスタムサイズを入力します。

色

テキスト色オプションは、テキストの色を変更できます。

背景色オプションは、背景色を変更できます。また単色かグラデーションかを選べます。グラデーションの場合、線形か放射状かを選べます。さらに線形の場合は角度を指定します。

幅の設定

各ボタンのボタンブロック内での幅を指定できます。

高度な設定

ブロック内の各ボタンにリンク rel 属性を追加できます。また、HTML アンカーおよび CSS クラスを追加できます。

HTML アンカーは特定のボタンにユニークな Web アドレスを作ることができます。その後、ページ内のボタンへ直接リンクできます。

追加 CSS クラスはブロック(ボタン)へ CSS クラスを追加できます。その後、カスタム CSS を書いてブロック(ボタン)に好みのスタイルを付けることができます。