このサイトでは何を教えてくださるの？
この記事は以下のような方におすすめ！
- ブロックエディタ（Gutenberg）VKブロックPROグリッドカラムカードの使い方がわからない？
- ブロックエディタ（Gutenberg）VKブロックPROグリッドカラムカードの使い方を紹介します。
おすすめ度
図表による使い方
グリッドカラム 挿入
ブロックの挿入は+アイコンをクリックしてブロックを挿入。赤枠の中から「アイコンカード」を選択。
グリッドカラムカード 設定
設定方法は右側のサイドバーに表示されます。
※もし表示されてない場合は画面右上のギアのマークをクリックすると表示されます。
グリッドカラムカード 設定できる内容
グリッドカラムカード
柔軟なカラムレイアウトが作成できます
カラム設定
カラム間の余白
カラム間の縦余白（任意）
全カラム一括指定
カラムの余白
カラムヘッダーメディアエリア
カラムフッターボタンエリア
色設定
カラムの角丸の大きさ
枠線
非表示設定：画面サイズにより設定を表示もしくは未表示の設定が可能
高度な設定：HTMLアンカー（ページ内リンクのみだ歳の設定）、追加CSSのクラス名の指定（.○○の先頭部分の.ドット部分は省略。複数クラスを半角スペースで区切ります。）
グリッドカラムカード 挿入時（メニューバー）の設定
グリッドカラムカード 選択アイコン
グリッドカラムカード現在選択されているブロック名
挿入するブロックを間違えた場合は、他のブロックに変更できる。があまり選択肢の幅はない。よく使うブロックに限られる。その為このブロックを削除して改めて選択し直す必要があります。
スタイルの変更
グリッドカラムカード 移動アイコン
移動：ドラッグによる移動（左）左右移動（右）
グリッドカラムカード ブロックの余白
グリッドカラム ブロックの余白の設定
グリッドカラムカード ブロック編集
グリッドカラムカード設定できる内容
コピー：ブロックのコピー。段落挿入後張り付けるとコピーされる。
複製：ブロックの複製。同じ内容が複製（コピペ）でき上段の作業を1回で行えるメリットがあります。
前に挿入：現在のブロックの前に新たなボックスを挿入することが出来ます。
後に挿入：現在のブロックの後に新たなボックスを挿入することが出来ます。
移動：ブロックの移動
HTMLとして編集
再利用ブロックに追加：該当ブロックを登録して再利用が行えるように登録する。※テーマプラグインにより表示されない場合がある。
グループ化：複数のブロックをまとめる事が出来る。
ブロックを削除
グリッドカラムカードアイテムボディの選択時のメニューバー
グリッドカラムカードアイテムボディの選択時 ブロックの余白
グリッドカラムカードアイテムボディの選択時 ブロックの余白の設定
グリッドカラムカードアイテムボディの選択時 垂直配置変更
各グリッドカラムカードアイテムの垂直配置（上揃え・中央揃え・下揃えの3種類から選択が可能です。
グリッドカラムカードアイテムボディ選択時ブロック編集
グリッドカラムアイテム選択時設定できる内容
コピー：ブロックのコピー。段落挿入後張り付けるとコピーされる。
再利用ブロックに追加：該当ブロックを登録して再利用が行えるように登録する。※テーマプラグインにより表示されない場合がある。
グリッドカラムカード選択時の 見出し
グリッドカラムカード選択時の 見出しアイコン
ブロック変換:
段落
グループ
カラム
引用
見出し
リスト
プルクオート
スタイル変更
グリッドカラムカード選択時の 見出し移動アイコン
移動：ドラッグによる移動（左）左右移動（右）
グリッドカラムカード選択時の 見出し配置
配置を画面いっぱいの「全幅」、コンテンツ幅いっぱいの「幅広」の2種類から選択が可能。
グリッドカラムカード選択時の 見出しの選択
見出しの選択(h1~h6)
グリッドカラムカード選択時 見出しのテキストの配置変更
入力した文字を左寄せ・中央寄せ・右寄せの3種類から選択できます。
グリッドカラムカード 見出し選択時画面サイズごとの改行
テキストの画面サイズごとの改行の設定
グリッドカラムカード 見出し選択時文字装飾＆リンク設定
文字装飾の設定
太字
斜体
リンク設定（URL入力）
新しいタブ
グリッドカラムカード 見出し選択時ブロックツール
ブロックツールの設定
No wrap
インラインコード
インライン文字サイズ
インライン画像
キーボード入力
ハイライト
上付き
下付き
打ち消し
線蛍光マーカー
グリッドカラムカード 見出し選択時ブロック編集
グリッドカラムカード 見出し選択時設定できる内容
コピー：ブロックのコピー。段落挿入後張り付けるとコピーされる。
複製：ブロックの複製。同じ内容が複製（コピペ）でき上段の作業を1回で行えるメリットがあります。
HTMLとして編集
再利用ブロックに追加：該当ブロックを登録して再利用が行えるように登録する。※テーマプラグインにより表示されない場合がある。
ブロックを削除
グリッドカラムカード選択時の 段落
グリッドカラムカード選択時の 段落アイコン
ブロック変換:
段落
グループ
カラム
引用
見出し
リスト
プルクオート
グリッドカラムカード選択時の 段落移動アイコン
移動：ドラッグによる移動（左）左右移動（右）
グリッドカラムカード選択時 段落のテキストの配置変更
入力した文字を左寄せ・中央寄せ・右寄せの3種類から選択できます。
グリッドカラムカード 段落選択時画面サイズごとの改行
テキストの画面サイズごとの改行の設定
グリッドカラムカード 段落選択時文字装飾＆リンク設定
文字装飾の設定
太字
斜体
リンク設定（URL入力）
新しいタブ
グリッドカラムカード 段落選択時ブロックツール
ブロックツールの設定
No wrap
インラインコード
インライン文字サイズ
インライン画像
キーボード入力
ハイライト
上付き
下付き
打ち消し
線蛍光マーカー
グリッドカラムカード 段落選択時ブロック編集
グリッドカラムカード 段落選択時設定できる内容
コピー：ブロックのコピー。段落挿入後張り付けるとコピーされる。
複製：ブロックの複製。同じ内容が複製（コピペ）でき上段の作業を1回で行えるメリットがあります。
HTMLとして編集
再利用ブロックに追加：該当ブロックを登録して再利用が行えるように登録する。※テーマプラグインにより表示されない場合がある。
ブロックを削除
グリッドカラムカード まとめ
グリッドカラムカードはいかがでしたか？実務ではあまり使う頻度は少ないと思いますが、実際に「グリッドカラムカード」を使用すると違った発見があるかもしれませんのでご自身で積極的に「グリッドカラムカード」をお試しください。
PDFファイルによる使い方マニュアル
当サイトをPDFファイルにしました。オフラインでもご利用できますのでダウンロードしてお使いください。
今後の予定（動画による使い方マニュアルの作成）
今後動画による使い方をマニュアル作成を行っています。今後をお楽しみにお待ちください。また、逆引きマニュアルを企画しています。簡単にお話ししますと、やりたいことを画像で一覧表示します。その一覧からユーザーがやりたいパターンなどを選びできればソースをダウンロードできるようにしたいと考えています。まずは動画によるマニュアルの作成を網羅する予定です。
関連記事
ブロックエディタ（Gutenberg）VKブロックPRO ブロックの使い方
ブロックエディタ（Gutenberg）VKブロックPRO スライダーの使い方
ブロックエディタ（Gutenberg）VKブロックPRO アイコンの使い方
お問い合わせ
ご依頼及び業務内容へのご質問などお気軽にお問い合わせください