Dressの新たなプロパティと細かな改善点

ホームページ作成サービスBiNDupでサイト編集の要となるのブロックエディタの変更点についてご紹介しましたが、今回はCSSが設定できるDressの新たなプロパティや、フォームや公開設定などホームページ作成や運用に便利な機能が追加・改修されています。変更箇所を動画とともにピックアップしてご紹介します。
動画で今すぐチェックしたい方はこちらからどうぞ。

これまでの記事はこちらから↓

動画でわかる、ブロックエディタの改善点〈編集画面編〉

余白やカラム設定が便利に。動画で見るブロックエディタ〈設定画面編〉

Dressの変更点

設定済みのセレクタを後から変更

デザインにこだわりたい人に重宝するデザイン管理機能Dress
一度設定したDressの項目を、プロパティの設定を維持したままセレクタの変更ができるようになります。

装飾しようと思っていた要素が間違っていたり、後からプレーンブロックに設定していたものを目次ブロックに変更したくなったりした場合、今までは設定を1から再度行う必要がありましたが、セレクタの変更のみで済むようになります。

設定済みのセレクタを後から変更

プロパティの新規追加

よりWebデザインの表現の幅を広げられるように、Dressの設定が4つ追加されます。

background-blend-mode

背景設定のオプションに追加されます。
乗算やオーバーレイなど本来画像編集アプリで行うような加工をDressで表現できるようになります。

background-blend-modeの設定画面

background-blend-modeの設定の違い。通常(左)・輝度(中央)・オーバーレイ(右)

background-blend-modeの設定の違い。通常(左)・輝度(中央)・オーバーレイ(右)

各設定の効果の違いはこちらもご確認ください。
background-blend-mode – CSS: カスケーディングスタイルシート | MDN

object-fit

高度な設定に項目の一つとして追加されます。
画像や動画といった要素をエリア内でどのように収めるか設定できます。

object-fitの設定画面

object-fitの設定の違い。領域を覆う:cover(左)・領域に収める:contain(右)

object-fitの設定の違い。領域を覆う:cover(左)・領域に収める:contain(右)

詳しくはこちらもご覧ください。
object-fit – CSS: カスケーディングスタイルシート | MDN

transform-origin

高度な設定「変形」項目に設定が追加されます。
要素を回転したり変形させたりする際の基準位置を設定できます。

動きの違いはこちらをご確認ください。
transform-origin – CSS: カスケーディングスタイルシート | MDN

flex

高度な設定の「表示形式(display)」に追加されます。
Dressの設定だけで要素の整列や並べ替えが簡単にできるようになります。
flexの詳しい性質についてはこちらを参考にしてみてください。

日本語対応!CSS Flexboxのチートシートを作ったので配布します


※設定によっては表示が崩れる可能性がありますので扱いにご注意ください。

お問合せフォームの高さが自動で調整

サイトにSmoothContactのフォームを貼り付けると、フォームの高さを手動で設定(あるいは「サイズを自動調整」にチェック)できましたが、新しいBiNDupでは自動でフォームコンテンツの高さを取得し調整します。
これによりフォーム内でスクロールが発生してしまうということが改善されます。

サイトの設定

サイト運用の面でも使いやすくなりました。

httpsのURLを自動設定

SSLが設定済みであれば、サイトURLにhttpsのURLを自動設定されます。
ドメイン新規取得時にSSLを設定していれば、httpからhttpsへのリダイレクト処理も自動設定されます。

ディレクトリインデックスへのリンクを「/」にするをデフォルトで設定

通常特に設定しなければ「http://www.hogehoge/sample/」のように「/」で終わるURLにアクセスした際、「http://www.hogehoge/index.html」とURLにindex.htmlがついてしまいますが、「http://www.hogehoge/sample/」で表示されるようにデフォルトで設定されます。

動画で詳しくチェック

今回紹介したBiNDupの機能は10月のリリースでバージョンアップ予定です。
動画では、よりわかりやすく解説しているのでぜひチェックしてみてください。

BiNDupの新機能をもっと見る
記事内の画像は開発中のものです。実際の仕様とは異なる場合があります。

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • Dressに微細なデザインができるプロパティを追加!画像のオーバーレイが便利
  • フォームの高さ調整が任意ではなく自動設定に
  • 常時SSL設定時のリダイレクト設定が自動で便利に

RECOMMEND ARTICLE