グリッド・ブロック は、コーディングなしでマルチカラムレイアウトを作成できる、堅牢なWordPress Gutenbergブロックエディターレイアウトツールです。テキストやメディアを1列に限定するのではなく、行と列の構造化されたグリッドにコンテンツを配置することができます。
WordPressのグリッドブロックを使えば、マガジンスタイルのページやポートフォリオ、ギャラリーなど、コンテンツを並べて追加したいセクションのデザインが簡単になります。今日は WordPressのグリッドブロックの使い方と概要.
美しいテーブルを作る
ブロックエディター付き
WordPressでグリッドブロックを使うには？
それでは、グリッドブロックを追加する手順を順を追って説明しましょう。これらのステップは、初心者や中級者がこのブロックを最大限に活用するのに役立ちます。
しかし、その手順を踏む前に は、あなたの投稿とブロックを使いたいページに行かなければなりません。 その後、以下の手順に従ってください。
グリッド・ブロックの挿入
ブロック追加アイコンをクリック (プラス・アイコン） (1)タイプ "グリッド「検索ボックス内の (2)そして ブロックをクリック それが現れると (3).
コンテンツを挿入する
デフォルトでは、コンテンツ用に2つの列のみが挿入されていることがわかります。コンテンツを挿入するには + アイコン ブロックの中に入ってから、希望のブロックを選択する。
ブロックの右下をクリックして、他のコンテンツやブロックを挿入します。
好きなブロックを挿入できる。私の場合は、画像ブロックを挿入しました。
各ブロックのカラムスペースを設定することができます。
ブロックのカスタマイズ
ブロックのカスタマイズでは、レイアウトのオプションがあります。 (1) 位置 (2).
レイアウトでは グリッド項目の位置.デフォルトのままでもいいし、マニュアルでもいい。
Autoオプションを使用すると、最小列幅を調整することができます。
手動オプションでは、ブロックの列を選択することができます。ブロック内の列数を簡単に調整できます。
次に、グリッドをスティッキーにするかどうかを選択できます。スティッキーにしたい場合は、スティッキーオプションを選択します。
また、スタイル・タブには、ブロックにあらかじめ組み込まれたスタイルがあります。選択して、それが何をするのか見ることができます。以下はそのプレビューです。
カラーオプションを使用して、テキストと背景色をカスタマイズできます。
背景画像オプションでは、ブロックの背景に画像を追加できます。
画像をリセットするには、3つの点をクリックし、すべてをリセットするを選択します。
タイポグラフィでは、フォント、フォントサイズ、体裁、行の高さ、文字間隔、装飾、大文字小文字を設定できる。
寸法はグリッド・ブロックのパディング、マージン、最小高さ、ブロック間隔をカスタマイズできます。
以下、ブロック間隔と最小高さの変更を見てみよう。
最後に、ボーダー＆シャドウオプションで、ブロックのボーダーとボーダー半径を調整できます。
これが、このブロックを使って作ったものの最終デモだ。ベストとは言えないが、このブロックでできることのアイデアを与えてくれる。
WordPressグリッドブロックの概要
WordPressのグリッドブロックとは？
グリッドブロックは、グリッドレイアウト内の他のすべてのブロックを保持するコンテナブロックです。言い換えれば、複数の子ブロック（段落、画像、ボタンなど）を配置できる親ブロックであり、それらを一連の列に配置します。必要に応じて自動的に新しい行を作成します。
グリッドブロックの主な特徴は？
グリッドブロックにはいくつかの便利な機能があり、レイアウトを構築するための多目的なツールとなっています。主な機能をいくつか紹介しましょう：
- 柔軟なカラムレイアウト： グリッドに必要なカラム数を選択できます。グリッドブロックでは、特定のカラム数を設定したり、最小カラム幅に基づいてWordPressが自動的にカラム数を決定したりすることができます。
- レスポンシブデザイン： グリッドブロックに配置されたコンテンツはモバイルフレンドリーです。
- コンテンツの配置と並べ替え：グリッド内でのブロックの配置や並べ替えは簡単です。コンテンツブロックをドラッグ＆ドロップで別の位置に移動させたり、矢印キーを使ってグリッドブロックコンテナ内で上下に移動させることができます。
- カスタム・スタイリング・オプション： セクションの背景色を変更したり、背景画像を追加したり、中のコンテンツのテキスト色を調整したり、タイポグラフィ（フォントサイズ、フォントファミリー）を調整したりすることが一箇所でできます。
- 他のレイアウトブロックとの統合： これにより、以下のことが可能になる。 変える を、標準的なグループ、行、スタック、カバーブロック、あるいは必要に応じて旧来のカラムブロックなど、他のレイアウトブロックに組み込むことができます。
グリッドブロックのツールバー機能とは？
エディターでグリッドブロックを選択すると ブロックツールバー がブロックの上部に表示されます。このツールバーは、一般的なアクションやカスタマイズのためのクイックコントロールを提供します。
- 変身する： グリッドブロックをグループ、行、スタック、カバー、カラムブロックに変換することができます。
- ドラッグハンドル： 6つの点のアイコンは、グリッドブロック全体をドラッグしてページ上の別の位置に移動できます。
- 上下に動く： 上下の矢印ア イ コ ンで、 グ リ ッ ド ブ ロ ッ ク を文書構造の上下に 1 つずつ移動 さ せ る こ と がで き ます。
- アライメント（幅寄せ）： 整列アイコンは、グリッドブロックコンテナの幅の設定を変更することができます。
- その他のオプション 縦に並んだ3つのドットは、追加のブロックオプションのドロップダウンメニューを開きます。
最終的な感想
グリッドブロックは、WordPressのデザインツールキットに追加された素晴らしいブロックです。フレキシブルでマルチカラムなレイアウトを簡単に作成できます。
このブロックを使うことで、あなたのウェブサイトにより魅力的で魅力的なセクションを構築することができます。まとめると、グリッドブロックは1カラム形式から脱却し、すっきりとしたグリッド構造でコンテンツを並べて見せるのに役立ちます。
コメント欄で感想を聞かせてください。また、ソーシャルメディアを使ってお友達とシェアしてください。
続きを読む
