AFFINGER６のブロックエディタを使っているけど、どうやって写真を２つ並べるのかわからない…
こういった疑問を解決します！
こんにちはTomo Mini Blog管理人のTomo（@tomominiblog）です
ブロックエディタでは基本的に画像は縦にしか並ばないようになっているので、不便だったりしますよね…
そこでこの記事ではAFFINGER６で「テキストや画像を横に並べて表示する方法」を解説していきます
ブロックエディタを使用する場合はAFFINGER６にアップデートすることをおすすめします
AFFIGNER６にまだアップデートしていないという方は、こちらの記事を参考にしてみてください！
「稼ぐ」に特化したWodPressテーマはこちら！
※クリックすると公式HPへ遷移します
目次
結論：カラムブロックを使うことで横並びにできる
Gutenberg（ブロックエディタ）において、カラムブロックは『１つのブロックを分割する』役割を持っています
このカラムブロックを使うことによってテキストや画像を横に並べて表示することができます
このカラムブロックでできることは以下のことです
- ２つの画像を横並びで表示できる
- 画像＋テキストを表示することができる
手順①：カラムブロックを追加する
まずはブロックエディタ内にカラムブロックを追加します
カラムブロックを追加したら、「開始時のパターン」を選択というところでレイアウトを決めることができます
カラムのブロック数は後から追加することもできるので、とりあえず2分割を選んでも大丈夫です
手順②：カラムブロックの中に画像などを追加
次に分割したカラムブロックの中にコンテンツを追加していきます
このコンテンツの中には画像やテキスト、表などさまざまなものを追加することができます
今回は左側に画像、右側にテキストを配置して、画像を解説している状態を作り出したいと思います
プラスのボタンを押して、コンテンツを追加します
文章を追加する場合は段落を選択します。スマホでは縦並びになってしまうので注意。クラシック版の段落を追加しても大丈夫です
ここでコンテンツを挿入する際は、メディアライブラリから挿入しても大丈夫ですし、フリーサイトから引用するのを利用しても大丈夫です
サイズを小さめのものにしておくと、スマホでも分割して表示することができます
カラムブロックのカスタマイズ方法
先ほども述べた通り、カラムブロックは後からでも数を変更することができます
変更をする場合はカラムブロックが全て選択されている状態でなければいけないので、コンテンツの少し下をクリックしてください
これが２つとも選択されている状態↓
センターに配置したい場合
画像とテキストなど異なるものを配置する場合や、画像の縦の大きさが異なる場合にはセンター配置にしてあげると見た目が良くなります
※キャプションで中心がズレるのでスペーサーで微調整する方法もあり
二つとも選択されている状態でツールバーからセンター配置を選択する↓
カラム数を変更したい場合
カラム数を変更したい場合は、二つとも選択されている状態から、右側のブロックの設定にいき、変更することができます
ブロックエディタのカラムブロックでは最大６個まで表示することができます
６個配置した場合↓
カラムブロックの注意点
画像やテキストを横並びで表示することのできる、便利なカラムブロックですが…
スマートフォンなどサイズが限られているものは、縦並びになってしまうのがほとんどです…
画像のサイズなどを小さくすることで横並びで表示することもできますが、その場合PCでの見た目が悪くなってしまいます…
せっかく画像やテキストなどを横並びで表示できるようなブロックがあるのに、スマホで見れないんじゃ意味がないですよね…
今回のまとめ
- カラムブロックを使うことで画面を分割して表示することができる
- カラムブロックの中にはテキストや画像を配置できる
- スマホでは縦並びになってしまうので注意
最後になりますが、もしこの方法を試してもうまく表示されないという方がいらっしゃる場合はコメントなどで連絡いただければすぐに返信します！
ワードプレスでテーマを迷っている方や、まだAFFINGER５のままという方はぜひ以下の記事を参考にしてみてください！
