WEBサイト制作

『JIN』でウィジェットの「アイキャッチ画像」が縦長に崩れる解決法(サイドバー)

このサイトでも使用しているWordPressのテーマ『JIN』。

非常に便利で痒いところに手が届きながらも、直感で知識がなくても利用できるのが素晴らしいテーマですが、ある日ウィジェットで「最新の投稿【アイキャッチ付き】」をサイドバー使用したところ、アイキャッチの画像が縦長に圧縮されてしまうという問題が発生しました。

また、この症状は「おすすめ記事」「人気記事ランキング」のウィジェットをサイドバーに設置した場合にも起こりました。サイドバーのみならず、ウィジェットで画像を使用した時、起こりうる症状です。

このページでは、そんな時の解決法、対処法をご紹介します。

まずはプラグインやその他をチェック

まずはプライグインを全て停止し、その後キャッシュを消してから表示を確認してみます。

WordPressで問題が生じたときにまず行うことですね。

一番簡単な方法かつ復旧が簡単なので、プラグインに問題がないと思われる場合でも、まずはプラグインの干渉を疑い行ってみましょう。

これだけで問題が解決することは稀ですが、問題の所在を明らかにするため必須な手順です。

また、他に自分でテーマに手を加えた場合は、それが問題を起こしていることも考えられます。これは復旧が面倒な場合もあるので、後回しにしてもかまいません。

私の場合はプラグインを全て停止した状態でもサイドバーの画像の表示が崩れていたため、次の手法で解決しました

Xserverの「mod_pagespeed」が干渉している可能性が大

私と同じ症状であれば、Xserverの「mod_pagespeed」をOFFにすることでウィジェットの画像が正常に表示されるようになります。

サイドバーに「人気記事ランキング」や「おすすめ記事」、「最新の投稿【アイキャッチ付き】」のウィジェットを使用した際、この方法で、アイキャッチ画像を正常に表示させることが可能になります。

この解決法は、JIN MANUALのよくある質問に記載されていました。

JINの「人気記事ウィジェット」のアイキャッチ画像が縦長になってしまうことがあります。

XSERVERの「mod_pagespeed」という高速化機能を使っていると、不具合が起きてしまうことがあるようです。

ご不便をおかけいたしますが、人気記事ウィジェットを利用される場合は、「mod_pagespeed」の機能をOFFにしていただけますと幸いです。

引用:https://jin-theme.com/manual/question

Xserverの「mod_pagespeed」をOFFにする

Xserverにて、「mod_pagespeed」をOFFにします。

現在、「mod_pagespeed」は新規で設定ができなくなっています。一度OFFにすると再びONにすることはできないので、ご注意ください。

上の画像で示した通り、サーバーパネルの高速化の項目に「mod_pagespeed設定」があります。ここで対象のドメインを選択し、ONからOFFに切り替えてください

OFFにしたら、自分のサイトを開いてみます。

今回、キャッシュを削除する必要はありません。縦長のアイキャッチから、正常なアイキャッチサイズになっているはずです。

 

WordPress内の設定ももちろんですが、こういったサーバーの設定で不具合が生じている可能性もありますので、自分がどこでどんな設定をしているか把握していることが大切になってきます。

最適化」や「高速化」という行為は、ページ内のソースやWordPressのコードを書き換える行為であるため、こういった障害が発生する可能性が出てきます。だからと言って全くするなというわけでなく、こういった可能性があるということを把握しておくことで、問題に気付きやすくなります。