AFFINGER6 ブログ

【AFFINGER6】ブロックエディタで画像を並べて表示する方法 | カラムブロック

affinger6カラムブロック使用方法

悩んでる人

AFFINGER6のブロックエディタを使っているけど、どうやって写真を2つ並べるのかわからない…

こういった疑問を解決します!

こんにちはTomo Mini Blog管理人のTomo(@tomominiblog)です

ブロックエディタでは基本的に画像は縦にしか並ばないようになっているので、不便だったりしますよね…

そこでこの記事ではAFFINGER6で「テキストや画像を横に並べて表示する方法」を解説していきます

ブロックエディタを使用する場合はAFFINGER6にアップデートすることをおすすめします

AFFIGNER6にまだアップデートしていないという方は、こちらの記事を参考にしてみてください!

稼ぐ」に特化したWodPressテーマはこちら!

AFFINGER6の詳細はこちら

※クリックすると公式HPへ遷移します

結論:カラムブロックを使うことで横並びにできる

女性とスマートフォンのイメージ画像

Gutenberg(ブロックエディタ)において、カラムブロックは『1つのブロックを分割する』役割を持っています

このカラムブロックを使うことによってテキストや画像を横に並べて表示することができます

このカラムブロックでできることは以下のことです

  • 2つの画像を横並びで表示できる
  • 画像+テキストを表示することができる

手順①:カラムブロックを追加する

まずはブロックエディタ内にカラムブロックを追加します

カラムブロックを追加したら、「開始時のパターン」を選択というところでレイアウトを決めることができます

カラムのブロック数は後から追加することもできるので、とりあえず2分割を選んでも大丈夫です

手順②:カラムブロックの中に画像などを追加

次に分割したカラムブロックの中にコンテンツを追加していきます

このコンテンツの中には画像やテキスト、表などさまざまなものを追加することができます

今回は左側に画像、右側にテキストを配置して、画像を解説している状態を作り出したいと思います

プラスのボタンを押して、コンテンツを追加します

文章を追加する場合は段落を選択します。スマホでは縦並びになってしまうので注意。クラシック版の段落を追加しても大丈夫です

ここでコンテンツを挿入する際は、メディアライブラリから挿入しても大丈夫ですし、フリーサイトから引用するのを利用しても大丈夫です

サイズを小さめのものにしておくと、スマホでも分割して表示することができます

カラムブロックのカスタマイズ方法

先ほども述べた通り、カラムブロックは後からでも数を変更することができます

変更をする場合はカラムブロックが全て選択されている状態でなければいけないので、コンテンツの少し下をクリックしてください

これが2つとも選択されている状態↓

センターに配置したい場合

画像とテキストなど異なるものを配置する場合や、画像の縦の大きさが異なる場合にはセンター配置にしてあげると見た目が良くなります

※キャプションで中心がズレるのでスペーサーで微調整する方法もあり

二つとも選択されている状態でツールバーからセンター配置を選択する↓

カラム数を変更したい場合

カラム数を変更したい場合は、二つとも選択されている状態から、右側のブロックの設定にいき、変更することができます

ブロックエディタのカラムブロックでは最大6個まで表示することができます

6個配置した場合↓

カラムブロックの注意点

a man resting at the office
Photo by Thirdman on Pexels.com

画像やテキストを横並びで表示することのできる、便利なカラムブロックですが…

スマートフォンなどサイズが限られているものは、縦並びになってしまうのがほとんどです…

画像のサイズなどを小さくすることで横並びで表示することもできますが、その場合PCでの見た目が悪くなってしまいます…

Tomo

せっかく画像やテキストなどを横並びで表示できるようなブロックがあるのに、スマホで見れないんじゃ意味がないですよね…

今回のまとめ

  • カラムブロックを使うことで画面を分割して表示することができる
  • カラムブロックの中にはテキストや画像を配置できる
  • スマホでは縦並びになってしまうので注意

最後になりますが、もしこの方法を試してもうまく表示されないという方がいらっしゃる場合はコメントなどで連絡いただければすぐに返信します!

ワードプレスでテーマを迷っている方や、まだAFFINGER5のままという方はぜひ以下の記事を参考にしてみてください!

  • この記事を書いた人

Tomo

生粋のApple信者大学生ブロガー。2021年3月よりブログを開設し、Twitterは開始1ヶ月でフォロワー600人。大学では経営学を専攻し。英語学習歴は2年で、海外経験はないが、TOEICの点数は800点台。

-AFFINGER6, ブログ