スマートフォン画面で左に寄る表示崩れの不具合の対処方法 Affinger5ではなくプラグインRinkerが原因

Macの画面とスマホサイトの両方を確認している人ってどれくらいいるんでしょうね？

時々自分の作成したサイトをチェックしています。

ふと見るとスマホサイトの表示がずれていることに気づきました。

色々調べて見ましたが不具合の原因を特定できず。

当ブログサイトのWordPressテーマの不具合を疑いました。

しかしグーグル検索して見ても同じような悩みを抱え、解決したサイトが見つからりませんでした。

後述しますが、WordPressテーマ 「WING（AFFINGER5）」の不具合ではなく、使用していたプラグインの不具合であることがわかりました。

Amazonや楽天市馬、Yahoo！ショッピングへリンクが貼れるWordPressプラグイン「Rinker」が原因で、表示崩れの不具合を起こしていたんです。

いかに対処方法を解説していきたいと思います。

スマホサイトの表示崩れによる不具合の対処方法

今回の不具合の対処方法は二つあります。

• Rinkerを停止する
• Rinkerのデザインを変更する

まず一つ目は思い切ってプラグインのRinkerを有効から停止にするという方法。

Amazon・楽天・ヤフーショッピングへのリンクの老舗『カエレバ』が、2019年1月から仕様が変更になりました。

それに伴い、同じ機能を持つプラグイン『Rinker』の重要性が高まりました。

「カエレバ」からRinkerに乗り換えたブロガーも多くいます。

ということでRinkerを外す（削除）するには抵抗がありました。

次にRinkerのデザインを変更することで表示崩れの不具合を解消する方法がないか模索。

CSSを使用することで解決できないかを試して見ました。

すると無事に表示崩れが解消しました！！！！

使用したCSSは以下の通り。

上記のCSSを「外観」→「カスタマイズ」の中の一番下、追加CSSにコピー＆ペーストします。

ビフォーアフター

表示崩れを起こした状態と解消した状態が以下の通り。

解決するまでにかなりの時間を要しました(^◇^;)。

WordPressで不具合が起きた時の対処方法

今回の教訓としてWordPressを使用したサイト運営するにあたり、何かの不具合があったのきの対処方法をまとめました。

• プラグインを一つ一つ停止する
• 最新バージョンにアップロードする
• ダウングレードしてみる

一番有効なのはプラグインを一つ一つ停止して悪さをしているプラグインがないかをチェックすることです。

たくさんのプラグインを使用している人にとってはすごく面倒なことかもしれません。

しかし使用していないプラグインや使い勝手の悪いプラグインを整理するいい機会になるかもしれません。

不具合が起こっている場合はぜひ試して見てください。

現在私が使用しているワードプレスのバージョンは「WordPress 4.9.6」。

最新版はWordPress5.2.2になっていますね。（2019年6月）

「Gutenberg（グーテンベルグ）」という新しいエディタの使用がわかりづらい、プラグインとの互換性が悪いと言った評判を聞いているので、まだアップデートしていません。

私の場合は大丈夫でしたが、これが原因で表示崩れしている可能性もあるのではないでしょうか。

まとめ

WordPressテーマ（私の場合はAffinger5）へのお問い合わせは、どうしても対処できなかった時の最終手段。

まずWordPressで使用しているプラグインを疑う必要があることがわかりました。

表示崩れで困っている方はぜひ参考にしてもらいたいです。