グリッドカラムカード ( Pro版のみ )


  1. 事業案内
  2. WordPress Plugins
  3. VK Blocks
  4. VK Blocks ブロック一覧
  5. グリッドカラムカード ( Pro版のみ )

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

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

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

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

既存の標準ブロックでできないこと

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

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

カラムの見出し

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

カラムの見出し

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

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

カラムの見出し

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

ボタンが揃わない

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

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

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

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

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

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

グリッドカラムカードブロックで対応したこと

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

グリッドカラムカードブロックを使ったレイアウト例

画像リンク無し

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

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

画像リンクあり

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

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

カラムの見出し

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

その他の特徴・機能

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

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

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

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

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

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

カラム間隔を自由に指定

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

画像の比率指定機能

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

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

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

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

編集ロック機能

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

カラム全体にリンクを指定

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

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

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

背景色

単色またはグラデーションを設定できます。

全カラム一括で背景色を設定したい場合は、親の「グリッドカラムカード」を選択します。

対象のカラム(グリッドカラムカードアイテム)を選択した状態であれば、そのカラムにのみ色(グラデーション)を設定できます。

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

テキストのみ

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

ヘッダーメディア・フッターボタン

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラム間の余白0・角丸の大きさ0・カラムの余白0

枠線・ヘッダーメディア・フッターボタン

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

枠線・画像とカラム内の余白なし・ヘッダーメディア・フッターボタン

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

ボディにアイコン追加

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

枠線・ボディにアイコン追加

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

背景にグラデーションを設定

カラムの見出し

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

カラムの見出し

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

カラムの見出し

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

使用したパターン

グリッドカラムカードブロックを使ったレイアウト例 – VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「グリッドカラムカードブロックを使ったレイアウト例」のパターンです。

スタンダードプラン

週1回ほどご利用の方向け

月額 4,400(税込み)

人気!

https://patterns.vektor-inc.co.jp/vk-patterns/price_card/
PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。