WordPress — レスポンシブなボタン

WordPress7.0になってから『グリッド』のブロックがレスポンシブ対応となり、表現の幅が大きく広がりました。ここではグリッドのブロックを使って、WordPressの弱点のひとつであった、ボタンが左揃えに整列しない問題を解決していきましょう。ボタンが完全なレスポンシブ対応になります。

グリッドの設置

グリッドのブロックを設置します。

次に を押してボタンを追加していきます。

もしすでに作成しているボタンがあるのなら、そのスタイルをコピーすると良いでしょう。

この操作はボタンの文字まではコピーしないので自分で打ち込みましょう。

ブロックエディターの右端をクリックしても同様の操作が行えます。

ボタンを一から作成する場合はこちらを参考にしてください。

WordPress --- ボタンの設置

ボタン作成はWeb制作の基本。マスターしましょう。

michirojohn1.com

2026.04.27

ひとつのボタンブロックに全てのボタンを配置するわけではないことに注意しましょう。グリッド内のセクションのひとつにつき、ひとつだけボタンブロックを配置します。

ボタン作成上の注意点

各セクションにボタンブロックをひとつだけ置く以外に、複数のボタンを作ったブロックを直接グリッドブロックに変換してはいけないことに留意しましょう。これはひとつのセクションに複数のブロックを作成することになります。

面倒でも、ボタンの数だけセクションを増やしていきましょう。ボタン位置（左揃え・中央揃え・右揃え）もひとつずつ設定していくことになります。

左揃えにボタンを整列させる

横並びブロックを使ってもボタン位置の調整は可能なのですが、あるボタンから次のボタンまでの距離が一斉に変わってしまうので、ボタンの長さが違うと配置が崩れてしまいます。それに対し、グリッドは各セクション（ブロック）を左揃えに整列させるので、ここにボタンをひとつだけ埋め込むと、左揃えに配置されたボタンが作成できるようになります。

PC・スマホ双方で見栄えのよいボタンが作れます。

ボタンの長さに合わせて、最小列幅を調整していきます。画面をタブレットやスマホに切り替えてみて、最適な幅に調整します。

ここでは最小列幅を９remに設定しないとタブレットの表示が崩れていました。

自分で最適な値を導き出していきましょう。

私のスマホでの見え方です。

グリッドの中央揃えやボタンブロックの両端揃えも見栄えが良い感じですね。

いい感じのものを使うようにしましょう。

おつかれさまでした。