新登場!新実装のパーツでデザイン性アップ【アルバムブロック編】

新登場!新実装のパーツでデザイン性アップ【アルバムブロック編】

POINT

  • アルバムブロックにDressを適用するだけ
  • キレイに見せるには、アルバムの画像サイズを揃えるのが望ましい
  • アルバムのデザインは、サイトのコンセプトや雰囲気によって使い分けると良い

先日、ブロックのデザインを手軽に変更できる、ブロックDressの提供についてお伝えしましたが、
今回はその中でも、アルバムブロックについてもう少し詳しくお伝えしたいと思います。

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

ブロックDressの概要と使い方

使い方はとても簡単!
デザインを変更したいブロックのブロックデザイン(ブロックDress)を変更するだけ
ブロック単位のDressで使える、タブやアルバムのデザインを提供!

ブロックDressの選択画面

※画面は開発中です

色変更も簡単

提供されるブロックDressのテンプレート(ブロックDressテーマ)にはあらかじめDressカラーが設定されているので、サイトへの調整も簡単です。メインカラー、サブカラー4、5が初期設定されています。

ブロックDressに設定されたDressカラー

あらかじめDressカラーが設定されていれば、サイトで使用している色に置きかわります。

アルバムブロックの新デザイン一覧とおすすめの使い方

フォトフレーム

写真をフチあり印刷したような、画像に白枠のついたデザイン。

こんなサイトにおすすめ!

フチがあることで画像一つ一つが独立して引き立つので、画像をしっかり見せたいポートフォリオサイトやブログなどにおすすめ!

ラウンド/サークル

画像を丸く切り抜いたデザイン。

ラウンドのデザインに加えて、マウスオーバーで画像が傾く動きのあるデザイン。

こんなサイトにおすすめ!

丸みが出て柔らかい雰囲気が出るので、女性や子供向けの商品、サービスサイトなどに。

ショートコメント

マウスオーバーで画像の下にコメントが表示されるデザイン。

こんなサイトにおすすめ!

他のアルバムブロックに比べ控えめにコメントが表示されるので、少しクールな印象に。コーポレートサイトの実績などに。

アスキュー

傾いた配置と、マウスオーバーのギミックで動きのあるデザイン。

こんなサイトにおすすめ!

配置の段階で動きがあるので、ポップな雰囲気のサイトに!

利用上の注意点

ラウンド、サークルはDressで画像を丸くする設定をしていますが、綺麗な円にするには正方形の画像を使用しましょう。
また、基本的にはカラム数を1段で使用するのではなく、分割して使うことをお勧めします。

カラム1段で使用した時と画像サイズがバラバラの時の違い

カラム1段で使用した時と画像サイズがバラバラの時の例


実装まではもう間もなくです!利用できそうなシーンがあればぜひ使ってみてください。

Dressでできることを詳しく見る

関連記事

【BiNDup最新テンプレート】心地よく動いてクリックを促す。アレンジ術もご紹介
【BiNDup最新テンプレート】心地よく動いてクリックを促す。アレンジ術もご紹介

新たに搭載するホームページ作成サービス「BiNDup」の追加テンプレートSiteBoxより、デザインのポイントやおすすめのアレンジ方法をご紹介!新機能のカルーセルやシャッターを採用しているほか、予約サイトのテンプレートも含まれているのでおすすめです。

クリックしやすくなる!複数の要素を含んだカラム全体をリンクにする設定方法
クリックしやすくなる!複数の要素を含んだカラム全体をリンクにする設定方法

ノーコードCMS「BiNDup」を使う上で活用している、実用的なカスタマイズ・テクニック第4弾です。今回は、「複数の要素を含んだカラム全体をリンクにする設定方法」について解説します。設定できなかった方にはBiNDupのサイトデータを用意しているのでご安心を!