VK Grid Column Card ブロック β版を配布開始しました

「VK Grid Column Card ブロック」 β版を配布開始しました。このブロックは、指定したカラムの最小幅を維持する全く新しいカラムブロックです。

現在β版につき、Lightning G3 Pro Unit ユーザー限定でプラグインとして配布しています。VWSマイアカウントから ダウンロードしてぜひお試しください。使用感などご意見やご感想については、VWS ユーザーSlackへお気軽にお寄せください。フィードバックをお待ちしています!

インストール・設定手順

VWSマイアカウントから VK Grid Column Card Blockをダウンロード後、ご利用のWordPressのダッシュボードにて【プラグイン】>【新規追加】からインストールして有効化してください。

【設定】>【VK Grid Column Card Block】へ進んでください。

Lightning G3 Pro Unit に付属のライセンスキーと同じものを入力して「保存」をクリックしてください。

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

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

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 ブロックで出来るレイアウト例

テキスト3カラム

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カード線なし

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カード線あり

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カード線あり 画像吸着

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

アイコンカード線なし

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

アイコンカード線あり

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

Lightningならビジネスサイトもブログも簡単に作れます

有効インストール数6万件以上!Lightning は WordPress公式ディレクトリに登録されているテーマです。いかに最短でサイト制作が出来るかという事に重点を置いて開発しています。デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。