WordPressのブロックエディターでは、「ボタン」ブロックを挿入して文字とリンク先を入力するだけで、クリックできるボタンを記事に置けます。この記事では、ボタンの追加手順、リンクの設定（新しいタブで開く・rel属性）、色や形の変更、横並びや中央揃えのやり方、デザインを複数の記事でそろえる方法、うまく表示されないときの確認点を順に説明します。
ボタンブロックの仕組み
最初に知っておきたいのは、ボタンが「入れ物」と「中身」の2層になっていることです。
- 外側の「ボタン」ブロック（英語名 Buttons）：ボタンを並べるための入れ物です。並べる向き、左右の配置、ボタン同士の間隔をここで決めます。
- 内側の「ボタン」ブロック（英語名 Button）：1つ1つのボタンです。文字、リンク先、色、角の丸み、幅などをここで決めます。
日本語の画面ではどちらも「ボタン」と表示されることが多いため、設定が見つからないときは「いま選択しているのは入れ物か、中身か」を確認するのが近道です。画面下部のパンくず表示（「投稿 › ボタン › ボタン」のような表示）や、画面左上の「リスト表示」で、選択中のブロックの階層を確かめられます。
ボタンを追加する手順
- 投稿または固定ページの編集画面を開きます。
- ボタンを置きたい位置で、画面左上の「＋」（ブロック挿入ツール）をクリックし、検索欄に「ボタン」と入力して選びます。
- 本文の空の段落で「/ボタン」または「/buttons」と入力し、候補から選ぶ方法でも挿入できます（スラッシュコマンド）。
- 挿入されたボタンの上に文字を入力します。「お問い合わせはこちら」のように、押した先で何が起きるかが分かる文言にします。
- ボタンを選択した状態で、ブロックツールバーのリンクアイコン（鎖のマーク）をクリックし、URLを入力するか、サイト内の記事名で検索して選びます。
- 記事を保存し、プレビューで実際にクリックして目的のページが開くかを確かめます。
ボタンを2つ以上並べたい場合は、外側のボタンブロックを選んだときに表示される「＋」（ブロックの追加）から内側のボタンを追加します。既存のボタンを選択して複製（Windowsなら Ctrl+Shift+D、Macなら Command+Shift+D）すると、色や形の設定を引き継いだまま増やせるので手間が省けます。
リンクの設定
新しいタブで開く
リンクを設定したあとに表示されるリンクの編集画面に「新しいタブで開く」の切り替えがあります。外部サイトへのボタンで使われることが多い設定ですが、読者によっては「戻るボタンで戻れない」と感じることもあるため、サイト内のページへのボタンでは通常どおり同じタブで開く方が自然です。
rel属性（nofollow・sponsored）
広告や提携先へのリンクに nofollow や sponsored を付けたい場合は、内側のボタンを選択し、右側の設定サイドバーの「高度な設定」を開きます。ここにある「リンク rel」の欄に、sponsored nofollow のように半角スペース区切りで入力します。欄の名前や位置はWordPressのバージョンやテーマによって異なる場合があります（2026年10月現在）。保存後、公開ページでボタンを右クリックして「検証」などからHTMLを開き、rel が付いているかを確認できます。
デザインを変更する
スタイル（塗りつぶし・アウトライン）
内側のボタンを選択すると、設定サイドバーの「スタイル」に、背景色で塗りつぶした形と、枠線だけの形（アウトライン）が表示されます。ページ内で目立たせたいボタンは塗りつぶし、補助的なボタンはアウトラインにすると、どちらを押すべきかが読者に伝わりやすくなります。テーマによっては独自のスタイルが追加されていることもあります。
色・タイポグラフィ・枠線
設定サイドバーには、主に次のような項目があります。表示される項目はテーマによって増減します。
- 色：テキストと背景の色、テーマが対応していればグラデーション
- タイポグラフィ：文字の大きさ、太さなど
- 寸法：ボタン内側の余白（パディング）
- 枠線：枠線の色・太さと、角の丸み（角丸）
項目が見当たらない場合は、各パネル右上の縦三点メニューから表示する項目を追加できることがあります。色を選ぶときは、背景と文字のコントラストに注意します。薄い背景に白い文字のような組み合わせは、スマートフォンを屋外で見たときに読みにくくなります。
幅の設定
内側のボタンには「幅の設定」があり、25・50・75・100パーセントの4段階から選べます。ここでの割合は画面全体ではなく、入れ物（外側のボタンブロック）に対する割合です。スマートフォンで押しやすくしたい申し込みボタンなどは最大の100パーセントにすると、指で押す範囲が広がります。
横並び・縦並び・中央揃え
ボタンを中央に置きたいときに内側のボタンをいくら選んでも、配置の設定は出てきません。外側のボタンブロックを選択し、ブロックツールバーの配置（両端揃え）から「中央揃え」を選びます。同じ場所や設定サイドバーの「レイアウト」から、横並び・縦並びの切り替えや、右揃え・両端に寄せる配置も選べます。
ボタン同士の間隔は、外側のボタンブロックの「寸法」にある「ブロックの間隔」で調整します。横並びのボタンは画面幅が足りないと自動的に折り返して2行目に回るため、スマートフォンでの見え方はプレビューの「モバイル」表示で確認しておきます。
同じデザインを繰り返し使う方法
記事ごとに色や角丸を設定し直すと、少しずつデザインがずれていきます。次のどちらかで管理すると手間と揺れを減らせます。
- パターンとして保存する：設定済みのボタンブロックを選び、オプション（縦三点）メニューから「パターンを作成」を選びます。「同期」をオンにして保存すると、パターンを修正したときに使用中のすべての箇所へ反映されます。同期しない場合は、ひな形として毎回コピーして使う形になります。
- グローバルスタイルで決める：ブロックテーマ（Twenty Twenty-Five など）を使っている場合は、「外観」→「エディター」→「スタイル」から、サイト全体のボタンの色や角丸を一括で決められます。クラシックテーマではこの画面がないため、テーマのカスタマイザーや追加CSSで調整します。
うまくいかないときの確認点
編集画面でボタンを押してもページが開かない
編集画面ではクリックすると文字の編集やブロックの選択になるため、リンク先には移動しません。動作の確認はプレビューか公開ページで行います。
公開ページでボタンを押しても何も起きない
リンクを設定し忘れていると、見た目はボタンでもクリックしても移動しません。ボタンを選択し、ツールバーのリンクアイコンが設定済みの状態になっているかを確認してください。
設定した色や角丸が反映されない
テーマやページビルダー系のプラグインのCSSが、ボタンのデザインを上書きしていることがあります。キャッシュ系のプラグインを使っている場合は、キャッシュを削除してから表示し直します。それでも変わらない場合は、テーマ側でボタンのデザインが固定されていないかをテーマのマニュアルで確認します。
まとめ
- ボタンは「入れ物」と「中身」の2層構造で、配置と間隔は入れ物、文字・リンク・色・幅は中身で設定します。
- 挿入は「＋」のブロック挿入ツールか「/ボタン」で行い、リンクはツールバーの鎖アイコンから設定します。
nofollowやsponsoredは「高度な設定」のリンク rel 欄で付けられます。- 繰り返し使うデザインは、同期パターンやグローバルスタイルでまとめて管理するとずれを防げます。
- 動作の確認は編集画面ではなく、プレビューや公開ページで行います。