本記事は広告を含みます。

初めましての方も、ふだんから仲よくしてくださっている方も。

もちろん、アドベンドカレンダー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/19 (木)、12/20 (金) と合わせて3本の記事を公開しています。

ことり

他の2記事もぜひ読んでみてください!

アドベントカレンダー2023の記事

2023年より、ベクトルさんのアドベントカレンダーに参加させていただいております。

Vektor WordPress Solution Advent Calendar 2023」の12月24日(日) の記事もぜひ読んでみてくださいね!

私がなぜ Lightning を選んだのか、なぜ Lightning を激推しするのか、その理由を述べています。

ことり

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

ことり

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