WordPressのブロックエディタでスタイルが表示されない原因と対処法

こんにちは！WordPressテーマ「般若ビルダー」制作・販売者のササメです。

WordPressのブロックエディタで、右サイドバーに表示されるはずの「スタイル」が表示されなくなる（空白、真っ白になる）現象に遭遇しました。上図の左側参照。

この現象は、Google Chromeの検索バーに文字を入力しようとすると、強制的に半角英数になってしまうころから発生するようになりました。検索バーの半角英数は、Chrome最新バージョン: 93.0.4577.63で解消されましたが、スタイルの不具合は解消されませんでした。

おそらく、これはバグというより、ChromeとWordPressの相性の問題なので、今後もChrome側のアップデートを待っても解消されない気がします。

そこで、このスタイルが表示されない現象は何が原因で、どうやれば解決できるのか。そして、今まで以上にインターネッツライフを快適にする方法まで、ここに生々しく記しておきます。

原因はChrome拡張の「Video Speed Controller」

見出しでネタバレしていますが、一応解決までの時系列を書いておきます。

最初はブロックエディタプラグイン「般若ビルダーブロック」の不具合を疑いました。ですが、般若ビルダーブロックを無効化しても、画像ブロックなどデフォルトブロックのスタイルが表示されません。般若ビルダーブロックの問題ではありませんでした。

次に、般若ビルダーブロック以外のプラグインを疑いました。すべてのプラグインを無効化しましたが、改善されませんでした。

「般若ビルダー本体の影響？」と思って、般若ビルダー以外のWordPressテーマでも確認したのですが、やはりスタイルが表示されません。

「プラグインでもテーマでもないとすると、ブラウザ？」ということで、今度はChromeのシークレットモードでWordPressにログインしてみました。

すると、スタイルが表示されました！

つまり、Chrome拡張の何かが原因のようです。拡張機能をひとつずつ無効化して確認していったところ、原因の拡張機能がわかりました。 WEB上の動画の再生速度を変更できる「Video Speed Controller」が原因でした。

動画は2倍速にして時間を節約したい

Video Speed Controllerは、動画の速度変更機能が付いていない動画でも、再生速度を変更できる拡張機能です。ネット上にあるすべてのオンライン動画に対応しています。

私は、YouTubeもテレビ録画も2倍速で再生して時間を節約するのが基本です。なので、速度変更ができない動画に出くわすと時間のロスに感じてしまいます。

特によく出くわすのが、Yahoo!ニュースです。テレビ局のニュース映像付きの記事が配信されることがありますが、通常は速度変更できません。ですが、Video Speed Controllerがあればキーボードの「D」を押すごとに、画面左上の再生速度が0.1倍ずつ上がっていきます。

私は2倍で見ますが、2倍以上にすることもできます。もはやVideo Speed Controllerは生活必需品なので、Video Speed Controllerのない通常速度のスローライフには戻れません。

今回の不具合はWordPressとの相性の問題なので、WordPressユーザー以外には何の影響もありません。なので、Chrome本体や拡張機能側で改善される見込みは薄いです。

そこで、Video Speed Controllerの代わりとなる拡張機能はないのか探し回ったところ、……無事にみつけました！

代替拡張は「Global Speed: ビデオ速度制御」で決まり

みつけたのは、「Global Speed: ビデオ速度制御」です。今までのVideo Speed Controllerは英語のみだったのですが、「Global Speed: ビデオ速度制御」は日本語対応です。

Video Speed Controllerと違って、「個人情報データの収集なし。トラッカーなし」を明確に書いている姿勢も安心で、速効でインストールしました。ブロックエディタのスタイルもバッチリ表示されました。

「Global Speed: ビデオ速度制御」の使い方

使い方は、2パターンあります。

1つは、Video Speed Controllerと同じようにキーボードの「D」を押して0.1倍ずつ上げていくパターン。

もう一つは、拡張アイコンを固定表示しておいて、プリセットされた好きなスピードを選択するパターン。

どちらがラクかは好みの問題かなと思います。どちらの方法も甲乙つけがたいくらいカンタンです。

「Global Speed: ビデオ速度制御」ココがすごい

「Global Speed: ビデオ速度制御」導入のきっかけは、ブロックエディタのスタイルが表示されない現象を解消するためでした。

ですが、今はVideo Speed Controllerより使いやすくて気に入っています。一番のお気に入りは、変更した再生速度がどの動画でも維持されることです。Video Speed Controllerは動画ごとに速度調整する必要がありました。

一方、Global Speed: ビデオ速度制御は、いちど再生速度を変更したら、そのあとに見る動画すべてに同じ再生速度が適用されます。

私の場合、すべてのオンライン動画がデフォルトで2倍速になっています。いちいちサイトごとに変更しないでいいので、とても便利です。

もちろん、速度を戻すのもカンタンです。次の3通りです。

• 拡張の固定アイコンから好きな速度を選択
• キーボードの「A」で0.1倍ずつ遅くする
• キーボードの「S」で1倍に一気に戻す

通常速度に戻すなら、ショートカットキーの「S」が一番カンタンです。私はYouTubeを作業用BGMに使うときは、「S」を押して一瞬で1倍速に戻しています。

というわけで、WordPressのブロックエディタでスタイルが表示されない人は、「Video Speed Controller」を入れていないか、入れていた場合は「Global Speed: ビデオ速度制御」への乗り換えをおすすめします。

ブロックエディタの不具合きっかけで、思わぬ神拡張に出会えました。オンライン動画の再生速度を変える拡張機能を使ったことがない人は、この機会に使ってみてください。

WordPressの管理画面関連のトラブルでは、「WordPress管理画面の更新ボタンが重くなる原因と爆速化する方法が判明」も参考にしてください。