カバー Cover

眠る猫は起こすな

と言われても

slug: core/cover

カバー画像(動画)もしくは背景の上にタイトルや文字情報を書くことができる。

インライン設定

ブロックの変換
画像*/動画*/グループ/カラム(*どちらを挿入しているかによる)

配置を変更
左寄せ/右寄せ/幅広/全幅

配置を変更
左寄せ/中央揃え/右寄せ/幅広/全幅

コンテンツの位置
カバーの上に乗るコンテンツの位置を9つから選択(左・中央・右、上・中央・下 それぞれの組み合わせ)

フルハイトを切り替え
おそらく、画面の高さいっぱいにする用途のものだと思われる。

デュオトーンフィルター
影とハイライトのカラーを選んでデュオトーンにする。すご。
(画像にしか適用されないかも?未検証)
https://ja.wordpress.org/2021/05/27/coloring-your-images-with-duotone-filters/

デュオトーンのテスト

カラーフィルター??

置換
背景になるメディアの変更

とんでくるやつ(動画のテスト)

フルハイト指定

詳細設定

間隔
カバー内側にパディング(余白)を設定できる。ボタンで切り替えて、4方向(上・右・下・左)それぞれに値を設定できる。単位は PX / % / EM / REM / VW / VH から選べる。リセット可能。

メディア設定
画像を選んだ場合のみ:
背景を固定(background-attachment の値をfixedに)(背景を固定にしない場合は焦点ピッカーを設定可能)/繰り返し背景(サイズはautoになる模様)
焦点ピッカー:トリミング起点を%で指定可能。デフォルトは中央(左50%、上50%)
メディアをクリアボタン:背景に置いたメディアを削除して背景色のみに

サイズ
カバー画像の最小の高さを変更可能。単位は PX / % / EM / REM / VW / VH から選べる。
https://make.wordpress.org/core/2020/07/27/new-block-tools-on-wordpress-5-5/

オーバーレイ
背景画像にかかるオーバーレイの色ベタを、単色/グラデーションいずれかで設定可能、透過率の調整可能。デュオトーンフィルターの上からもかかる。

高度な設定
HTMLアンカー:ページ内リンク用のアンカー(id属性としてブロックに付与される)
追加CSSクラス:CSSのクラス名(ブロックのclass属性に追加される)を設定できる。半角スペースで区切って複数設定可能。ブロックスタイルで選択したものがある時、そのスタイルのCSSクラスも追加されるので、扱いには注意。