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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球