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

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

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 / 黄金比 / 白銀比 を用意

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

スタイル(デフォルト)

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(直線)

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(直線 角丸)

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(点線)

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル( Dashed

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル( 二重線

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル( スティッチ

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル( 直線 上下

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(シャドウ

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(Info

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(Success

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(Warning

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

スタイル(Danger

このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。 このグループはテストです。

Mac
Macで外付けHDDにOneDriveを保存する方法。
ワードプレス
ワードプレスで、縦書きの見出しや段落を作る方法。
ワードプレス
LightningでのFont Awesome(webアイコンフォント)の使い方
Mac
Mac mini(M1)でParallels Desktop とWin11(ARM版)の現状-その2
ワードプレス
ブロックエディター:枠線ボックス(vk)で文字配置
ワードプレス
ブロックエディター:カバーの背景画像の切り抜き