BiNDupでできるリストのアレンジ ─ 交互にデザインを変える方法

BiNDupでできるリストのデザインアレンジ例を紹介します。
リストの項目に対して偶数行と奇数行で交互にスタイルを変更する方法と、それを利用したアレンジ例です。

リストを交互に色分けするデザインは、視認性を上げるためによく使われる手法の一つです。

サンプルサイト

箇条書きリストをアレンジする場合

箇条書きタイプのリスト（マークなし、記号、123...など）の色を変更する方法です。偶数番目の項目だけ背景色を変えてみましょう。

【1】Dressで編集するリストを選択します。詳細デザインの中に「リスト項目（偶数番目）」がある場合はそちらを選択します。
該当の項目がない場合は、「＋」ボタンから追加します（次の手順を参照）

【2】項目を追加する場合は「リスト・テーブル・メニュー項目」のプルダウンから「リスト項目（偶数番目）」を選択してください。

【3】背景色や文字色などを設定します。

完成です。偶数番目だけ色が変わりました。
上記の手順で「リスト項目（奇数番目）」を選択すれば、奇数番目の項目のみデザインを変更することができます。

インデックスタイプのリストをアレンジする場合

続いて、インデント式リスト、テーブル式リスト、ニュース式リストのように、見出しと本文に分かれているタイプのリスト（table構造）の場合です。

テーブル行ごとに色を変える

【1】Dressで編集するリストを選択します。詳細デザインの中に「テーブル行（奇数番目）」「テーブル行（偶数番目）」がある場合はそちらを選択します。
該当の項目がない場合は、「＋」ボタンから追加します（次の手順を参照）

【2】項目を追加する場合は「テーブル行」のプルダウンから「テーブル行（奇数番目）」または「テーブル行（偶数番目）」を選択してください。

【4】それぞれ、背景色などを指定すれば完成です。

セル単位で色を変える

項目の組み合わせ方によっては、見出しセルや本文セルごとに色を変えたりすることもできます。

見出しセルのデザインは、項目を追加する時に「テーブル行」のプルダウンから「テーブル行（奇数番目）」または「テーブル行（偶数番目）」を選択した上で、「リスト・テーブル・メニュー項目」のプルダウンから「テーブルヘッダー」を選択してください。

本文セルのデザインは、項目を追加する時に「テーブル行」のプルダウンから「テーブル行（奇数番目）」または「テーブル行（偶数番目）」を選択した上で、「リスト・テーブル・メニュー項目」のプルダウンから「テーブルコンテンツ」を選択してください。

奇数番目の「テーブルヘッダー」と、偶数番目の「テーブルコンテンツ」に対してだけ背景色を設定すると、以下のようにセルごとに色を変えたデザインの完成です。

その他のアレンジ例

こちらは枠線を左側だけに表示して交互に色を変えた例です。このように最低限のデザインで項目を区分けて、すっきり見せることもできます。

サイトデータ

今回紹介したサンプルのサイトデータを以下より配布します。データを開いて直接、設定方法を見てみて下さいね。