エディターで使える簡単デザイン! – カラムブロックの使い方

2019 7/31
エディターで使える簡単デザイン! – カラムブロックの使い方
記事上のウィジェットエリア

ここでは、SWELLのエディター簡単にで使用できるデザイン装飾機能の一つ、「カラムブロック」について解説していきます。

クラシックエディター・ブロックエディターのどちらからも、簡単に使用できますので、ぜひご活用ください。

目次前広告表示エリア
目次

カラムブロックの紹介

どのようなカラムブロックが使えるのかを実際に表示してみます!

以下、グレーなどの背景色はカラムの中に配置した装飾ボックスによる色です。カラムブロックの機能ではありません。

また、スマホで見たときは最大2列まで維持できます。(デフォルトでは1列となります)

レイアウト一覧

2列のカラムブロック

カラム1

カラム2

2列のカラムブロック(先頭:大)

カラム1(大)

カラム2

2列のカラムブロック(末尾:大)

カラム1

カラム2(大)

3列のカラムブロック

カラム1

カラム2

カラム3

3列のカラムブロック(先頭:大)

カラム1(大)

カラム2

カラム3

3列のカラムブロック(末尾:大)

カラム1

カラム2

カラム3(大)

ブロックエディターでは4列以上も可

カラム1

カラム2

カラム3

カラム4

画像やリストなど、他のブロックも入れることができます

画像
画像とかもいれれるよ
画像
画像とかもいれれるよ

カラム外側のグレーの線枠は、ブロックエディターだと簡単につけることができます。

ブロックエディターでの使い方

WordPressが標準で用意してくれている「カラムブロック」を使用します。

画像

SWELLでは、この標準の「カラムブロック」の機能を強化しています。

カラムブロックを選択し、エディターに配置してみましょう。以下のようなブロックが挿入されるかと思います。

カラムブロックを設置した様子

このように、標準では2列用のカラムブロックが挿入され、左側と右側の2箇所にブロック入力エリアが追加されます。

+マークのブロック追加ボタンは、それらの入力エリアにマウスを合わせると出現します。(画像では、わかりやすいように両方表示させた状態でキャプチャしています。)

カラムブロックを囲んでいる点線のガイド線は、SWELLでつけたものです。

カラムブロックの設定パネルによって、2列を3列に変更したりできます
カラムブロック全体の外側(点線枠あたり)をクリックすると設定パネルが出現します。

少しわかりやすく、カラムブロックにおける各ブロックの配置の様子を色付けしてみました。

カラムブロックの選択エリアのガイド

オレンジのエリアは、各カラムの中に設置されるブロックです。(標準では段落ブロック)

青色のエリアが、カラムブロック全体を選択するときにクリックできるエリアです。
体感的には、下側の方がクリックしやすいです。

上記の青色のエリア付近をクリックすると、エディターの右側にカラムブロックの設定パネルがでてきます。

カラムブロックの設定パネル
カラムブロックの設定パネル
  • 緑の枠で囲んだエリアで、カラム数を設定できます。
  • 青色の枠で囲んだエリアに、SWELL専用の設定項目を並べています。
    • 「カラムのスタイル設定」では、各カラムの外側に線枠のデザインをつけることができ、グレーまたはメインカラーの2色を選べます。
    • 「カラム幅設定」からは、カラムのサイズ比率を変更でき、1番目のカラムを大きくするか、最後のカラムを大きくするかを選ぶことができます。
    • 「スマホでの列数設定」では、スマホで見たときにカラムの横並びを維持するかどうかを設定できます。(標準では1列になり、最大2列まで維持することが可能です。)

クラシックエディターでの使い方

クラシックエディターでは、ツールバーの「特殊パーツ」のドロップダウンメニューからカラムブロックを配置できます。

クラシックエディターでカラムブロックを選択

例えば、「2カラム」から「幅2:1」を選択すると、以下のようなブロックがエディター常に設置されます。

2カラムブロック配置の様子
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次