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

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

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

リストアレンジのサンプルサイト
サンプルサイト

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

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

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

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

【3】背景色や文字色などを設定します。
Dressの編集画面

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

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

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

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

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

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

【4】それぞれ、背景色などを指定すれば完成です。
インデックス式リストのアレンジ例

セル単位で色を変える

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

見出しセルのデザインは、項目を追加する時に「テーブル行」のプルダウンから「テーブル行(奇数番目)」または「テーブル行(偶数番目)」を選択した上で、「リスト・テーブル・メニュー項目」のプルダウンから「テーブルヘッダー」を選択してください。
Dressの編集画面
本文セルのデザインは、項目を追加する時に「テーブル行」のプルダウンから「テーブル行(奇数番目)」または「テーブル行(偶数番目)」を選択した上で、「リスト・テーブル・メニュー項目」のプルダウンから「テーブルコンテンツ」を選択してください。
Dressの編集画面
奇数番目の「テーブルヘッダー」と、偶数番目の「テーブルコンテンツ」に対してだけ背景色を設定すると、以下のようにセルごとに色を変えたデザインの完成です。
テーブル式リストのアレンジ例

その他のアレンジ例

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

サイトデータ

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