WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

WordPress 5.5のモバイル・タブレットプレビューの表示がおかしくなる原因と対処方法

公開日:2020(令和2)年8月23日/最終更新日:

WordPressのトラブルシューティング



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

バージョン5.5にしてから追加されたGutenbergエディタでプレビューボタンクリック後の「デスクトップ」「タブレット」「モバイル」の選択。「新しいタブでプレビュー」を選択すると以前のバージョンと同じように別タブでパソコン表示用のプレビューが見れるので、逆に「クリックする回数増えて面倒だなぁ・・」と感じるだけで何も気にしていませんでした。

あるときふと試してみたくなって、切り替えてみたら・・・

え゛え゛~~っ、すごく窓が小さい(高さが細い)んですけど~~、何も見えないんですけど~~

という状態になりました(こんな感じ)。

WordPress 5.5のモバイル・タブレットプレビューの表示がおかしくなる原因と対処方法|Knowledge Base

こんなときはテーマやプラグインのせい?というのは定石の対応ですから、まずはテーマをWordPressデフォルトの「Twenty Twenty」に。

しかし問題は解決せず・・・(この段階でテーマのせいでないことは確信できました)。

ひょっとして??ということで、投稿編集画面下に表示させていた「カスタムフィールド」の欄を非表示にしたら、不具合は解消しました。

そもそもこのプレビュー機能は今表示されているエディタがパソコン表示と一致しているということを前提にして、モバイルだったら?タブレットだったら?を編集画面内で切り替えて表示させる機能らしいです(今までの「プレビュー」とは違うということですネ)。で、本文下にボックス(今回の場合はカスタムフィールドの一覧)があると、それにつぶされて内容がないよってなるみたいです。

まあ、通常の別タブでプレビューする人は使わないだろうから問題ないでしょうけど、便利だからぜひ使いたいという方は以下のようにすれば綺麗に表示されます。

エディタ右の「・・・」が縦に並んだボタンをクリックし、出てきた画面の一番下にある「オプション」をクリックします。

WordPress 5.5のモバイル・タブレットプレビューの表示がおかしくなる原因と対処方法|Knowledge Base

出てきた別窓を一番下までスクロールすると「詳細パネル」という項目がありますので、エディタの本文下に表示されているもののチェックをすべて外します。

WordPress 5.5のモバイル・タブレットプレビューの表示がおかしくなる原因と対処方法|Knowledge Base

※↑の写真の場合、独自のカスタムボックスなどが含まれているので、通常もっと項目は少ないと思います。

そして画面をリロードすればきれいに表示されるようになります

※カスタムフィールドの場合はチェックを外すと「適用してリロード」というボタンが表示されるのでそれをクリックします。


まあ今回の問題は解消されますけど、テーマの機能で必要なボックスとか、プラグインの機能で必要なボックスを非表示にしてまで使うかなぁ・・・というのが個人的な意見ですが、便利!!という方は設定してみてください。