Web-Children > blog > ワードプレス > Gutenberg(ブロックエディター) > ワードプレス ブロックエディターで段組みレイアウトを簡単に作成する方法

ワードプレス ブロックエディターで段組みレイアウトを簡単に作成する方法

ワードプレスのブロックエディターでは、従来のクラシックエディターになかった新しい機能が使えます。その中で、今回はコンテンツ(記事)のレイアウトを簡単に段組み(カラム化)する方法を紹介しましょう。

段組みレイアウト(カラム化)は従来ならばカスタムCSSを使う必要がありましたが、ブロックエディターでは、それが簡単にできるようになったのです。

 

 

前提条件

テーマは、Twenty Seventeenを使用、エディターの編集機能に影響を与えるTinyMCE Advancedなどは何も有効化していない状態です。

ようは、ワードプレスとして、プレーンな状態ですね。当然ですが、WordPressはversion5.0以降でブロックエディター(Gutenberg)が使用できる設定が大前提です。

 

また、ブロックエディターの基本的な使い方については、次の記事を参考にしてください。

参考記事:ワードプレス 初めてのブロックエディター(編集画面の各機能)

参考記事:ワードプレス Gutenberg(ブロックエディター)で記事作成

 

 

段組みレイアウト(カラム化)とは?

段組みレイアウト(カラム化)というのは、2カラムや3カラムなど、コンテンツを2列や3列でレイアウトすることをいいます。

このようなレイアウトは、従来のクラシックエディターの場合は、カスタムCSSを用いてデザインする必要がありました。

 

しかし、ブロックエディターを使用すれば、簡単に設定することができます。

 

 

ワードプレスのブロックエディターで段組みレイアウトをする2つの方法

ブロックエディターで段組みレイアウトの方法は、大きく2つあります。

①”カラム”ブロックを使用する

②”メディアと文章”ブロックを使用する

の2つです。

 

”カラム”ブロックを使用する

この方法では、カラム数を2~6列まで選択できます

 

”メディアと文章”ブロックを使用する

この方法は、画像などのメディアと文章とを2つに並べて表示するのに適しています。ただし、カラム数は2つだけです。

 

それでは、それぞれの手順を以下に紹介していきましょう。

 

 

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

手順の概要

①ブロック一覧から、”カラム”要素を選択する

②カラム数を指定する

③それぞれのカラムの中にコンテンツを入力する(ブロック要素はいろいろ選択できる)

と簡単です。以下に詳細手順を解説します。

 

 

カラムブロックを選択する

ブロック一覧から、『カラム』を選択します。レイアウト要素の中にあります。

すると、ブロックが2カラムに変更されます。

カラムブロックを選択する

 

 

カラム数を変更する

ブロックの一番左にマウスオーバーすると、右のブロックパネルで、カラム数を指定できるようになります。

カラム数は2~6まで選択可能です。下の画像では、例として6カラムの場合を表示していますが、この記事では2カラムのまま解説を進めます。

カラム数を変更する

 

 

左ブロックに画像を挿入する

デフォルトでは左右のブロックともに、段落要素となっています。

今回は、左に画像を挿入するために、左を画像要素に変更しましょう。すると画像の新規追加またはメディアライブラリが選択できるようになります。

左を画像ブロックにする

 

画像を挿入すると、左側のブロックに画像が挿入されます。

また、右のブロックパネルで、画像の代替テキストサイズリンク先カスタムCSSなどが設定できます。画像下にはキャプションを追加することもできます。

 

 

右側ブロックに見出しを入力

右側ブロックにカーソルを置いて入力していきます。

まずは、見出し要素に変更して見出しを入力します。

右側ブロックに見出しを挿入する

 

 

右側ブロックに段落でテキストを入力

見出しを入力してリターンを押すと、次の段落ブロックが表示されます。

そのまま、テキストを入力します。

右側ブロックに段落テキストを入力

 

 

ボタン要素を入力する

段落テキストを入力してリターンを押すと、さらに次のブロックが表示されます。

これをボタン要素に変更してみましょう。ボタン要素は、ブロック一覧のレイアウト要素の中にあります。

ボタン要素を選択する

 

 

ボタン要素を整えて完成

・ボタンのテキスト

・リンク先

・ボタンの色(ブロックパネルで設定)

・ボタンを中央揃え(ブロック上のブロック内ツールで設定)

を設定して完成させます。

ボタンブロックを入力する

 

 

サイトを表示

サイトを表示させてみましょう。

ブログタイトル『段組レイアウトをつくる』の下の記事が、2カラムになっているのがわかります。

サイトを表示

 

 

 

”メディアと文章”ブロックを使用して段組みレイアウトをつくる手順

手順の概要

①ブロック一覧から”メディアと文章”ブロックを選択する

②画像を挿入

③テキストコンテンツを入力

といった簡単な手順です。

 

 

”メディアと文章”ブロックを選択する

ブロック一覧から、”メディアと文章”ブロックを選択します。レイアウト要素の中にあります。

すると、左側にメディア(画像など)の挿入表示、右側にその他のコンテンツ入力を促す画面表示に変わります。

メディアと文章ブロックを使用する

 

 

”メディアと文章”ブロックを完成させる

ブロックへのコンテンツの挿入方法は、”カラム”ブロックと同様です。

左に画像、右に見出し、段落、ボタンを入力して完成させましょう。

メディアと文章ブロックを完成させる

 

 

 

2つの方法のサイト表示比較

ここまでで作成した、”カラム”ブロックと”メディアと文章”ブロックをサイト表示させて比較してみましょう。

 

 

PC表示で比較

上が”カラム”ブロック、下が”メディアと文章”ブロックです。

 

ほぼ同じような表示ですが、”メディアと文章ブロック”のほうが画像の横幅広く設定されているようです。

サイト表示

 

 

 

スマートフォン表示で比較

PC表示ではさほど差が見られませんでしたが、スマホ表示では大きく差がでます。

 

”カラム”ブロックは、自動的に1つ目のカラム(画像)の下に2つ目のカラムが配置される、いわゆるレシポンシブ対応されています。

それに対して、”メディアと文章”ブロックの場合は、2カラムレイアウトのままを維持します。その結果、画像は小さく表示されてしまいます。また、この比較では、”iphone6/7/8Plus”での表示を使用しましたが、それよりも画面幅の狭い、iphone6やiphone5では、横幅が足りずにはみ出してしまうようです。

 

したがって、スマホ対応を考慮すると、”カラム”ブロックを使用するのがよいでしょう。

スマホ表示で比較

 

 

まとめ

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

 

どちらも簡単に段組みレイアウトを作成することができますが、

カラム”ブロックのほうが、

・カラム数を2~6で設定できる(”メディアと文章”ブロックは2カラムのみ)

・レシポンシブ対応している(”メディアと文章”ブロックは2カラムを維持する)

という点で、使いやすいと考えられます。

 

いずれも、従来カスタムCSSでしかできなかったレイアウトが簡単に作成できますので、記事だけでなく、CTAの作成などにも最適なのではないでしょうか。

 

 

 

 

関連記事