常識を覆す全く新しいカラムブロック

カラムブロック でもあり カードブロックでもある

Grid Column Card ブロックは、名前の通りカラムブロックですが、カードブロックにもなります。

このブロックは VK Blocks Pro に中に入っている「グリッドカラムブロック」「カードブロック」「アイコンカードブロック」「PR ブロック」「PR Contentブロック」の後継ブロックにあたり、あらゆる表示幅で幅広い表現を美しくレイアウトする事が可能になります。

既存の標準ブロックで出来ない事

WordPress標準カラムブロックなどを使ってカードタイプの要素を3列作成すると以下のようになります。

WordPress標準ブロックを使ったレイアウト例

カラムの見出し

これはWordPress標準ブロックでの組み合わせによるレイアウトです。これはWordPress標準ブロックでの組み合わせによるレイアウトです。

カラムの見出し

これはWordPress標準ブロックでの組み合わせによるレイアウトです。

これはWordPress標準ブロックでの組み合わせによるレイアウトです。

カラムの見出し

これはWordPress標準ブロックでの組み合わせによるレイアウトです。

ボタンが揃わない

WordPress標準カラムブロックの場合、カラムの中に画像とボタンを配置して、各カラム内にボタンをもたせたい場合、内容量によってボタンの位置が揃わずガタガタしてしまいます。

VK Blocks Pro のカードブロックはボタンの位置を揃える事はできますが、ボタンごとに文字を変更・指定する事はできませんでした。

画像がカラムに吸着できない

カラム内に余白を指定すると画像もその余白内にしか配置できません。

モバイルでのレイアウトが微妙

画面サイズを狭くして見てください。各カラムはかなり小さい幅まで潰されてしまい、また、下の段に落ちたカラムは上のカラムにひっついてしまいます。

Grid Column Card ブロックで対応した事

以下が Grid Column Card ブロックを使った場合の例です。WordPress標準ブロックでの問題点が解消し、あらゆる画面サイズでよりきれいにレイアウトされる事が確認できると思います。

Grid Column Card ブロックを使ったレイアウト例

画像リンク無し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カードテキストカードテキストカードテキストカードテキストカードテキスト。

画像リンクあり

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

その他の特徴・機能

カラム数ではなく最小幅を指定

グリッドカラムカードは従来のように画面サイズを基準としてカラム数を指定するのではなく、カラムに保持させたい最小幅を指定し、その最小幅を基準に自動レイアウトする新しいカラムブロックです。

極めて少ないCSSでレイアウトされているので、画面サイズ毎に多くのCSSが必要だった従来のグリッドシステムより軽量です。

純粋なカラムブロックとして

グリッドカラムカードは一つのカラム内にヘッダー(画像)エリア、ボディエリア、フッターエリアにわかれていて、ヘッダーには画像ブロックを、フッターにはボタンブロックが配置できるようになっています。

しかしながら、純粋なカラムブロックとして使うなど、用途に応じてヘッダーエリア、フッターエリアを非表示あるいは削除して使用できます

カラム間隔を自由に指定

従来のグリッドカラムブロックと違い、グリッドカラムカードブロックではカラムとカラムの間隔を任意に指定可能です。

画像の比率指定機能

グリッドカラムカードブロックは、従来のように画面サイズ毎に高さを指定したりするのではなく、表示幅が変更しても画像の縦横比を完全に維持します

また、画像の表示比率も簡単に切り替え可能です。比率に応じた画像を用意する必要はありません
※ 1:1 / 4:3 / 16:9 / 2:1 / 黄金比 / 白銀比 を用意

角丸サイズの指定 / 線の色

カラムの角丸の大きさをpxで指定できます。「枠線」をオンにすると線の色を設定できます。

編集ロック機能があります

ブロック個別で値を指定しても、親ブロックや他のブロックからの一括指定でリセットされてしまうため、個別のグリッドカラムカードアイテムブロックについて編集ロック機能があります。必要に応じて「このブロックを親ブロックや他のGrid Column Item ブロックから編集されないようにする」をオンにしてください。

カラム全体にリンクを指定することができます

リンクを指定するには、まず、グリッドカラムカードアイテムを選択してください。

「カラム設定」にリンクURLの入力欄があります。リンクを別ウィンドウで開く設定も可能です。

なお、リンクURLを設定する場合は、グリッドカラムカードアイテム内にリンク要素(テキストやボタン)を配置しないでください。 正しく表示されない場合があります。画像ブロックなどにもリンクが指定されていないか注意してください。

Grid Column Card ブロックで出来るレイアウト例

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキストカードテキスト。

カラムの見出し

カードテキストカードテキストカードテキストカードテキスト

カラムの見出し

カードテキストカードテキストカードテキストカードテキスト

カラムの見出し

カードテキストカードテキストカードテキストカードテキスト

カラムの見出し

カードテキストカードテキストカードテキストカードテキスト

カラムの見出し

カードテキストカードテキストカードテキストカードテキスト

カラムの見出し

カードテキストカードテキストカードテキストカードテキスト