この記事で解決出来る課題は、
- ウェブページのここには画像を置いてその隣には画像の説明文を掲載したい
- ウェブページのここには扱っている商品画像を3つ横に並べたい
- ウェブページの左に表をイメージ図を配置してその隣に文章を置きたい
サービス案内のページでも、ブログの記事でもウェブページを作っていく途中で、ここは１列じゃなくて、２列あるいは、３列で表現したいといった時がある。
ウェブサイト（ホームページ）を自力で作っていく過程で最初にぶつかる“壁”がそんな、文章や画像、表などをウェブページ上で２列、３列で表現することだろう。
こういった“壁”は、“カラム”を理解することで簡単に解決する。
“カラム”を理解すると、テキストと画像をいい感じに横並びに出来る
『カラム』（column）というのは、表でいうところの行と列のうち、“列”のことを指す。
ウェブページで段落や画像などのブロックを追加していくと、上から順番にコンテンツが積み上がっていき、縦に長いウェブページが出来上がる。これは、ウェブページの特性で、縦に積み上がっていくコンテンツを横に並べて表示させたりすることを、レイアウト・デザインを施すというわけだ。
そのレイアウト・デザインの一つの要素に『カラム』がある。
『カラム』を設定することで、左側に文章、右側に画像といった使い方が出来るのだ。
そして、WordPressの新しい編集技術のGutenbergを使えば、その『カラム』を設定するレイアウト・デザインが驚くほど簡単に出来てしまうのだ。
ここからは、そんなGutenbergを使ったレイアウト・デザインの方法について簡単にお伝えしていこう。
1WordPressでカラムを設定するということ
最初にWordPressのGutenbergを使って、『カラム』を設定することで、テキストや画像を横並びにするようなレイアウトが、驚くほど簡単に出来てしまうその理由を少し詳しく説明しておこう。
前述した通り、ウェブサイト（ホームページ）を制作する時にウェブページ上に配置した文章や画像は縦一列に並ぶという特性がある。
なので、文章と画像を横に並べたい時は、このウェブページの特性に逆らって設定してくというわけだ。
それが、WordPressのGutenbergの登場前であれば、C S Sという専門の技術を使って、文章と画像を横並びにしてきたが、これを専門家でない人がやろうとすると結構大変だ。
そこで、Gutenbergという編集機能を使うことで、ブロックを横並びに配置して、その中に文章や画像を置いていくという発想で、誰でも文章と画像を横並びに出来るようになったというわけ。
では、Gutenbergを使ってどのように操作すれば、文章と画像がいい感じで横並びになるのか？図を使って、ここから解説していく。
2Gutenbergでカラムブロックを追加、ページをつくる
では、ここから“カラムブロック”を追加して、横並びのコンテンツを作っていこう。
ページ内に新しく『＋』ボタンから新たにブロックを追加して、“デザイン”の項目から『カラム』を選択（クリック）する。
3２カラムの設定
今回は、“２カラムの設定”をする。
『＋』ボタンから新たにブロックを追加して、“デザイン”の項目から『カラム』を選択すると、幾つかの『カラム』のパターンが表示されるので、今回は『50/50』の２カラムを選択。
ちなみに、この『50/50』というのは、『50％・50％』ということで、横幅を50パーセントずつ、つまり2分割するという意味になる。
42カラムのブロックの挿入
ページ内に２カラムのブロックが出来た。このブロックの中にコンテンツを入れていく。まずは、画面向かって左側のブロックの『＋』マークを選択して、
5『メディア』から『画像』を選択
“案内のパネル”を開き、『メディア』から『画像』を選択。
6画像のブロックに画像を追加
画像のブロックが追加されるので、画像を追加。今回はURLから画像を追加した。
7ページ内に画像が横並びになった
同様に、画面向かって右側のブロックにも画像ブロックを追加して、画像を配置。
これで、画像が横並びになった。
ちなみに
画像にキャプション（画像の下に入れる説明）やaltタグ（画像が表示されないウェブページで画像の説明をするもの）を入れる場合は、挿入した画像をクリックして後からでも編集が出来る。
8新たなブロックを追加して3カラムに設定
2カラムのブロックに画像を2枚横並びに並べたブロックの下に新たにブロックを追加。
今度は、3カラムにしてみる。
93カラムのレイアウト
3カラムのブロックが並んだので、画面向かって左側のブロックに画像を配置。
10画像＋画像＋テーブル
真ん中のブロックにも画像を配置して、画面向かって右側のブロックには、『テーブル』を配置する。
『＋』マークをクリックして、“案内のパネル”を開き『テキスト』から『テーブル』を選択して、テーブルのカラム数と行数を決めて、『表を作成』をクリック。
11テーブルの調整
テーブル（表）の行数が少ない場合は、上部に寄ってしまうので、中心に移動して配置のバランスを取っておく。
これで、3カラムに画像・画像・表といったレイアウトが完成した。
12大きさの違う3カラムを設定する
次は、その下に真ん中が大きめの3カラムを配置してみよう。
ちなみに、作成したテーブルの下に“キャプションを追加”という表記が出るが、これはテーブルの説明になる。入れてもいいし、入れなくても問題ない。入れなくても、実際に公開されるページにこの“キャプションを追加”という文言が表示されることは無い。
13真ん中の写真だけ大きく表示
同じアスペクト比（縦横比）の画像だが、真ん中のカラムが大きいので、配置した画像も大きくなる。
14画像のサイズ調整も感覚的に出来る
画像の端をドラッグしながら、サイズを調整することも可能だ。
15大きさの違う2カラムを設定する
続いて、その下に新たにブロックをつくり、カラムブロックを配置していく。
16向かって左側が大きい66/33のカラム設定
ここには2カラムで、画面向かって左側のブロックを大きく表示する66/33のカラムにする。66/33のカラムというのは、画面向かって左側のブロックに66%のスペースを残りを33%のスペースをあてがうという意味だ。
17『見出し』ブロックを配置
画面向かって左側の66%のブロックには、『見出し』ブロックを配置。
18見出しを入力
配置した『見出し』ブロックに見出しを入力。
19見出しの下には『段落』を
『見出し』の下には、『段落』ブロックを配置して、本文を入力。
20見出しと本文の隣には画像を配置
見出しと本文の隣のブロックには画像を配置したいので、『＋』マークをクリックして画像を配置していく。
21公開して保存
『画像』を配置すると、ブログ記事やニュースサイトなんかでよく見かけるレイアウトになった。
画面向かって右上の『公開』をクリックして、一般公開して編集内容を保存しておこう。
22制作したウェブページを実際に見てみる
ここで、編集画面を出て、公開されている画面をチェックしてみよう。
ページが意図した通りのレイアウトになっていればOKだ。
よく見ると、サイト全体のレイアウトは2カラムに設定されている。これもよく見かけるレイアウトだが、メインとなるコンテンツを表示するスペースが少し狭く感じるので、
23サイトそのもののカラムを変更
今回は、このサイトそのもののレイアウトを2カラムから1カラムに変更してみる。
使っているデザインテーマ（WordPressの基礎となるサイトの型のようなもの）によって、ここの操作は様々だが、編集画面に戻って、サイドバーに『カラムの変更』が出来るような項目があれば、そこで『1カラムに変更する』設定をすることでサイトそのもののカラム数を変更することも出来る。
24サイト全体を１カラムに
編集画面を出て、一般公開の画面を見てみると、サイト全体が１カラムになった。
2566/33の2カラムで作成したブロックも表示
66/33の2カラムで作成したブロックもちゃんと表示されている。
26すべてのブロックが意図した通りに表示
50/50の2カラムも33/33/33の3カラムも、真ん中が大きい3カラムも意図した通りの表示になっている。
以上が、WordPressのブロックエディターである、Gutenbergを使ってウェブページのカラムを組み上げていくもっとも基本的な手順になる。
テクノロジーの進歩によって、これまで専門知識や専門技術が無ければ出来なかったことが出来るようになった。
とは、言っても誰でも簡単に使いこなせるようになるには、相応の知識が無いとなかなか先に進まない。
この記事がそんな知識の助けになってくれるように…
