当ページのリンクには広告が含まれています。

AFFINGER6 テーブルブロックの使い方!商品比較と対比表を簡単作成

AFFINGER6 テーブルブロックの使い方

【2024年3月19日更新】記事が読みやすくなるように、全体を調整しました。

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の「テーブルブロックの使い方」を初心者さん向けに解説します。

  • テキスト:テーブル

WordPress標準のブロックエディター機能です。

テーブル(表)が作成作成できるブロックで複数の類似した内容を比較する用途に適した機能ですね。
例えば、商品の比較や機能の違い等に表(テーブルブロック)を使って見易くするという感じです。

テーブルブロックのAFFINGER6オリジナル拡張機能と標準機能を合わせてご紹介します。^^/

この記事でわかること!

  • テキスト:テーブル(テーブルブロック)とは…
  • テーブルブロックの使い方
    1. テーブルブロックの挿入手順
    2. テーブルブロックの設定:Settings
    3. テーブルブロックのカスタマイズイメージ:Settings
    4. ツールバー:表を編集アイコンのドロップダウンメニュー
    5. テーブルブロックの設定:Styles
    6. テーブルブロックのカスタマイズイメージ:Styles
  • テーブルブロックのカスタマイズ(カスタマイザーの設定)
  • AFFINGER6のテーブルブロックで作った!商品比較の参考例
  • まとめ!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

テキスト:テーブル(テーブルブロック)とは…

テキスト:テーブル(テーブルブロック)とは…
WordPressで標準装備されているブロック(コアブロック)で、全テーマ共通のエディター機能です。

「テーブル=表」→ 表が作成できるブロックです。

こんな感じです。綺麗じゃないですか?^^

TABLEBLOCK
CELL-01ABCDEFG
CELL-02HIJKLMNO
AFFINGER6のテーブルブロック(デフォルト)

※ 当サイト専用の色設定が含まれています。

AFFINGER6で使用すると!テーブルブロックの 基本表示パターンは、6種類になります。
(詳しくは後述します)
オリジナ拡張機能も多数あり、綺麗なテーブル(表)が 便利に使えます。

テーブルブロックの使い方

この章では、テーブルブロックの使い方をご紹介します。

テーブルブロックの使い方

  • テーブルブロックの挿入手順
  • テーブルブロックの設定:Settings
  • テーブルブロックのカスタマイズイメージ:Settings
  • ツールバー:テーブルブロックの設定|メニューまとめ
  • テーブルブロックの設定:Styles
  • テーブルブロックのカスタマイズイメージ:Styles

それでは順番に見ていきましょう。

テーブルブロックの挿入手順

