MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

【SWELLブロックエディタ使い方2】テーブル、画像、カラム

この記事では、SWELLブロックエディタの以下の3つのブロックをご紹介します。

  • テーブル
  • 画像
  • カラム

こちらはSWELLの独自ブロックではなく「共通ブロック」になりますが、SWELL独自の設定が加えられているのでご紹介します。

共通ブロックにも、SWELL独自の設定がいっぱい!

目次

「テーブル」ブロック|SWELLエディタ

ここでは、「テーブル」ブロックのSWELL独自の設定について解説します。

(テーブルブロックの基本的な操作については、テーブル(表)Cocoon編を参照)

以下が「テーブル」ブロックのSWELL独自の設定になります。

SWELLテーブルブロックの設定画面
1列目の td を th 風に左の列を、見出し風の外観にするかどうか。
(この表ではONになっているので、左の列が色付けされています)
スマホで横並びに表示する通常横並びの項目を、1行ずつ縦並びに表示する。
各列で最低限維持する幅入力文字が極端に短いと(例:〇、×など)列幅が狭くなってしまうことがあるため、最低何パーセントの幅を維持するか設定できる。
横スクロール設定表が横に広い場合、スクロールするかどうかを設定する。スマホだけでなくPCもスクロール設定可能。
テーブルの横幅「横スクロール可能」に設定すると、テーブルの横幅を設定できるようになります。
1列目を左端に固定する横にスクロールしたときに、左端の列を固定するかどうか。
横スクロールを選択した場合にのみ表示されます。
テーブルヘッダーの固定表の一番上の行を固定するかどうか。表が縦に長くなってもヘッダー項目が固定されて見やすくなります。(横スクロールを可能にした場合は、固定できません)。

SWELLのテーブルブロックで特に便利なのが、以下の項目です。

  • 横スクロール設定
  • 1列目を左端に固定する
  • テーブルヘッダーの固定 (横スクロールと併用不可)

横スクロール設定」では、スマホやPCの表を横にスクロールするように設定できますので、表が横に長くなってしまっても、見やすく表示できます。

また、「テーブルヘッダーの固定」でヘッダーを固定しておくと、表が長くなってしまっても、項目名が分かるので見やすくなります(ただし横スクロールとの併用はできません)。

 関連記事

「画像」ブロック|SWELLエディタ

「画像」ブロックにも、SWELL独自の設定が追加されています。

SWELL画像ブロックの設定画面

SWELLの独自設定では、1つ一つの画像に異なる装飾を施したり、画像サイズを変更したりできます

個別に枠を付けたり、影を付けたりできるので便利です。

Macのブラウザ風やデスクトップ風など、SWELLにしかない面白い装飾もあります。

装飾なし
角丸
枠あり
影あり
フォトフレーム風
ブラウザ風
デスクトップ風

「カラム」ブロック|SWELLエディタ

SWELLの「カラム」ブロックでは、下図のような独自設定が追加されています。

SWELLカラムブロックの設定画面

SWELLの独自設定で特に便利なのが、「スマホでの列数設定」です。

通常のWordPress設定では、スマホで列を1列しか表示できませんが、SWELLでは2列表示を選択できます。写真などを2列に並べたいときに大変便利です。

SWELL画像ブロック、スマホで1列と2列の比較

上図のようなカラムの設定画面を表示をしたい場合は、左下の階層の部分で「カラム」の一番上の階層を選択します(下図参照)。

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

 関連記事

よかったらシェアしてね!
目次
閉じる