WordPressで「JINテーマ」を使っているブロガーの私。
2023年2月までずっとクラシックエディタで記事作成していました。
ふと「そろそろブロックエディタ（Gutenberg）に慣れよう」と思い、ブロックエディタでの記事作成。
そして、慣れない操作でようやく完成したブロックエディタでの記事。
しかし、投稿した記事をスマホで確認してみると、違和感が。
その違和感とは「記事全体に横スクロールになっている・記事全体の右に少しの余白がある」という問題。
結果から言うと、試行錯誤を重ね問題を発見し、無事に解決できました。
今回の私が遭遇した問題は「JINテーマ使用者のみの問題」でした。
本記事では、記事全体の右に出来た余白を解消する方法を解説します。
【不具合の症状】スマホで見ると右に余白が。
まず、私の不具合が出た時の状況を整理しておきます。
- WordPressで記事作成
- 有料テーマ「JIN」を使用
- ブロックエディタで記事作成
- JIN独自の装飾を多々使用
そして、不具合の具体的な症状はこんなカンジ。
- 2023年2月23日に不具合発覚
- 記事をスマホで見る時だけ不具合
- 記事全体の右側に少しの余白が付く
- 横スクロールが常についてしまう
- 指での縦スクロールで記事を横にぐらつく
- トップページなどに不具合なし
正直、不具合の根源を探すのに4時間かかってしまった私。
ですが、不具合の根っこを見つけることができたので、本記事で共有しようと思った所存です。
それでは、解決方法を紹介していきます。
【解決方法】右の余白＆横スクロールはJINテーマのみ
結論から言うと、リッチボタンの装飾が悪さをしていました。
JINテーマの装飾「リッチボタン」の「ボタンの種類：光るボタン」にすると、右に余白が生まれてしまったのです。
光るエフェクト効果が、画面の端から端の広範囲に影響しているようで、記事が膨張してしまったのだと考えられます。
なので、解決策はこう。
リッチボタンの「ボタンの種類：フラットボタン」にする。
たったのこれだけ。
あっけない。
4時間も悩んでいて「素人には解決できない複雑な問題なのかぁ」と頭を悩ませていたのに、結果はこんなにも単純。
それでも解決できて良かったです。
他にも解決策も試したが効果なかった【記事右の余白】
余談ですが、私はこんな解決策を試しました。
本記事であなたの不具合が解決できなかった場合、こんな事も試してみて。
※自己責任でお願いします。
- JINのショートコードを外す
- アフィリエイトリンク画像を外す
- JINの「トップに戻るボタン」解除
- 目次の「目次に戻るボタン」解除
- 吹き出しアイコンを左右を入れ替える
- 広告画像のサイズの再確認
- 画像が大きすぎないか確認
- JINのアコーディオンボックスを排除
テーマが悪さしているのか、CSSなどのコードが悪さしているのか、1つずつ確認してみてください。
あなたが最近、新しいことをしていたら、そのどこかに問題があるかもしれません。
自分がしてきたことを思い返しながら、問題解決してみてください。
まとめ：今後のJINアップデートで治るかもね
今回の不具合は2023年2月23日に起きたことです。
近い将来では、不具合の改善アップデートが行われて、本記事の意味も無くなるかも。
ですが、本記事の存在が無意味になったくれた方が、JINユーザーの私としても有難いことです。