※ 作業は 投稿(記事編集画面での作業になります。

基本的なテーブルブロックの挿入手順をご紹介します。

STEP1投稿(記事編集)画面を準備

『WordPress管理>ダッシュボード>投稿>新規投稿を追加』をクリックします。

投稿画面が表示されます。
(編集する場合は、投稿一覧から対象記事を選択してください。)

テーブルブロックを挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿(記事編集)画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

投稿画面:ブロック挿入ツールを切り替え

STEP3ブロックタブメニューから『テーブル』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『テーブル』をクリックして投稿(記事編集)画面に挿入します。

『テーブル』をクリックします。

ブロックタブメニュー:テキスト|テーブル

STEP4表形式データを挿入

投稿(記事編集)画面に以下の『テーブル』作成画面が表示されます。

『カラム数』と『行数』を挿入して『表を作成』をクリックします。

テーブル:カラム数と行数

STEP5テーブルブロック挿入完了

投稿(記事編集)画面に『テーブル』ブロックが挿入されます。

各セルに必要項目を入力して表を完成させます。

テーブル:挿入直後

見出し行の設定や装飾の変更は後述します。

テーブルブロックの設定:Settings

テーブルブロックの設定:Settings メニューの詳細をご紹介します。

メニューの場所は、投稿(記事編集)画面の右側に表示される『設定>ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

投稿画面:設定

ブロックタブメニュー詳細

投稿画面設定:ブロックタブ|テーブルSettings

設定

  • 表のセル幅を固定:『ON/OFF』
  • ヘッダーセクション:『ON/OFF』
  • フッターセクション:『ON/OFF』

カスタマイズイメージはこちら!

1列目の幅

  • 『20%・30%・50%・標準・60%』を選択

2列目の幅

  • 『20%・30%・50%・標準・60%』を選択

スクロール(SP)

  • 横スクロールさせる:『ON/OFF』

高度な設定

  • HTML アンカー:『任意』
  • 追加 CSS クラス:『任意』

※ ヘッダー・フッターの色変更はカスタマイザーで行います。

『WordPress管理>ダッシュボード>外観>カスタマイズ>オプション(その他)>table(表)』

テーブルブロックのカスタマイズイメージ:Settings

『設定』項目をすべて『ON』にした場合 ヘッダーとフッターの表示は以下の様に表示されます。
(デフォルト)

Settings:設定|❶ ❷ ❸

テーブルSettings|設定

『1列目の幅』を30%・『2列目の幅』を20% 設定して見ました。2列以上ある場合、残列は等分されます。

Settings:『1列目の幅』を30%・『2列目の幅』を20%・残列2等分で25%自動振分

テーブルSettings|1・2列目の幅
yajirusi-sita-80x40
プレビュー:テーブルSettings|1・2列目の幅
プレビュー:テーブルSettings|1・2列目の幅

スマホ(SP)の表示を横スクロールさせることができます

Settings:『スクロール(SP)』横スクロールを『ON』

テーブルSettings|スクロール(SP)
yajirusi-sita-80x40
プレビュー:テーブルSettings|スクロール(SP)
プレビュー:テーブルSettings|スクロール(SP)

ツールバー:表を編集アイコンのドロップダウンメニュー

※ 投稿(記事編集)画面での作業になります。

テーブルブロックの領域をクリック(選択)すると以下のようにツールバーが切り替わり、赤枠部分の『表を編集』アイコンが表示されます。『表を編集』アイコンをクリックするとドロップダウンメニューが表示されます。各メニューより、行と列の追加や削除ができます。

ツールバー:テーブルブロック設定

テーブルブロックの設定:Styles

テーブルブロックの設定:Styles メニューの詳細をご紹介します。

メニューの場所は、投稿(記事編集)画面の右側に表示される『設定>ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

投稿画面:設定

スタイルでは 基本表示パターンが、6種類用意されています。

ブロックタブメニュー詳細

投稿画面設定:ブロックタブ|テーブルStyles

スタイル

  • デフォルト
  • ストライプ
  • 中央寄せ
  • ラインなし
  • ラインのみ
  • ラインのみ2

カスタマイスイメージはこちら!

  • テキスト:『ドロップダウンメニューより選択』

    リストブロック:テキスト|ドロップダウンメニュー
  • 背景:『ドロップダウンメニューより選択』

    リストブロック:背景|ドロップダウンメニュー

タイポグラフィ

  • 『ドロップダウンメニューより選択』

    リストブロック:フォントサイズ|ドロップダウンメニュー
  • サイズ:『S・M・L・XL』

サイズ +

  • 『ドロップダウンメニューより選択』

    テーブルブロック:サイズ|ドロップダウンメニュー

テーブルブロックのカスタマイズイメージ:Styles

スタイルで用意されている 基本表示パターンをご紹介します。

テーブルブロックのカスタマイズイメージ:Styles

  • ヘッダー・フッターあり
    • デフォルト
    • ストライプ
    • 中央寄せ
    • ラインなし
    • ラインのみ
    • ラインのみ2
  • ヘッダー・フッターなし
    • ヘッダー未設定で1行目にヘッダーの色設定を反映

デフォルト

Styles:ヘッダー1Styles:ヘッダー2Styles:ヘッダー3
Styles:CELL1-1Styles:CELL1-2Styles:CELL1-3
Styles:CELL2-1Styles:CELL2-2Styles:CELL2-3
Styles:CELL3-1Styles:CELL3-2Styles:CELL3-3
Styles:CELL4-1Styles:CELL4-2Styles:CELL4-3
Styles:フッター1Styles:フッター2Styles:フッター3
Styles:デフォルト

ストライプ

Styles:ヘッダー1Styles:ヘッダー2Styles:ヘッダー3
Styles:CELL1-1Styles:CELL1-2Styles:CELL1-3
Styles:CELL2-1Styles:CELL2-2Styles:CELL2-3
Styles:CELL3-1Styles:CELL3-2Styles:CELL3-3
Styles:CELL4-1Styles:CELL4-2Styles:CELL4-3
Styles:フッター1Styles:フッター2Styles:フッター3
Styles:ストライプ

中央寄せ

Styles:ヘッダー1Styles:ヘッダー2Styles:ヘッダー3
Styles:CELL1-1Styles:CELL1-2Styles:CELL1-3
Styles:CELL2-1Styles:CELL2-2Styles:CELL2-3
Styles:CELL3-1Styles:CELL3-2Styles:CELL3-3
Styles:CELL4-1Styles:CELL4-2Styles:CELL4-3
Styles:フッター1Styles:フッター2Styles:フッター3
Styles:中央寄せ

ラインなし

Styles:ヘッダー1Styles:ヘッダー2Styles:ヘッダー3
Styles:CELL1-1Styles:CELL1-2Styles:CELL1-3
Styles:CELL2-1Styles:CELL2-2Styles:CELL2-3
Styles:CELL3-1Styles:CELL3-2Styles:CELL3-3
Styles:CELL4-1Styles:CELL4-2Styles:CELL4-3
Styles:フッター1Styles:フッター2Styles:フッター3
Styles:ラインなし

ラインのみ

Styles:ヘッダー1Styles:ヘッダー2Styles:ヘッダー3
Styles:CELL1-1Styles:CELL1-2Styles:CELL1-3
Styles:CELL2-1Styles:CELL2-2Styles:CELL2-3
Styles:CELL3-1Styles:CELL3-2Styles:CELL3-3
Styles:CELL4-1Styles:CELL4-2Styles:CELL4-3
Styles:フッター1Styles:フッター2Styles:フッター3
Styles:ラインのみ

ラインのみ2

Styles:ヘッダー1Styles:ヘッダー2Styles:ヘッダー3
Styles:CELL1-1Styles:CELL1-2Styles:CELL1-3
Styles:CELL2-1Styles:CELL2-2Styles:CELL2-3
Styles:CELL3-1Styles:CELL3-2Styles:CELL3-3
Styles:CELL4-1Styles:CELL4-2Styles:CELL4-3
Styles:フッター1Styles:フッター2Styles:フッター3
Styles:ラインのみ2

ヘッダー未設定で1行目にヘッダーの色設定を反映

Styles:CELL1-1Styles:CELL1-2Styles:CELL1-3
Styles:CELL2-1Styles:CELL2-2Styles:CELL2-3
Styles:CELL3-1Styles:CELL3-2Styles:CELL3-3
Styles:CELL4-1Styles:CELL4-2Styles:CELL4-3
Styles:デフォルト(ヘッダー未設定で1行目にヘッダーの色設定を反映)

テーブルブロックのカスタマイズ(カスタマイザーの設定)

カスタマイザーの設定は、すべてのテーブルブロック(表)に影響します。

『WordPress管理>ダッシュボード>外観>カスタマイズ』をクリックします。

WordPress管理:外観:カスタマイズ

カスタマイザーが起動すると以下の画面が表示されます。左から順番にメニューをクリックしていきます。

『オプション(その他)』をクリックします。

カスタマイザー:オプション(その他)

『table(表)』をクリックします。

カスタマイザー:オプション(その他)>table(表)

各詳細項目をクリックして設定します。

カスタマイザー:オプション(その他)>table(表)|詳細

※ 当サイトの設定を表示しています。

記事をたくさん書く前に!
なるべく早い段階で「table(表)」の色を決めると良いかと…

osaboo
osaboo

AFFINGER6のテーブルブロックで作った!商品比較の参考例

これまでご紹介したAFFINGER6のテーブルブロック拡張機能を使って参考例を作ってみました。

インライン画像を取り込み商品を視覚化して 項目毎に評価を「○△×」で表示してみました。リンクはテキストリンクで作成し広告リンクを使えば計測もできます。

「商品比較表」をご覧ください。

インライン画像
商品名
AFFINGER6 テーブルブロックの使い方
商品A
AFFINGER6 リストブロックの使い方
商品B
WordPress:グレーロゴ
商品C
項目1⚪︎
項目2×
リンクosaboo.infoosaboo.infoosaboo.info
総合評価80点40点60点
商品比較表:参考例

クラシックエディターを使うともっと自由に「CELL」内のテキスト装飾が可能ですが…この記事ではブロックエディターでできる範囲にとどめてご紹介しています。


osaboo
osaboo

いろいろ手間がかかるのでテーブルブロックでクラシックエディターは使っていませんが…
手順だけ軽くご紹介しておきますね!

クラシックエディターを使って「CELL」にボタンを挿入すると以下のようになります。

インライン画像
商品名
AFFINGER6 テーブルブロックの使い方
商品A
AFFINGER6 リストブロックの使い方
商品B
WordPress:グレーロゴ
商品C
項目1 ⚪︎
項目2 ×
リンク osaboo.info osaboo.info osaboo.info
総合評価 80点 40点 60点
商品比較表:参考例

クラシックエディターを使って「CELL」にボタン等を挿入する場合をざっくりご紹介します。

手順は以下の通りです。

まず、ブロックエディターで作ったテーブル(表)の領域をクリックします。(どこでもOK)

  • ツールバーの左端『テーブル』アイコンをクリックします。
  • ドロップダウンメニュー『クラシック版の段落』をクリックします。
  • クラシックエディターに切り替わります。→ 対象『CELL』を選択 →『タグ』等を使って『ボタンや装飾テキスト』を挿入します。

❶ ❷ ❸ を処理します。

テーブルブロック:クラシックエディター|ボタン挿入-1
yajirusi-sita-80x40
テーブルブロック:クラシックエディター|ボタン挿入-2

おすすめしませんが…必要な場合はチャレンジしてみるのもありかと?!思います。
テーブルからクラシックで作った方がいいかも…

機能紹介「AFFINGER6の使い方」の関する記事をまとめてみました。

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

まとめ!AFFINGER6 テーブルブロックの使い方!商品比較と対比表を簡単作成

AFFINGER6のテーブルブロックの使い方をご紹介しました。

AFFINGER6のテーブルブロックは凝った装飾はできませんが(ブロックエディターの場合)機能的には十分カッコよく!見やすいと思います。カスタマイザーで色の初期設定ができるので統一化されたスタイルが簡単にできるのは魅力ですね。

基本!は装飾等にあまり凝りすぎないように気をつけましょう。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

-Function AFFINGER
-

PAGE TOP