WordPressブロックエディターのレスポンシブ対応カラムデザイン方法(Gutenberg)

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

Gutenberg はCSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。tableを使ったデザインは比較的容易に作ることができますが、レスポンシブに対応させるには知識も要求されます。

Gutenbergのカラムデザイン

Screenshot of ja.wordpress.org

Gutenberg / グーテンベルグ

テーマによってはカラムデザインのCSSが用意されている場合がありますが、スタイルシートのカスタマイズが必要な場合もあります。 Gutenberg にはデフォルトでカラムデザインが装備されているのでこちらを利用すれば簡単に記事を書きあげることができます。

カラムを利用するには、ブロックの選択から、デザインカラムを選択します。

続いて分割する割合を指定します。指定できる割合は 50% :50% , 30%:70% ,70%:30% , 33%:33%:33% , 25%:50%:25% になっています。

各カラムには、画像や文章を埋め込んでいくことができます。注意点はショートコードなどで、横幅を指定しているものがあるとレイアウトが崩れることもあります。ブラウザの世幅を最小にして確認するかスマートフォン等で表示の確認はしておくべきです。

Gutenberg のメリットとデメリット

「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。」

サポート終了が近くなっていますが、「Gutenberg」への移行率が低くしばらくは「Classic Editor」も利用できそうです。

メリットデメリット
ブロックの種類が多い、カラムを分割することができる、ギャラリーやボタン、ウイジェットなども挿入できる。高度なデザインのページ編集ができる高度なデザインの記事を作るには便利ですが、高機能なことで操作が難しく感じられる
コンテンツの色やサイズを細かく設定できるブロックの生成作業が面倒、記事を書き進めるたびにブロックを選択して生成する手間が発生する
ブロックごとに簡単にコピーしたり入れ替えたりできるクラッシックブロックがビジュアルエディタにしか対応していない
Gutenberg のメリットとデメリット

EmanonはWeb集客に必要な機能を搭載したビジネス用WordPressテーマです。企業サイトやビジネス用メディアブログなどの利用に適しています。

  • 開発・販売元は、株式会社イノ・コード
  • 利用ユーザーは、中小企業・士業・コンサルタント・個人事業主
  • web集客に必要な機能を搭載
  • 用途は、企業サイト・ビジネス用メディアブログ

WordPressを利用したブログマーケティングをされている方やアフィリエイト、企業サイトにおすすめの有料WordPressテーマです。 最新のテーマSTORK19ではブロックエディタ(Gutenberg)にも最適化され、 マニュアルなしでも利用可能なほどシンプルで使いやすいテーマになっています。

  • 開発・販売は、OPENCAGE
  • ブロックエディタ(Gutenberg)に最適化、マニュアルなしでも利用可能なほどシンプル
  • ブログマーケティングが用途