WordPressブロックエディタのグリッドとカラムの使い方

この記事はプロモーションが含まれています。

ブロックエディタにはレイアウトをデザインするために カラム と グリッドがあります。どちらもブロックを分割してくれますが少し違いがあります。例えばカラムは横に1~3分割になります。4つのブロックに分けて表示したいときは、2カラムを2段作成することになるのです。これに対しグリッドは左から順に右側にブロックを作ってゆくイメージになります。どちらも、画像やテキストを記述できます。写真だけを並べて表示させたいなら ギャラリーを利用されるとよいかもしれません。

グリッド

ブロックエディタ

用途としては、関連する記事などへのリンクブロックを枠ごとに並べたり、商品の紹介写真を複数なべて表示したいときに使えます。

グリッド

✙ クリック > デザイン > グリッド とすすみ枠内に文字や画像などを記述します。枠線など装飾したい場合は、高度な設定に cssスタイルを記述します。

WordPress【Gutenberg】のコードエディタの使い方
Gutenberg は、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやCSSの知識を必要としない、編集方法になっています。

ブロックエディター(Gutenberg)のレスポンシブ対応カラムデザインの使い方
CSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。

WordPressブロックエディター再利用ブロックの使い方
WordPressのデフォルトエディタ Gutenberg には指定したブロックを簡単に違う記事に貼り付けることができるようになっています。

テーマによってはパターンとして提供されている場合もありますので、こちらを利用されると作業が早くなることもあります。レスポンシブ対応なので表示エリアが狭い場合は縦に並ぶこともあるので注意が必要です。下記はパターンを使った例です。

グリッドとは「(鉄)格子」「(窓の)鉄柵」「(地図の)碁盤目」「(高圧線の)送電網」などと訳されます。 日本語でも「グリッド線」として使われます。

カラム

✙ クリック > デザイン > カラムと進み 1~3カラムを選択します。下記は 2カラムの各枠にSimple Blog Card を配置しています。この下に同じようにカラムを表示するには、2カラムを追加します。あまりお勧めではありませんが、カラムの中にカラムを追加することも可能です。

1カラムは複数の段落に1つのcssで対応したいときに便利です。

カラムとは、Web制作におけるヘッダーとフッターを除くメインコンテンツ、サイドバー、サブコンテンツ欄の縦方向の区割りを示すことが多く、ここでのカラムはWordPressコンテンツの縦方向の区割りを示します。

WordPressとは

WordPressは無料で利用できるCMS(Contents Management System)であることから、多くの企業やブロガー、アフェリエイターによって運用されています。特徴の一つにテーマ・テンプレートを切り替えることで簡単にサイトのデザインを変更できることです。なかでも、Wordpress有料テーマはおしゃれでカスタマイズしやすいのが大きなメリットです。 WEBサイト運用するための機能も標準として装備されているので、プラグインの追加をしなくても十分使用することが可能です。

おすすめWordPressテーマ

ザ・トールは、スマートエディターで記事作成、53種類の見出し・498種類のアイコンなど、記事を読みやすく華やかに彩る記事パーツをワンクリックで設置できます。記事パーツのデザイン変更も自由自在。

【THE THOR(ザ・トール)】
THE THOR
ザ・トール

企業サイトやビジネスサイト、オウンドメディアに必要なWeb集客機能と自由度の高いレイアウト機能を搭載しています。見込み客を増やすためにメルマガ登録や資料請求、セミナーに誘導する仕組みがあるWebサイトをWordPressで作りたい企業におすすめです。

個人事業主・中小企業向けWordPress 有料テーマ Emanon
Emanon
Emanon

おすすめの記事