ホームページ作成サービスBiNDupでサイト編集の要となるのブロックエディタの変更点についてご紹介しましたが、今回はCSSが設定できるDressの新たなプロパティや、フォームや公開設定などホームページ作成や運用に便利な機能が追加・改修されています。変更箇所を動画とともにピックアップしてご紹介します。
動画で今すぐチェックしたい方はこちらからどうぞ。
これまでの記事はこちらから↓
Dressの変更点
設定済みのセレクタを後から変更
デザインにこだわりたい人に重宝するデザイン管理機能Dress。
一度設定したDressの項目を、プロパティの設定を維持したままセレクタの変更ができるようになります。
装飾しようと思っていた要素が間違っていたり、後からプレーンブロックに設定していたものを目次ブロックに変更したくなったりした場合、今までは設定を１から再度行う必要がありましたが、セレクタの変更のみで済むようになります。
プロパティの新規追加
よりWebデザインの表現の幅を広げられるように、Dressの設定が4つ追加されます。
background-blend-mode
背景設定のオプションに追加されます。
乗算やオーバーレイなど本来画像編集アプリで行うような加工をDressで表現できるようになります。
background-blend-modeの設定の違い。通常（左）・輝度（中央）・オーバーレイ（右）
各設定の効果の違いはこちらもご確認ください。
background-blend-mode – CSS: カスケーディングスタイルシート | MDN
object-fit
高度な設定に項目の一つとして追加されます。
画像や動画といった要素をエリア内でどのように収めるか設定できます。
object-fitの設定の違い。領域を覆う：cover（左）・領域に収める：contain（右）
詳しくはこちらもご覧ください。
object-fit – CSS: カスケーディングスタイルシート | MDN
transform-origin
高度な設定「変形」項目に設定が追加されます。
要素を回転したり変形させたりする際の基準位置を設定できます。
動きの違いはこちらをご確認ください。
transform-origin – CSS: カスケーディングスタイルシート | MDN
flex
高度な設定の「表示形式（display）」に追加されます。
Dressの設定だけで要素の整列や並べ替えが簡単にできるようになります。
flexの詳しい性質についてはこちらを参考にしてみてください。
※設定によっては表示が崩れる可能性がありますので扱いにご注意ください。
お問合せフォームの高さが自動で調整
サイトに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の新機能をもっと見る
記事内の画像は開発中のものです。実際の仕様とは異なる場合があります。
POINT
- Dressに微細なデザインができるプロパティを追加！画像のオーバーレイが便利
- フォームの高さ調整が任意ではなく自動設定に
- 常時SSL設定時のリダイレクト設定が自動で便利に