ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス 段組みレイアウトを作成しよう!(カラムブロック Gutenbergエディター使用)

段組みというのは、2列や3列など複数準備した枠の中に、文字や画像などのコンテンツを並べるレイアウトのことです。

例えば下の例は、3列のカラムです。

段組レイアウトできあがり例

ワードプレスのGutenberg(ブロックエディター)カラムブロックを使えば、このような段組みレイアウトが簡単にできあがります。

本記事では、その方法について紹介します。

※この記事は、2021年7月のワードプレスversion5.8へのアップデートにより、2021年7月にリライトしました。

目次

前提条件

WordPressはversion5.8以降のGutenberg(ブロックエディター)を使用します。

本記事事例ではテーマTwenty Seventeenを使用しますが、他のテーマでも同様です。

また、Gutenbergの基本的な使い方については、次の記事を参考にしてください。

・ブロックエディターの画面の各機能を知る

・ブロックエディターでの基本的な記事の書き方

カラムブロックとは?

冒頭に紹介した段組みレイアウトのコンテンツをもう一度見てみましょう。

段組レイアウトできあがり例

これをブロックの構成で説明すると次のようになります。

カラムブロックの構成

カラムブロックの中に更に3つのカラムがあり、それぞれの中にコンテンツの構成要素である画像ブロックと段落ブロックが入っています。

このようにカラムブロックは、コンテンツの構成要素を段組みレイアウトするためのデザイン用ブロックだといえるでしょう。

カラムブロックには次のようなレイアウト機能があります。

  • 最大6列までのカラム数
  • 各カラムの横幅を自由に設定
    (単位はpx、%、em、rem、vwを選べる)
  • カラム単位で色(テキスト色と背景色)が設定できる
  • レシポンシブ対応としてスマホではカラムが縦に並ぶ

また、カラム内には画像や段落以外のブロックも複数設置可能です。

”カラム”ブロックを使用して段組みレイアウトをつくる手順

手順の概要

手順概要は次の通り、簡単です。

  1. カラムブロックを挿入
  2. カラム数を選択(または設定)する
  3. カラム幅を調整
  4. カラム内にコンテンツを入力

それでは詳細手順を紹介していきます。

詳細手順

①カラムブロックを挿入する

下記画像の通り、①画面左上の+マークをクリック③”カラム”をクリック まで進めます。

カラムブロックの選択方法

ちなみに、上記③のカラムを選択するときにマウスオーバーすると、下記のようにプレビューが表示されます。

カラムブロックのプレビュー

Gutenbergでは各ブロックにマウスオーバーすると、どんなコンテンツを作成できるかの例を表示してくれるわけです。カラムブロックの例では、次のような構成のコンテンツになっています。

カラムブロックのプレビューの解説

手順に戻って、ブロック一覧から”カラム”をクリックしたところから進めましょう。

②カラム数を設定する

本文入力欄内にカラムブロックが挿入され、画面は次のようになっています。

カラムを選択直後

画面右側のパネルには”カラム”と表示されて、今選択されているブロックがカラムブロックであることを示しています。

※もし画面右側にパネルが表示されていない場合は、画面右上の設定(歯車マーク)をクリックして表示させましょう。

情報パネルの表示・非表示切り替え

カラムブロックの中には、大きく2通りの進め方が表示されています。

  • 開始時のパターン
  • スキップ

今回は”開始時のパターン”の中から、3カラムのパターンを選択します。
(”スキップ”を選択すると2カラムを選択したのと同じ結果となるので使うことはないでしょう)

パターンからカラム数を選択

ちなみにカラムパターンの下の数字は、カラム幅の比率を表しています。

すなわち3カラムを選択すると、次のように横幅33%ずつの3つのカラムが挿入されることになります。

3カラム挿入直後

上の図では、3つのカラムのうち左のカラムが青く表示され、このカラムが選択中であることがわかります。

カラムブロックの操作にはリスト表示が便利

カラムブロックは、すでに紹介したように”カラム”の中にさらに複数の”カラム”が配置され、それぞれの中にさらにコンテンツを入力していくこととなります。

このようにブロックの構造が複雑な場合は、リスト表示しながら作業すると便利です。

