ブログ・アフィリエイト PR

【JIN】WordPress記事をスマホで見ると右に微妙な余白が。全体の横スクロールの解決方法

記事内に商品プロモーションを含む場合があります

WordPress「JINテーマ」を使っているブロガーの私。

2023年2月までずっとクラシックエディタで記事作成していました。

ふと「そろそろブロックエディタ(Gutenberg)に慣れよう」と思い、ブロックエディタでの記事作成。

そして、慣れない操作でようやく完成したブロックエディタでの記事

しかし、投稿した記事をスマホで確認してみると、違和感が。

その違和感とは「記事全体に横スクロールになっている・記事全体の右に少しの余白がある」という問題。

結果から言うと、試行錯誤を重ね問題を発見し、無事に解決できました

今回の私が遭遇した問題は「JINテーマ使用者のみの問題」でした。

本記事では、記事全体の右に出来た余白を解消する方法を解説します。

【不具合の症状】スマホで見ると右に余白が。

【不具合の症状】スマホで見ると右に余白が。

まず、私の不具合が出た時の状況を整理しておきます。

  • WordPressで記事作成
  • 有料テーマ「JIN」を使用
  • ブロックエディタで記事作成
  • JIN独自の装飾を多々使用

そして、不具合の具体的な症状はこんなカンジ。

  • 2023年2月23日に不具合発覚
  • 記事をスマホで見る時だけ不具合
  • 記事全体の右側に少しの余白が付く
  • 横スクロールが常についてしまう
  • 指での縦スクロールで記事を横にぐらつく
  • トップページなどに不具合なし

正直、不具合の根源を探すのに4時間かかってしまった私。

ですが、不具合の根っこを見つけることができたので、本記事で共有しようと思った所存です。

それでは、解決方法を紹介していきます。

【解決方法】右の余白&横スクロールはJINテーマのみ

【解決方法】右の余白&横スクロールはJINテーマのみ

結論から言うと、リッチボタンの装飾が悪さをしていました

JINテーマの装飾「リッチボタン」の「ボタンの種類:光るボタン」にすると、右に余白が生まれてしまったのです。

光るエフェクト効果が、画面の端から端の広範囲に影響しているようで、記事が膨張してしまったのだと考えられます。

なので、解決策はこう。

リッチボタンの「ボタンの種類:フラットボタン」にする。

たったのこれだけ。

あっけない。

4時間も悩んでいて「素人には解決できない複雑な問題なのかぁ」と頭を悩ませていたのに、結果はこんなにも単純。

それでも解決できて良かったです。

他にも解決策も試したが効果なかった【記事右の余白】

他にも解決策も試したが効果なかった【記事右の余白】

余談ですが、私はこんな解決策を試しました。

本記事であなたの不具合が解決できなかった場合、こんな事も試してみて。

※自己責任でお願いします。

  • JINのショートコードを外す
  • アフィリエイトリンク画像を外す
  • JINの「トップに戻るボタン」解除
  • 目次の「目次に戻るボタン」解除
  • 吹き出しアイコンを左右を入れ替える
  • 広告画像のサイズの再確認
  • 画像が大きすぎないか確認
  • JINのアコーディオンボックスを排除

テーマが悪さしているのか、CSSなどのコードが悪さしているのか、1つずつ確認してみてください。

あなたが最近、新しいことをしていたら、そのどこかに問題があるかもしれません。

自分がしてきたことを思い返しながら、問題解決してみてください。

まとめ:今後のJINアップデートで治るかもね

まとめ:今後のJINアップデートで治るかもね

今回の不具合は2023年2月23日に起きたことです。

近い将来では、不具合の改善アップデートが行われて、本記事の意味も無くなるかも。

ですが、本記事の存在が無意味になったくれた方が、JINユーザーの私としても有難いことです。