横並びボタンを均等にコンテナ幅に合わせてレイアウトしたカスタマイズ例

横並びボタンは便利なブロックですが…

プラグイン VK Blocks Pro の 横並びボタン は、ボタンをお手軽に ↓ こんなふうにレイアウトできるとても便利なブロックです。

たくさんのボタンを配置して使うと気になることが…

ボタンが少ない場合は気にならないのですが、たくさんのボタンを配置して使う場合は以下のことが気になります。

CSS でボタンをレイアウトしてみた

そこで、CSS でカスタマイズして横並びボタンを均等にコンテナ幅に合わせてレイアウトしてみました。

どの画面幅でもきれいに揃えてレイアウトされますので、画面幅を変えてご確認ください。

カスタマイズ手順

横並びボタンブロックの 追加 CSS クラス に equal-width と入力して、子テーマの style.css などに以下のコードを追加します。

.vk_buttons.equal-width .vk_buttons_col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax( 12em, 1fr ));
}
.vk_buttons.equal-width .vk_buttons_col a.vk_button_link {
    width: 100%;
}
.vk_buttons.equal-width  .vk_button .vk_button_link.btn {
    padding: .6em .5rem;
}

12em の部分はボタンの最大文字数に合わせて調整してください。

VK Blocks Pro の入手方法

VK Blocks Pro は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2025年1月17日スターターパックのモバイルナビのデザインを2つ追加しました
• WordPress2024年12月25日WordPress コアの詳細ブロックで作った排他的に開閉するアコーディオン
• WordPress2024年12月14日VK Blocks Pro で投稿リストのカルーセル表示が超かんたんになった
• お知らせ2024年12月13日年末年始休業のお知らせ