WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
Causes and solutions for abnormal display of Wordpress 5.5 mobile/tablet previews

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

公開日: 使い方など

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

このページを紹介いただいているサイト

 インターネットの世界はネットワークが命。私の拙いページをご紹介いただいているありがたいサイト様へ少しでも恩返しを・・ということでサイトへのリンクを張らせていただきます。ぜひご覧ください。

※Google Analyticsでのリファラアクセスデータを元にリンクさせていただいております(リンクを張っていただいている方でも本ページへアクセスのないサイト様は残念ながら掲載できておりません) ※リンクを張っていただいているサイト様でも長期間本ページへのアクセスがない場合にはリンクを解除させていただく場合があります

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】