ブロック単位のDressで使える、タブやアルバムのデザインを提供!

BiNDupのDressは、ページ全体のデザインを管理する他に、ブロック単位で部分的にデザインを調整することもできます。Dressテンプレートに追加予定のブロック用のDressを提供するため制作中の一部をご紹介します。

デザインパーツが増えるDressテンプレートを制作中

BiNDupでデザインを編集する「Dress」には、大きく分けて2つの使い方があります。
基本的な使い方はページ全体のデザインを管理することですが、ブロック単位で個別にDressをあてがうこともできます。ブロック単位のDress(以下ブロックDress)は部分的にデザインを調整したい時に便利です。
ブロック単位のDressで使える、タブやアルバムのデザインを提供!

ブロックDressは、ブロックエディタの設定にある「ブロックデザイン」で設定します。
デフォルトで表示されている「なし」「White」「Black」以外にも、「その他のDress」から個別に適用したいDressを指定できます。

ブロック単位のDressで使える、タブやアルバムのデザインを提供!
このブロックDressとして使えるDressテンプレートを追加することで、アルバムやタブのデザインを増やしたいと思い、現在制作中です。
今回は制作中のブロックDressを使用例とともに紹介します。

ブロックDressの活用方法

BiNDupのテンプレートに適用されているDressには全てのパーツのデザインが含まれており、自分でコンテンツを追加したりしても統一されたデザインでサイトを作成することができます。
ブロックDressは、更にプラスして、部分的にアクセントを取り入れたい時などに活用できます。

こちらがテンプレートから作成したままのページで、以下がブロックDressを組み合わせたページです。
ブロックDressを使ったサイト
ブロックDressを使ったサイト

ブロックDress使用箇所をいくつか紹介します。

現在制作中のブロックDressには、対象になるパーツのデザインのみが設定されています。アコーディオン用のブロックDressであれば、アコーディオンブロックのデザインのみが変わりますので、このようにテンプレートなどと組み合わせて使うとよいでしょう。
アコーディオンのデザイン例

他にもアルバムブロックの雰囲気を変えてみたり、目立たせたいブロックにフレームを追加したりできます。
ブロック単位のDressで使える、タブやアルバムのデザインを提供!
ブロック単位のDressで使える、タブやアルバムのデザインを提供!

※ ページDressとの組み合わせによっては、ブロックDressのデザインが設定通りに反映されないこともあります。
※ ブロックDressのDressカラーは、ページDressで設定されたDressカラーを参照します。ページDressのDressカラーの組み合わせによっては意図した表示にならないことがあります。

制作中のブロックDress

上記で紹介した以外のブロックDressも準備中ですので、一部ですが紹介します。

ブロック単位のDressで使える、タブやアルバムのデザインを提供!

フレームを追加できるDressは、シャドウタイプや角丸タイプも

ブロック単位のDressで使える、タブやアルバムのデザインを提供!

アルバムブロック用のブロックDress

ブロック単位のDressで使える、タブやアルバムのデザインを提供!

タブブロック用のブロックDress

ブロック単位のDressで使える、タブやアルバムのデザインを提供!

アコーディオンブロック用のブロックDress

実装は初夏の予定です。今しばらくお待ちください。
※ 本記事で紹介したブロックDressのデザインや仕様は変更になる可能性があります。

無料でBiNDupを使ってみよう