WordPress カバーブロックの固定背景が効かない原因はWindowsのアニメーション設定

2021/01/02WordPress本体

気付けばここ数ヶ月更新していなかったWordPressサイトをバージョンアップがてら触ってみたところ色々と改善されてはいるようですね？という事で、いつ頃からか急激に冷めかけていたWordPress熱が少し戻ってきた感じの今日この頃です。

そこで新機能のチェックも兼ねてちょっとしたデモサイトを作成中にカバーブロックを設置してみると、以前も引っかかった「ある現象」が再発…背景固定が効・か・な・い！

すっかり忘れてましたが実はPCを新調する前も同じ状態になって投げっぱなしのままだったこの現象、当エントリーはその解決策の紹介になります。

カバーブロックの固定背景が効かない

カバーブロックで設定した画像を固定背景にすると、スクロール時に画像は背景としてその位置に固定されたまま見出し・段落などのテキストやボタンだけがスクロールするパララックス（厳密にはちょっと違いますが）的な感じがカッコイイんですよね。

設定はこの画面で固定背景のトグルスイッチをオンにするだけです。

• 

ちなみに現物はこんな↓感じです。

なんですが、それがならない…やだなにそれどうなってるの。

という事でまずはデベロッパーツールでCSSを確認しますと

本来ならこうなってるはず。

.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
	background-attachment: fixed;
}

ところがこうなってる、みたいな。

.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
    background-attachment: scroll;
}

そりゃ背景固定出来てないわな…で、よーく見ると更に

@(prefers-reduced-motion: reduce)

みたいなのがついてるー！（ガビーン）

その時はFirefoxの設定なのかな？と思ったのでabout:configでui.prefersReducedMotionとやらをイジってみましたが、やり方が悪かったのか何も変わりませんでした。んじゃFirefoxは悪くない？という事で次はChromeでも確認してみるとやはり状況は変わらず。

そうなるとこれWindowsの設定なの？という事に。

原因はWindowsのアニメーション設定

Windowsの検索窓（何か正式名称があるんだろうか…）に「アニメ」と入れると、システム設定の「Windowsにアニメーションを表示する」が表示されると思うのでそれをクリックします。

• 

設定を見るとオフになってますねぇ…

• 

一体誰がこんな余計な事を…

私です… orz

出来るだけムダなエフェクトは外して少しでもWindowsを快適にしたいという行為が仇になったとそんな感じでしょうか。とりあえずこれをオンに変更します。

あとはブラウザを起動（既に起動済みの場合は再起動）して問題のあったサイトなりページを確認すればこの問題は解消されてると思いますがどうでしょう。あとキャッシュも念の為クリアしておいた方がいいかもしれません。

もしこれで直っていなければ私には他に思い当たる方法は無いのでその時はごめんなさいという事でご容赦いただきたい。

一応これで解決という事で

「Windowsとかよくわからないから買った時のまま使ってます」という方は恐らくこのような状態になる事は無いと思いますが、私のように中途半端にわかってたりわかってなかったりする人や私と違ってちゃんとわかってる方が陥りやすい罠ではないでしょうか。

WordPressがこんな設定入れなきゃいいのに…とは思わなくもないですけど（小声）

それにしてもこれ、私としてはちょっと悩ましいですねぇ…現在使ってるPCは普段使いなら問題無いどころか余裕のスペックはあるはずなので別にオンでも問題は無いと言えば無いんですけど。

そんなわけで何だか微妙にもやもやする結果となりましたが、ひとまずこれにて解決という事でよしとしましょう。