【SWELL】リッチカラムの使い方【標準搭載のカラムよりリッチ】

当ページのリンクには広告が含まれています。
初心者ブロガー

WordPressには標準で「カラムブロック」が用意されているけどSWELLが用意している「リッチカラムブロック」の方を使いたいので詳しい使い方を教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • リッチカラムブロックの使い方

是非、最後まで読んでみて下さい。

本記事の内容

【SWELL】リッチカラムブロックの使い方【標準搭載のカラムブロックよりリッチ】

リッチカラムブロックの挿入

管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リッチカラム」を選択します。

カラム項目を追加する方法

方法①

カーソルを乗せると表示される「(カラム項目を追加)」をクリックするとカラム項目が追加されます。

何故だが分かりませんがこの方法で「(カラム項目を追加)」が表示されない場合があります。

方法②

リッチカラムまたはカラム項目を選択後、「(カラム項目を追加)」をクリックするとカラム項目が追加されます。

この方法は確実に「(カラム項目を追加)」が表示されます。

リッチカラムのスタイルを決める

リッチカラムを選択後、(設定)から「ブロック」>「スタイル」を開きます。

リッチカラムを挿入した時点ではデフォルトが選択されています。

例えば、ボーダーを選択するとカラム項目のスタイルがボーダーへと変わります。

リッチカラムの設定

リッチカラムを選択後、(設定)から「ブロック」>「設定」を開きます。

以下の設定について解説していきます。

  • 列数
  • 横スクロール
  • カラム間の余白(MARGIN)

列数

今回は、下記画像の赤枠から列数を以下に設定しました。

  • デスクトップ:8
  • タブレット:4
  • モバイル:2

下記よりデバイスごとの列数の表示を確認することができます。

横スクロール

「横スクロールで表示する」を「有効」にすると「スクロールできます」と表示され、横スクロールが可能になります。

実際に以下で横スクロールを体験することができます。

スクロールできます

カラム間の余白(MARGIN)

デフォルトと設定後を比べるとカラム間の余白が広くなっているのが分かると思います。

デフォルト

  • 左右の余白:1.5rem
  • 上下の余白:1.5rem

設定後

  • 左右の余白:3rem
  • 上下の余白:3rem

カラム項目の設定

カラム項目を選択後、(設定)から「ブロック」>「設定」を開きます。

以下の設定について解説していきます。

  • カラム横幅
  • 表示範囲に合わせて強制的に文字列を改行する

カラム横幅

カラム横幅を下記画像の赤枠から以下に指定しました。

  • デスクトップ:33%
  • タブレット:50%
  • モバイル:100%

編集画面上ではデスクトップの横幅が反映されます。

(個別に指定する)から(同じ値を使用する)に切り替えた後、例えば、デスクトップの横幅を33%に指定すると、残りのタブレットとモバイルも自動で33%に指定されます。

各行のカラム横幅を以下に指定しました。

カラム横幅を指定後の各デバイスでの表示例

表示範囲に合わせて強制的に文字列を改行する

「表示範囲に合わせて強制的に文字列を改行する」を「有効」にすると英単語の途中であっても改行されるようになります。

英単語の場合は、単語の途中で改行されると読みづらいと思うので「無効」の方が良いかもですね。

余白設定

カラム項目を選択後、(設定)から「ブロック」>「余白設定」を開きます。

「カスタムパディングを使用する」を「有効」にするとカラム項目の左右上下の余白を設定できるようになります。

外側と内側の赤枠間(白色の部分)が余白になります。

【SWELL】リッチカラムの使い方【全ブロックが挿入(埋め込み)できる】

ブロック挿入ツールから挿入(埋め込み)できるブロック

挿入(埋め込み)例

各ブロックグループから1ブロックづつ挿入(埋め込み)しました。

スクロールできます

アコーディオン(SWELLブロック)

Accordion Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

テーブル(テキスト)

バージョンジャズ音楽家リリース日
5.2Jaco Pastorius2019年5月7日
5.1Betty Carter2019年2月21日
5.0Bebo Valdes2018年12月6日

画像(メディア)

ボタン(デザイン)

YouTube(埋め込み)

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

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

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容