この記事はアフィリエイト広告を利用しています。
うれしい新機能「グループ水平スクロール」
VK Blocks バージョン 1.116.0 でうれしい新機能が追加されました。WordPress 標準のグループブロックの水平スクロール機能です。
横スクロールするテーブルとして使える
スマホの画面幅に収まらないような表形式のコンテンツを作るとき、いままではテーブルブロックを使って横スクロールさせたり、テーブルブロックを display: flex; でレスポンシブ対応したりしていました。
新機能を使ってグループブロックで横スクロールするコンテンツを作る手順は以下の通り、かんたんです。
- グループブロックにカラムブロックを入れてコンテンツを作る。
- グループブロックの水平スクロールを有効にして、テーブルモードを有効にする。
このようにすれば、横スクロールするテーブルブロックとして使うことができます。

そんなめんどくさいことしなくてもテーブルブロックでいいじゃない?
と思う方もいらっしゃるでしょう。
テーブルブロックとは表現力が段違い
たしかに、シンプルな表を横スクロールしたいならテーブルブロックで十分役に立ちますし、その方が作り方もかんたんです。
テーブルブロックに対して、カラムブロックはさまざまなブロックを組み合わせたコンテンツを持たせることができて、スタイル設定もテーブルブロックよりもはるかに高機能なので、テーブルブロックとは表現力が段違いです。
一例として、この下の方に載せてあるフィットネス料金プランの例をご覧ください。
VK パターンライブラリ からコピペしたものに、VK Blocks のボタンブロックを使って申込みボタンを追加しました。ほとんど手間がかからず、あっという間にできちゃいました😊
テーブルブロックでも HTML と CSS を使ってこの表のようなデザインを作って、さらにボタンを追加することはまったくできないわけではありませんが、すごく作業工数がかかります。
スクロールメッセージも指定できる
デフォルトのスクロールメッセージは「スクロールできます」ですが、このメッセージを変更することができて、メッセージの前後のアイコンも選ぶことができます。

作例:フィットネス料金プラン
VK パターンライブラリの以下のパターンを使いました。
フィットネス料金プラン
https://patterns.vektor-inc.co.jp/vk-patterns/21182/
こちらは無料で使えるパターンです。[2026.2.8 現在]
上記パターンに以下のように手を加えてあります。
- VK Blocks のボタンブロックを使って申込みボタンを追加しました。
- テキストが折り返さないように、グループブロックの追加 CSS クラス に
text-nowrapを指定しました。 - 「人気 No.1」が欠けないように、グループブロックの上パディングを 10px に指定しました。
- 文字とボーダーの隙間を確保するために、4,400円/月の段落の左右パディングを 5px に指定しました。
プラン
ビジター
人気
No.1
スタンダード
プラン
フリー
プラン
入会金
なし
1,100 円
1,100 円
費用
1,320 円 / 1回
4,400 円 / 月
6,600 円 / 月
利用回数
1回
7回 / 月
制限なし
振替え
プラン変更
お申込み
作例:プログラミングスクール_比較表
VK パターンライブラリの以下のパターンを使いました。
プログラミングスクール_比較表
https://patterns.vektor-inc.co.jp/vk-patterns/22558/
こちらはプレミアムパターンで、コピーするには Vektor Passport のライセンスが必要です。[2026.2.8 現在]
上記パターンに以下のように手を加えてあります。
- テキストが折り返さないように、グループブロックの追加 CSS クラス に
text-nowrapを指定しました。 - VK アイコンブロックの上マージン・下マージンを 0 に設定しました。
(スマホで表示するとアイコンの下に余白が生じたため)
Vektor
A社
B社
チャット質問
24時間対応
営業時間内のみ
営業時間内のみ
進行サポート
個別フォローあり
営業時間内のみ
ライブ授業の有無
オンデマンド授業
ポートフォリオ制作
就職サポート付き
任意参加
キャリアサポート
履歴書・面接練習
一部限定
基本なし