リスト表示には次のメリットがあるからです。

  • ブロックの階層構造がわかる
  • 現在選択中のブロックがどれかわかる
  • リスト表示内でブロックをクリックして選択できる

画面左上の”アウトライン”をクリックするとリスト表示できます。

リスト表示の手順

上図のリスト表示を見れば、現在カラムブロックの中には3つのカラムがあり、現在1つ目のカラムが選択されていることがわかります。

もし3つ目のカラムを選択したければ、リスト表示で3つ目のカラムをクリックすればよいわけです。

リスト表示で選択カラムを変更

もちろん、本文入力欄で直接一番右のカラムをクリックすれば選択できますが、その親カラムを選択するときなどにリスト表示は便利なのです。

このようにリスト表示を使いながら作業を進めていきます。

カラム数を変更する方法

カラム数を途中で変更するには、個々のカラムではなく、カラム全体(親カラム)を選択します。
するとカラム数の設定が画面右のパネルで可能となります。

カラム数の設定

試しに6カラムに変更してみます。

6カラムに設定

カラム数が、リスト表示と本文入力欄に反映されたのがわかります。

③カラム幅を調整する

カラム幅は、個々のカラムを選択して調整します。

例として、3カラムの1番目のカラムの横幅を60%に設定してみましょう。

1.1番目のカラムを選択

1番目のカラムを選択

2.単位を%表示に変更

カラム幅の単位を変更

3.カラム幅を60%に設定

カラム幅を変更

このように、60:20:20の3カラムレイアウトとなりました。

④カラム内にコンテンツを入力

カラム内のコンテンツ入力は、通常の入力方法(カラムブロックでない場合)と基本的には同じです。

  • +マークをクリックして新しいブロックの要素を選択して入力する。
  • 入力が終われば、カラム内で次のブロックに移りますので、また+マークをクリックして・・と繰り返します。

段落ブロックとして入力の場合は、+マークをクリックせず、直接文字入力していけばよい、という点も、カラム外の通常の入力方法と同じです。

ここで示す例では、一番左のカラムに、1つ目に画像ブロック、その下に段落ブロックで文字入力をしていきます。

1.左カラムの+マークをクリック

カラム内+マークをクリック

2.画像ブロックを選択する

画像ブロックを選択する

3.メディアライブラリを選択して画像を挿入する

メディアライブラリを選択して画像を挿入

4.画像を挿入後

画像を挿入後

画像を挿入すると、次のブロック用の+マークが表示されます。

もちろん、通常の画像ブロックと同様、画像のスタイルを画面右のブロックパネルで設定したり、ブロック内ツールバーで画像の編集をすることもできます。

5.段落ブロックをして文字を入力

段落ブロックへ入力

6.一旦カラムブロックから抜けて確認

一旦カラムブロックから抜けて表示

このように、左のカラムにコンテンツが入りました。

7.中央と右のカラムも同様に作成して仕上げる

3カラム仕上がり

こんな感じで仕上がりました。

リスト表示と合わせて確認するとブロックの構造がよくわかります。

出来上がりとリスト表示

カラムの移動

ちなみに、カラムのツールバーの移動を使えば、左右にカラムを入れ替えることができます

カラムの移動

移動すると次のようにできたりします。

段組レイアウトできあがり例

スマホ表示だと縦に並ぶ

以上でカラムの作成の解説は終了ですが、スマホ表示だとカラムは縦に並びます

スマホ表示ではカラムが縦に並ぶ

まとめ

ブロックエディターで、2カラム以上の段組みレイアウトが簡単にできる”カラム”ブロック使う手順を紹介してきました。

従来カスタムCSSでしかできなかったレイアウトが簡単に作成できますので、投稿や固定ページの中で、コンテンツを充実させるのに便利ではないでしょうか。

私も、ときどきブログ記事の中でも使用しています。

なお、応用編としてGutenberg強化プラグインのカラムブロックとデフォルトのカラムブロックとを比較した記事も参照ください。

このようにGutenberg(ブロックエディター)にはカラムブロックのほか便利なブロックがたくさん準備されています。Gutenbergの習得には次の記事がおすすめです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる