【SWELL】テーブルブロックの使い方【カスタマイズ方法を解説】

こういった悩みにお答えします。

是非、最後までご覧ください。

【SWELL】テーブルブロックの使い方【カスタマイズ方法を解説】

WordPressで用意されているスタイルの種類

スタイルの変更方法

SWELLが用意しているテーブルの種類

テーブルの挿入方法

（ブロック挿入ツールを切り替え）から、「パターン」＞「[SWELL]テーブル」を選択します。

テーブルの使い方を解説するにあたって今回用意した表

※「WordPress」と「[SWELL]テーブル」で用意されている機能を全て盛り込んだ表となっています。

【SWELL】テーブルブロックの使い方【外観のカスタマイズ】

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

（ブロック挿入ツールを切り替え）から、「ブロック」＞「テキスト」＞「テーブル」を選択します。

表形式のデータを挿入します。

 （設定）から、「ブロック」＞「 （設定）」＞「設定」を開きます。

ヘッダーセクションを有効にすると自動的に「テーブルヘッダー設定」へとスクロールします。

 （設定）から、「ブロック」＞「 （設定）」＞「テーブル設定」を開きます。

縦1列目を協調した後、以下を選択します。

 （設定）から、「ブロック」＞「 （設定）」＞「テーブル設定」を開きます。

これで入力した全てのテキストが垂直・水平の中央揃えになります。

 （設定）から、「ブロック」＞「 （スタイル）」＞「スタイル」を開きます。

テーブルの線が全て二重線になり、これで外観は完成です。

【SWELL】テーブルブロックの使い方【内容のカスタマイズ】

ヘッダーセクションの実装

トップツールバーから、「 （さらに表示）」＞「インライン画像」を選択します。

「メディアライブラリ」から画像を選択します。

画像の幅を変更します。

改行してテキストを入力します。

以上を繰り返して全てのヘッダーセッションを完成させます。

縦1列目の実装

テキストを入力して全選択します。

トップツールバーから、「 （テーブル内書式）」＞「リスト風」を選択します。

候補の中から「 チェック」を選択します。

以上を繰り返して縦1列目を完成させます。

5段階評価スターの実装

ショートコードを全てのプランにコピペ後、「 /5」の「 」部分のみ数字を変更します。

[review_stars ○/5]

テキストの入力

テキストを入力します。

インラインボタンの実装

テキストを入力後、全選択します。

トップツールバーから、「 （SWELL装飾）」＞「インラインボタン」を選択します。

候補の中から「ノーマル（青）」を選択します。

「新しいタブで開く」にチェックを入れて完成です。

以上を繰り返して全てのプランにボタンを設置します。

「SWELLボタン」のスタイル（デザイン）変更方法

管理画面メニューから、「SWELL設定」＞「エディター設定」を選択します。

エディター設定から、「ボタン」へと切り替えます。

ここでボタンのスタイルを変更できます。

背景アイコンの実装

プランC

トップツールバーの「 （セル背景）」＞「アイコン」から以下を選択します。

分かりにくいですが画像の右斜め上に「◎」が表示されています。

[review_stars 5/5]

トップツールバーの「 （セル背景）」＞「アイコン」から以下を選択します。

一部制限あり

トップツールバーの「 （セル背景）」＞「アイコン」から以下を選択します。

その後、改行して全選択します。

トップツールバーから、「 （SWELL装飾）」＞「注釈」を選択します。

同様の手順をもう一方にも行います。

分かりにくいですがテキストサイズが小さくなっています。

残りの空セル

トップツールバーの「 （セル背景）」＞「アイコン」から以下を選択します。

以上を繰り返して全ての空セルに背景アイコンを表示させます。

アイコンカラーの変更方法

管理画面メニューから、「SWELL設定」＞「エディター設定」を選択します。

エディター設定から、「カラーセット」を下へスクロールすると「テーブル設定」があります。

ここでアイコンカラーを変更することができます。

セル背景の実装

「一部制限あり」のセルを選択後、トップツールバーから「 （セル背景）」＞「カラー」を選択します。

背景色を指定します。

同様の手順をもう一方にも行います。

ヘッダーラベルの文言を消す

ヘッダーラベルと書かれた文字上で「スペースキー」をクリックすると消えます。

キャプションを追加

「キャプションを追加」に表の説明を入力します。

これで表の完成です。

【SWELL】テーブルブロックの使い方【その他のカスタマイズを5つ紹介】

以下の5つを紹介します。

行の挿入

トップツールバーから、「 （表を編集）」＞「行を下に挿入」を選択します。

行が挿入されました。

※「列」を挿入することもできます。

セル結合

 （設定）から、「ブロック」＞「 （設定）」＞「セルの結合・分割」を開きます。

結合する範囲を選択後、「セルを結合」をクリックします。

セルが結合されました。

アイコンの挿入

セル結合部にテキストを入力します。

トップツールバーから、「 （アイコン）」を選択します。

「アイコンを選択」から「 」を選択します。

アイコンが挿入されました。

テキスト色の変更

テキスト（プランC）を全選択後、トップツールバーから「 （SWELL装飾）」＞「テキスト色」を選択します。

赤で囲っている部分をクリックします。

カラーコードを入力するとテキスト色が変わります。

横スクロールの実装

 （設定）から、「ブロック」＞「 （設定）」＞「横スクロール設定」を開きます。

「横スクロール可能（PC＆SP）」を選択します。

「投稿を表示」または「  （プレビュー）＞ 新しいタブでプレビュー 」からプレビューします。

「スクロールできます 」と表示されており、横スクロールが可能になっています。

今回は以上です。