解決する課題は、
- ウェブページのここには画像を置いてその隣には画像の説明文を掲載したい
- ウェブページのここには扱っている商品画像を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を使ってウェブページのカラムを組み上げていく、もっとも基本的な手順になります。
テクノロジーの進歩によって、これまで専門知識や専門技術が無ければできなかったことが、できるようになりました。
とはいえ、誰でも簡単に使いこなせるようになるためには、相応の知識が無いとなかなか先に進めません。
この記事が、そんな知識の助けになってくれることを願っています。
