AFFINGER6でテーブル（表）作成する方法

この記事ではAFFINGER6でテーブル（表）を作成する方法を初心者向けに解説しています。

また、AFFINGER6を使用していない方でも表の作成方法がわからない初心者の方にもお勧めの記事になっています。

この記事ではAFFINGER6でテーブル（表）を作成する方法を初心者向けに解説しています。また、AFFINGER6を使用していない方でも表の作成方法がわからない初心者の方にもお勧めの記事になっています。

記事にテーブル（表）を挿入する方法

記事にテーブル（表）を挿入する方法はとても簡単です。

テーブル（表）を挿入したい場所でブロックツールから「テーブル」を選択します。

作成したい表のカラム数（列数）と行数を指定して、「表を作成」をクリックすれば表が作成できます。

例えば、カラム数が２で行数が２のテーブル（表）を作成してみると下のようになります。

今は空欄ですが、テーブル（表）の中に文字や数字を入力して完成させていくわけです。

ちなみに、テーブル（表）を作成すると「キャプションを追加」と入力できる欄も一緒に表示されると思います。

キャプションとは簡単な説明文のことで、ここに表の説明文を入力します。（入力しない場合は空白です）

行や列を挿入・削除する方法

テーブル（表）に文字や数字を入力するのは感覚的にできると思うので、表の列や行数を増やしたり削除する方法を説明します。

テーブル（表）を作成して上部メニューの「表の編集」をクリックすると行や列の挿入や削除するメニューを選択することができます。

例えば、削除したい行をクリックして「行を削除」を選択すれば行を削除できます。

表のセル幅を固定する方法

作成した表を選択して右の「表の設定」からセル幅を固定することができます。

セル幅を固定するとこんな感じになります。

商品名	価格	販売会社
お菓子A	１００円	AAAAAAAAAAAA社
お菓子B	２００円	BBBBBBBBBBBBB社

セル幅を固定しない状態だと下のようになります。

商品名	価格	販売会社
お菓子A	１００円	AAAAAAAAAAAA社
お菓子B	２００円	BBBBBBBBBBBBB社

ヘッダーセクションやフッターセクションを追加する

ヘッダーセクションとは１行目に項目を入力するような行を追加する機能で、フッターセクションは表の最後に追加できる機能です。

フッターセクションはあまり使用しないですが、ヘッダーセクションはテーマによってはヘッダーセクションだけ色を変更できたりもするのでよく設定します。

ヘッダーセクションを設定して表を作成した感じが下のようになります。

AFFINGER6ではヘッダーセクションの色などを変更できるので、こんな感じにすることができます。

商品名	価格	販売会社
お菓子A	１００円	A社
お菓子B	２００円	B社

ここまでがワードプレスの初期機能で可能なテーブル（表）を作成する方法です。

AFFINGER6：テーブル（表）の独自編集機能

AFFINGER6では次のようなテーブル編集機能があります。

• 表のスタイル変更
• 特定の行や列・ヘッダーセクションの色を変更
• アイコンの挿入

表のスタイル変更

表を選択して右画面の設定ツールの「スタイル」から表のスタイルを簡単に変更することができます。

変更できるスタイルは６種類です。

• デフォルト
• ストライプ
• スクロール
• 中央寄せ
• ラインのみ
• ラインのみ２

デフォルト

何も変更しないスタイルです。

試しにデフォルトで表を作成してみるとこんな感じになります。

商品名	価格	販売会社
お菓子A	１００円	A社
お菓子B	２００円	B社

ストライプ

行ごとに背景色が表示されます。

商品名	価格	販売会社
お菓子A	１００円	A社
お菓子B	２００円	B社

スクロール

５９９ｐｘ以下の閲覧時に横スクロールが表示されるようになります。

スマートフォンでこの記事をご覧になっているなら、横スクロールが確認できると思います。

商品名	価格	販売会社	販売年月日	ネット購入	支払い方法
お菓子A	１００円	A社	２０２２年１月	〇	クレジットカード
お菓子B	２００円	B社	２０２２年２月	×	－

中央寄せ

セルのテキストが中央に表示されます。

商品名	価格	販売会社
お菓子A	１００円	A社
お菓子B	２００円	B社

ラインのみ

文字通りラインのみの表です。

商品名	価格	販売会社
お菓子A	１００円	A社
お菓子B	２００円	B社

ラインのみ２

１列目だけ背景色が表示されます。

商品名	価格	販売会社
お菓子A	１００円	A社
お菓子B	２００円	B社

特定の行や列・ヘッダーセクションの色を変更

WordPresメニューから「外観」→「カスタマイズ」を選択します。

「オプション（その他）」→「table（表）」を選択します。

次の項目の色を変更することが可能です。

• 表のボーダー色
• 偶数行のセルの色
• 縦一列目の背景色
• 縦一列目の文字色
• ヘッダーセクションの背景色
• ヘッダーセクションの文字色

変更したい項目の色を設定したら「公開」をクリックすれば反映されます。

アイコンの挿入

AFFINGER6では表にアイコンを挿入することもできるので、アイコンを利用すると見やすい表を作成することができます。

例えば、下のような感じです。

	項目①	項目②	項目③
商品A
商品B

アイコンの種類は１００種類以上あります。

アイコンはショートコードにアイコンクラスを指定することで表示することが可能です。

AFFINGER6のマニュアルからアイコンのクラス一覧と表示させる方法も確認できますので確認してみてくださいね。

また、AFFINGER６で使用できるアイコン一覧はこちらからも確認できます。

→　AFFINGER６（アフィンガー６）で使えるアイコン一覧

以上がAFFINGER6でテーブル（表）を作成する方法の解説になります。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6：関連記事