ブロックエディタだと簡単に視差効果を持った画像（Parallax Image）が作れるんですね

視差効果のある画像・・と聞いてピンときた方はあまり多くないかも・・ということで、まずは下の画像をご覧ください

スクロールに合わせて画像が上下に動いて見える・・・不思議な効果、これを視差効果（Parallax）と言います。

この効果を実現するには、文字などが含まれた場所に背景画像を設定し、視差効果を持たせるという祖措置が必要になりますから、

<div style="background-image: url('画像のURL');
height: 350px;
min-height: 200px;
padding: .5%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;">
</div>

というコード（例です）を都度書いて表示する必要がありました。

これがWordPressのブロックエディタ（Gutenberg）では、簡単にできるんです。

ブロックエディタを使い始めて久しい私でも、実は今の今まで知りませんでした。クイックタグで実装するというのはちょっとアレなので、一生懸命ショートコード化していろいろな部分をパラメーターにして渡して・・なんてこと考えてました。

でも、そんなものは不要、本当に簡単に、しかもGutenbergにある機能でできるので、「そんなことできるんだったなぁ」程度に覚えておけば、いざという時に役立つ機能だと思います。

Gutenbergエディタで簡単に視差効果のある画像を作る方法

使うのは、「カバー」ブロックです。背景画像の上に文字などが重ねられるので便利だと使われている方も多いと思います。

その中に、実は視差効果用の設定があります。手順を簡単に説明しますね。

まずは、視差効果を得るため、表示する高さよりも大きな画像を用意してください、表示する高さと実際の画像の高さの差によって、スクロール時の移動量が増減しますから、あまり実画像の高さが高いと目が回るような動きになるので注意してくださいね。

そして通常通りカバーブロックを挿入し、先ほどの画像をアップロードまたはメディアから選んで設定します。

ここからが今回のコツです。

カバー画像設定後はタイトル入力する場所がフォーカスになっているので、一度画面の端の方をクリックして、画像がフォーカスされた状態にします。

↑↑がカバー画像設定時の状態、↓↓が画像を選択した状態です

赤枠にした部分が変わったのがお分かりかと思います。そこにある「固定画像」というのをON(一度クリックして黒い●を右側にする)と・・・・はい、視差効果のある画像の完成です！！

あとは、カバー画像の最小の高さ（表示される画像の高さ）を設定すれば完成です。

「カバー」ブロック内にはタイトルのほか、別のブロックも挿入できるので、画像のみでもいいですし、何か文字を入れてもいいですし、あとはお好みで調整してください。

画像がはみ出してしまう時は

カバーブロックは領域の背景に画像や色を付ける機能。テーマによっては本文幅からはみ出してしまう場合があります。

これを防ぐには、以下のコードをテーマのCSS末尾へ追加します。

/* カバーブロックの画像を本文内に収める */
.wp-block-cover.has-background-dim.has-parallax {
max-width: 95%;
}

ブロックエディタの背景画像で視差効果があったら・・・という標準のclassに対するCSS要素です。

単純に挿入するところ（本文）幅の95%にしなさい！としているだけですので、お使いのテーマに合わせて調整するとよいでしょう。

※それでもテーマによっては・・ということがありますから、最終的には自身のサイトに合わせてどうする？という調整にはなりますので悪しからず。

---

いかがでしたか？？まだまだブロックエディタはちょっと・・・と無理やりClassicエディタプラグインで旧エディタのままという方もいらっしゃるとは思いますが、慣れてしまうと本当に便利ですよ！