「カバー」ブロックの背景画像を固定表示する方法

はじめに
完成イメージ
実装方法
さいごに

はじめに

「カバー」ブロックを使用した際、背景に「固定背景」を設定することができます。

この設定では、background-attachment: fixed;とbackground-size: cover;が適用されますが、iOSでは背景が固定されない問題があります。

本スキンでは、iOS端末でbackground-attachment: fixedとbackground-sizeを併用した際に背景画像が正常に固定されない不具合に対し独自のCSS対策を実施し、端末環境に依存しない統一感のあるアピールエリア表示を実現します。

そこで、この問題に対処するために、clip-pathを使用して「カバー」ブロックの背景画像を固定します。

この記事では、この方法について説明します。

完成イメージ

実装方法

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で設定します。
1. 「カバー」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-clipと入力します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.wp-block-cover.my-clip {
  clip-path: inset(0);

  img {
    height: 100svh;
    left: 0;
    object-fit: cover;
    object-position: top;
    position: fixed;
    top: 0;
    width: 100%;
  }
}

さいごに

今回紹介した方法を使えば、iOSでも「カバー」ブロックの背景を固定表示することができます。
clip-pathを活用することで、背景画像をスムーズに固定できるため、モバイルデバイスにおいても意図した通りの表示が可能になります。