EditorsKitで、ブロックエディターの画像や背景を斜めに切り抜き

ブロックエディターで画像を配置する場合、デザイン上いろいろな形で切り抜くことがあります。今回は、EditorsKitで、ブロックエディターの画像や背景を斜めに切り抜く方法を紹介します。

今回のDEMOは、JAZZ LIVEのLPです。

カバーや画像を斜めに切り抜いています。

右上り

タイトルのカバーブロックに画像を挿入し、右サイドバーのブロック＞画像＞スタイルのDiagonalをクリックします。右上りの斜めに切り抜かれます。

左上り

カラムに画像を挿入し、ブロック＞画像＞設定＞アスペクト比をワイド16:9に設定します。ブロック＞画像＞スタイルのInverted Diagonalをクリックします。左上りの斜めに切り抜かれます。

同様にすべての画像、カバーブロックに設定して行きます。これで完成です。

以上で今回の説明は終了です。EditorsKitは、その他、グループ化したものにリンクを付けたり、いろいろな機能がついているので有効化しておくと便利です。