カバーブロックは全幅で背景に画像を入れたり、テキストとか色々使えて便利で使い所の多いブロックだと思います。
カバーブロック背景画像の表示オプションにはオーバーレイとかパディングとかは有るのですが 切り抜き は無かったので出来ないか試してみました。
カバーブロックの背景画像を丸く切り抜くには
元のカバー
作り方
下記のCSSを、カスタマイズ→追加CSS または(Lightningの場合)VK All in One Expansion Unit →カスタム CSS にCSSを追記します。
.my_round.wp-block-cover{
border-radius :50%;
overflow:hidden;
display:grid !important;
min-height:auto;
height:calc(100px + 20vw);
width:calc(100px + 20vw);
}
カバーブロックの高度な設定 → 追加 CSS クラス に my_round wp-block-cover を記入します
※高度な設定→追加 CSS クラスの場合、複数のクラス指定は . を抜いて半角スペースで区切ります。
丸で切抜いたカバー
キレイに丸の切り抜きができました。少しCSSを弄れば大きさとか形とかも変えられそうです♪
この方法は(株)ベクトルの「VWSオンライン勉強会 #032 Lightningで使える便利なブロック徹底解説」に出た質問に対して、開発者の石川さんが答えていた物です。
自分のような独学アマチュアは、大変勉強になりました!
少し宣伝になりますが自分の知る限り、(株)ベクトルさんはWordPressのテーマやプラグインの開発に一番積極的な会社だと思います。
テーマやプラグインの更新頻度がハンパないというか、、、それもバグ修正よりも機能追加のほうが多い印象です ^^;)
備忘録でした