AFFINGER6のテーブルブロックに関するいろんな設定をまとめました！
テーブルブロックの基本的な使い方についてはこちらの記事でまとめているのでこちらを先にお読みください↓
先に読む【WordPress】テーブルブロックの使い方を解説！ ＞
公式マニュアルも参考に！
テーブルブロック：表(公式マニュアル)※要パスワード
テーブルブロックの色を設定する(カスタマイズ画面の説明)
テーブルブロックの色を変えるときに使うカスタマイズ画面の解説をします。
カスタマイズ画面のテーブルブロックの色の設定場所はこちら↓
各項目の意味を解説。
「カラムを中央配置」設定時は上下中央にする
カラムの配置を変更でカラムを中央配置にしたとき 水平方向↔︎にしか中央寄せになりませんが、ここにチェックを入れると垂直方向↕︎にも中央寄せになります。
ボーダー
ボーダーの色が変わります。
偶数行のセル
偶数行のセルの色が変わります。
あとで紹介する「ストライプスタイル」との兼ね合いに注意
縦一列目
縦一列目(一番左の列)の背景色と文字色が変わります。
ヘッダーセクション
ヘッダーセクションの背景色と文字色が変わります。
ヘッダーセクション未設定時の横一列目に反映する
ここにチェックを入れると、ヘッダーセクションじゃなくても必ず一行目(一番上の横方向)は色が付くようになります。
AFFINGER6のテーブルブロックのスタイル一覧(全13種類)
AFFINGER6に用意された「テーブルブロック」のスタイルを紹介します。スタイルの種類はデフォルトも含めて全6種類です。
デフォルト
デフォルトのスタイル。何も設定しなかったらこれ。
ストライプ
奇数行の色がグレーになる。※カスタマイズで偶数行の色を変えると偶数行も色が変わってしまうので注意！
中央寄せ
(カラムを中央配置にしなくても)各セルが中央寄せになる。
ラインなし
ボーダーが消える。
ラインのみ
縦線が消えて横線のみになる。
ラインのみ2
ラインのみに加えて一番 左のカラム(列)の背景色がグレーになる。
テーブルブロックのスタイルを変える方法
テーブルブロックのスタイルを変更する方法を紹介します。
内容的にはの続きになります。まだ読んでない人は先にこちらをお読みください。
やり方はこちら↓
編集中のテーブルブロックをクリックし、右上の設定ボタン→ブロックパネル→スタイルパネルへと進みます。テーブルブロックのスタイル一覧が出てくるので好きなものを選んでください。
- 編集中のテーブルブロックをクリック
- 右上の 設定ボタンをクリック
- パネルをブロックに切り替える
- パネルをスタイル"に切り替える
- 好きなスタイルを選択する
ここから先はやりたい人だけご自由に。
横スクロールさせる方法【任意】
横に長くなってしまったテーブルは窮屈ですよね。そういう場合はスクロールできるようにすることができます。
こんな感じ↓
| ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ |
| ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ |
| ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ | ああああああああああああああ |
スマホでスクロールさせる方法(第1段階)とスマホに加えてPCでもスクロールさせる方法(第2段階)を紹介します。
第1段階：スマホでスクロールさせる
スマホでテーブルをスクロールさせる方法はこちら。
- 編集中のテーブルブロックをクリック
- 右上の 設定ボタンをクリック①
- パネルをブロックに切り替える②
- 設定パネルのスクロール(SP)、横スクロールさせるのトグルをオンにする③
第2段階：PCでもスクロールさせる
スマホと合わせてPC側でもスクロールさせることができます(PCだけスクロールはできない)。やり方はこちら↓。
- 編集中のテーブルブロックをクリック
- 右上の 設定ボタンをクリック①
- パネルをブロックに切り替える②
- 設定パネルの高度な設定をクリックする③
- 追加 CSS クラスに"pc"と入力する(スペースを入れるのを忘れずに！)④
1列目の幅や2列目の幅を固定する
1列目の幅や2列目の幅を固定することができます。やり方はこちら↓。
- 編集中のテーブルブロックをクリック
- 右上の 設定ボタンをクリック
- パネルをブロックに切り替える
- 設定パネルの1列目の幅、2列目の幅を選択
以上！AFFINGER6のリストブロックに関するいろんな設定をまとめました！参考にいなれば嬉しいです！