今回はホームページ作成サービス「BiNDup」での、表の扱い方とカスタマイズについてご紹介したいと思います。
通常、BiNDupではテーブルパーツを使って作成しますが、今回は「リスト」機能を使って簡単に作る方法です。デザインのアレンジもできるので覚えておくと便利です。
初級から中級、上級までスキルに合わせてアレンジできる方法も解説するのでサンプルデータとともに参考にしてください。
カスタマイズ例
いくつか表組みのデザインアレンジを用意しましたので参考にしてみてください。
サンプルを見る
表の作り方
BiNDupには一般的な表組の機能(テーブルパーツ)も搭載されていますが、デザインカスタマイズが困難なため、今回はデザインアレンジができる「リスト」機能を利用します。
主に以下の3つが利用できます。
- インデント式
- テーブル式
- ニュース式
![リストの利用](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_02.jpg)
リストの利用
※「マークなし」〜「ⅰⅱⅲ...」もリストですが、上記3つとは構造が異なりますので、今回は取り扱いません。
基本的な使い方
これらのリストを利用するときは、ブロックエディタのメニューから利用したいリストを選択した後、「Tabキー」またはブロックエディタメニュー「アウトデント / インデント」でコンテンツをインデントさせることで階層構造を設定することができます。
※階層構造は最大3層まで。デザインカスタマイズに影響があるのは2層までです。
![コンテンツをインデント](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_03.jpg)
コンテンツをインデント
テーブルデザイン・初級編
主に罫線と背景色でカスタマイズしたシンプルなカスタマイズ。
二重線にしたり罫線の幅や色を変えるだけでも十分にデザインの幅が広がります。
こちらはDressの基本的な使い方だけでできますので、詳しい設定は割愛させていただきます。
![罫線を二重線した表](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_01.jpg)
罫線を二重線した表
![見出しの右側だけ罫線を設置した表](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_04.jpg)
見出しの右側だけ罫線を設置した表
背景色を交互に変更
![カスタマイズ初級編のサンプル](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_05.jpg)
見出しカスタマイズ初級編のサンプル
こちらは一律で背景色を変更するのではなく、コンテンツの奇数番(偶数番)目ごとで背景色を変更する設定です。Dressで項目を選択する時に「テーブル行」から選択できます。
各コンテンツの奇数番(偶数番)目は勝手に判別してくれるので、コンテンツが増えても自動で背景色が設定されるので便利です。デザイン的にも単調になりにくいですし、コンテンツの区切りがわかりやすくなるのでお勧めの設定です。
![コンテンツの偶数番・奇数番目の判別が可能](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_06.jpg)
コンテンツの偶数番・奇数番目の判別が可能
テーブルデザイン・中級編
ここからは「高度な設定」を少し使用しています。
角丸
こちらはそのまま「角丸」設定で変更できそうですが、テーブルの性質からそのままでは角丸の設定ができません。
予め高度な設定から「表示形式」を「ブロック」に変更しておくと角丸の設定が反映されます。
![角丸の表](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_07.jpg)
角丸の表
![高度な設定「表示形式」を「ブロック」に変更](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_08.jpg)
高度な設定「表示形式」を「ブロック」に変更
テーブル風の見出し(擬似テーブルヘッダー)
こちらは小見出しを使って、擬似的にテーブルヘッダーを表現してみました。
![テーブルヘッダー付きの表](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_09.jpg)
テーブルヘッダー付きの表
そのままだとコンテンツの余白でヘッダーに好き間ができてしまうので、ちょっと強引ですが小見出しの「外余白」を負の数値を設定することで余計な余白を消しています。
![テーブルヘッダーを小見出しで表現](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_10.jpg)
テーブルヘッダーを小見出しで表現
![外余白の設定前(上)・設定後(下)](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_11.jpg)
外余白の設定前(左)・設定後(右)
テーブルデザイン・上級編
![見出しを吹き出し化](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_12.jpg)
見出しを吹き出し化
吹き出し部分の「▶︎」は高度な設定の「before要素」「after要素」を利用しています。
before要素で要素を新しく作り、そのボーダー設定で「▶︎」を表現できます。「before要素」「after要素」の基本的な使い方は下記の記事も参考にしてみてください。
見出しのデザインに便利、Dressのbefore要素とafter要素の活用法
![左辺に枠線を設定することで吹き出しを表現](https://bindup.jp/camp/wp-content/uploads/2021/11/31880_13.jpg)
左辺に枠線を設定することで吹き出しを表現
▼の表現については以下も参考にしてみてください。
【CSS】CSSのみで三角と矢印を作る方法
今回解説した設定はサイトデータにまとめてありますので、ダウンロードして設定を確認してみてくださいね。
各設定はブロックDressにしてありますのでお手元のサイトデータでも利用してみてください。
サンプルのブロックDressは全て「テーブル式」リストで作成されています。「インデント式」・「ニュース式」リストでサンプルのブロックDressを利用したい場合は適宜調整してください。
POINT
- テーブルパーツではなくリスト機能を使うとデザインアレンジが可能
- Dressを使うのでスキルに合わせてアレンジするのがおすすめ
- 罫線と背景色をカスタマイズするだけでもサイトに統一感が出る