
VK Blocks Pro の横並びボタンブロックを使ってノーコードで2つのボタンを揃え、サイトの見栄えを整える
本記事は広告を含みます。
初めましての方も、ふだんから仲よくしてくださっている方も。
もちろん、アドベンドカレンダー2023の記事を読んで初めて私のことを知ってくださった方も。
ご訪問いただき、ありがとうございます。
WordPress 歴12年目、三度の飯より WordPress が好きな瀬戸内ことりです。

この記事は「Vektor WordPress Solution Advent Calendar 2024」の12月11日(水) の記事です。
ベクトルアドベントカレンダー2024参加中!
べクトルの中の人のおひとり、ササキカオリさんからバトンを受け取りました。
12月10日 (火) の記事
(執筆:ササキカオリさん)
ブロックパターンライブラリには2024年12月11日 (水) 23:00現在、380のパターンが登録されています。
わたくし今年は 12/19 (木)、12/20 (金) と合わせて3本の記事を公開しています。

他の2記事もぜひ読んでみてください!
ベクトルアドベントカレンダー2023の記事
2023年より、ベクトルさんのアドベントカレンダーに参加させていただいております。
Vektor WordPress Solution Advent Calendar 2023」の12月24日(日) の記事もぜひ読んでみてくださいね!
私がなぜ Lightning を選んだのか、なぜ Lightning を激推しするのか、その理由を述べています。

2024年11月、ベクトル公式テクニカルパートナーに認定いただきました。ありがとうございます (号泣)
本記事では、VK Blocks Pro の横並びボタンブロックを使って (難しいコードを書くことなく) ダブルボタンを美しくそろえて配置し、ウェブサイトの見栄えを整えましょう、というお話をいたします。

ウェブサイトを制作させていただくとき常に心がけていることです。参考にしていただけたらうれしいな。
(複雑で難しい) コードを書けばたいていのことは実現可能 (だと思うん) ですが、アップデートの影響を受けない書き方をしないとなりませんしね。とても難度が高いです。
でも、VK Blocks Pro の「横並びボタン」ブロックを使えば、ノーコードで誰でも美しいボタンレイアウトが可能です。


ちなみに、「ダブルボタン」というのは私が勝手につけた呼び名です。
▼こんな感じでボタンが並んでいる状態を指します。
パソコン

スマホ

上記「横並びボタン」の詳細設定
設定項目 | 設定 |
---|---|
項目の揃え位置 | 中央揃え |
ボタンサイズ | 標準 |
ボタンの幅 (モバイル) | 100% |
ボタンの幅 (タブレット) | 50% |
ボタンの幅 (PC) | 50% |
ボタンスタイル | ベタ塗り |
アイコン (文字の前) | 電話:fas fa-phone メール:fa-regular fa-envelope |
ボタンの 角丸の大きさ | 4px |
パターンをコピーする

お問い合わせ
お仕事のご依頼や取材のお申し込みなどお気軽にお問い合わせください
無料版・Pro版・WP標準のボタンを比べてみる
ボタン (WordPress 標準)
※ いずれもボタン幅を50%に設定しています。

コードを書かないと
- デバイスごとに幅の設定を変えられません。
- アイコンフォントが使えません。
コードを書かなくても
- ボタンの間隔はスタイルで設定できます。
ボタン-VK Blocks (無料)

カラムブロック or 横並びグループブロックを使わないと横並びにできません。
ボタン-VK Blocks (無料)×
横並びグループ (WordPress 標準)

幅を揃えるにはコードが必要です。
ボタン-VK Blocks (無料)×
カラム (WordPress 標準)

コードを書かないと間隔の調整ができません。
横並びボタン-VK Blocks Pro
横並びボタン (Pro版)-幅設定なし
横並びボタン (Pro版)-25%
デバイス幅から「両脇の余白」と「ボタンどうしの余白」を除き、4分割 (25%ずつ) します。

