ブロックエディターのレスポンシブ対応カラムデザイン
![Gutenberg はCSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。tableを使ったデザインは比較的容易に作ることができますが、レスポンシブに対応させるには知識も要求されます。](https://kigyoukan.com/wp-content/uploads/2.webp)
レスポンシブ対応カラムデザイン
Gutenberg・カラムデザイン
Gutenberg はCSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。tableを使ったデザインは比較的容易に作ることができますが、レスポンシブに対応させるには知識も要求されます。
テーマによってはカラムデザインのCSSが用意されている場合がありますが、スタイルシートのカスタマイズが必要な場合もあります。 Gutenberg にはデフォルトでカラムデザインが装備されているのでこちらを利用すれば簡単に記事を書きあげることができます。
カラムを利用するには、ブロックの選択から、デザインカラムを選択します。
続いて分割する割合を指定します。指定できる割合は 50% :50% , 30%:70% ,70%:30% , 33%:33%:33% , 25%:50%:25% になっています。
各カラムには、画像や文章を埋め込んでいくことができます。注意点はショートコードなどで、横幅を指定しているものがあるとレイアウトが崩れることもあります。ブラウザの世幅を最小にして確認するかスマートフォン等で表示の確認はしておくべきです。
カラムデザイン例
下記例は2カラムデザインを使っています。50/50で2分割左右に並べて表示しています。注意点としては、PC表示では左右に並べて表示できますが、スマートフォンなど表示領域が狭い場合は表示の順番が上下なることです。
Gutenberg のメリットとデメリット
「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。」
サポート終了が近くなっていますが、「Gutenberg」への移行率が低くしばらくは「Classic Editor」も利用できそうです。
メリット | デメリット |
---|---|
ブロックの種類が多い、カラムを分割することができる、ギャラリーやボタン、ウイジェットなども挿入できる。高度なデザインのページ編集ができる | 高度なデザインの記事を作るには便利ですが、高機能なことで操作が難しく感じられる |
コンテンツの色やサイズを細かく設定できる | ブロックの生成作業が面倒、記事を書き進めるたびにブロックを選択して生成する手間が発生する |
ブロックごとに簡単にコピーしたり入れ替えたりできる | クラッシックブロックがビジュアルエディタにしか対応していない |
WordPressを学習
![]() | ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [ 小川 欣一 ] 価格:3278円 |
![](https://www10.a8.net/0.gif?a8mat=35JUYY+7R8D1E+2HOM+BWGDT)
![]() | 1冊ですべて身につくWordPress入門講座 [ Mana ] 価格:2200円 |
![](https://www14.a8.net/0.gif?a8mat=35JUYY+7R8D1E+2HOM+BWGDT)
![]() | たった1日で基本が身に付く! WordPress 超入門 [改訂2版] [ 佐々木 恵 ] 価格:1980円 |
![](https://www17.a8.net/0.gif?a8mat=35JUYY+7R8D1E+2HOM+BWGDT)
![]() | できるWordPress WordPress Ver.5.x対応 本格ホーム [ 星野邦敏 ] 価格:1628円 |
![](https://www18.a8.net/0.gif?a8mat=35JUYY+7R8D1E+2HOM+BWGDT)