パソコンだとキレイに表示されますが、スマホだと (デバイス幅が狭いと) テキストがハミ出ちゃいます。
3つ並べたとき
ボタンが3つになっても3分割 (30%ずつ) にはならず、「25%」の幅が保たれます。
スマホだとこうなる

4つ並べたとき
スマホだとこうなる


ハミ出ちゃうときは、デバイスごとに設定を変えれば OK!
デバイスごとに幅を変えてみます。
横並びボタン (Pro版)-スマホ50%・タブレット50%・PC25%
3つ並べたとき
スマホだとこうなる

4つ並べたとき
スマホだとこうなる

横並びボタン (Pro版)-50%
サブテキストあり
サブテキストなし

幅がそろってるとキレイに見える!
横並びボタンがポテンシャルを最も発揮する場面
「ウェブサイトを自分で作る」講座を開いたことがありまして。
その際に伴走させていただいたお客様にレクチャーし、一緒に縦並びのダブルボタンを設置しました。
お客様のサービスはまだ準備中。
2つのボタンには、それぞれ以下の文言を入れます。
- 申し込む (準備中)
- 詳細を見る
すると・・・
Before

ボタンの幅がそろってないのが気になります。

美しくない・・・。
このお客様は ライセンス (Vektor Passport) を購入されましたので、

「横並びボタン」ブロックを使いましょう。
キレイにそろいますよ!
とお伝えし、マンツーマンサポートで一緒に修正。
After


ボタンの幅がそろうだけで、こんなに見栄えがよくなるんですね!
とても喜んでくださいました。
「そろえる」 ってめちゃくちゃ大事です。

ことり的とりまとめ
私がふだんウェブサイトを制作させていただく際に気をつけていること=「そろえる」の一部をご共有いたしました。参考にしていただけたらうれしいです。
もう1つ、ぜひ参考にしてほしいこと
2024年11月16日 (土) の岐阜 WordPress Meetup にベクトルの石川さんが登壇されました。
(私も現地参加させていただきました。ありがとうございました!)
テーマは『プロっぽいページには理由がある~ブロックパターン時代のページデザインのコツ』。
このセッションで、石川さんからは、プロっぽいページにするために気を配るべき以下2つのポイントと、
- 情報のグルーピングを徹底する
- 情報の重要度を徹底する
そのためには 余白 を意識すべし、というお話がありました。
余白についてベクトルさんが定められているガイドラインをぜひご覧になってみてください。
情報のグルーピング・重要度の見せ方を「余白」で徹底し、さらに「そろえる」ことで美しく見せる。
ぜひ心がけてみてくださいね。
・・・なんてえらそうに書いているものの、自分のサイトにとんでもない手落ちがあったらどうしよう・・・とガクブルしている小心者の瀬戸内ことりでした。

最後までお読みいただき
ありがとうございました!
アドベントカレンダー参加中!
本記事は「Vektor WordPress Solution Advent Calendar 2024」の12月11日(水) の記事です。
ササキカオリさんからバトンを受け取りました。
12月10日 (火) の記事
(執筆:ササキカオリさん)
再びササキカオリさんにバトンをお渡しします!
12月12日 (木) の記事 (執筆:ササキカオリさん)
今年は 12/19 (木)、12/20 (金) と合わせて3本の記事を公開しています。

他の2記事もぜひ読んでみてください!
アドベントカレンダー2023の記事
2023年より、ベクトルさんのアドベントカレンダーに参加させていただいております。
Vektor WordPress Solution Advent Calendar 2023」の12月24日(日) の記事もぜひ読んでみてくださいね!
私がなぜ Lightning を選んだのか、なぜ Lightning を激推しするのか、その理由を述べています。

2024年11月、ベクトル公式テクニカルパートナーに認定いただきました。ありがとうございます (号泣)

2024年11月、ベクトル公式テクニカルパートナーに認定いただきました。ありがとうございます (号泣)
