こんにちわ らんらんです。
今回はワードプレスのブログ作成について書いていきます。
先日、ブログ作成の際に困った事があり、対処法をネットで調べまくったのですがいくら探しても見つからず結局は自力で原因を突き止めることになりました。
内容は「ブログカード」についてです。
その時の原因と対処法をご紹介します。
スマホだとブログカードのアイキャッチ画像が真っ白になる
テンプレートは有料の「JIN」を使っています。
記事を読んでいるとよく見かける「合わせて読みたい」というリンク。
アイキャッチ画像とタイトルと一緒に出ていて、とても分かりやすいですよね。
作成の仕方はとても簡単で
ブログ記事作成の際に貼りたい過去記事のURLアドレスを載せるだけ。
余計なタグは一切つけず、上下にしっかり余白を残してURLを貼るだけです。
とってもシンプルな方法なはずなのに
スマホで見るとアイキャッチ画像が真っ白で表示されないのです。
パソコンで見ると正常に表示されていました。
検索して対処法を調べても、画像だけが表示されないという現象については載っていなくて
ブログカード自体が表示されない、という記事ばかりでした。
その原因は
ほとんどが前後にタグがあったり
上下の余白が不十分だったり
という内容でした。
私の場合は、ブログカード自体は表示されています。
しかもパソコンではアイキャッチ画像も表示されています。
どうして、スマホで見るとアイキャッチ画像が表示されず真っ白になってしまうのか、、
自力で原因を探そうとプラグインを１つずつ停止してチェックしました。
あまりプラグインを数多くインストールしていないので、これだろうなーと予想していたのが、jetpackでした。
やっぱり原因は「jetpack」だった！
以前もスマホでトップページのアイキャッチ画像が真っ白になるトラブルがあり、
jetpackが原因という記事を見つけて対応していましたが、今回もjetpackでした。
あの時に対処したのに、また？って感じでしたが。
プラグインの「更新」の際に設定がリセットされていたのか、機能が改善されて設定が変更されていたのかも知れません。
対処法
jetpackの設定のパフォーマンス部分を1箇所オフにしました。
画像の遅延読み込みを有効にする
ここにチェックがあったので外したら治りました！！
これでスマホでもブログカードのアイキャッチ画像が表示されるようになりました！
まとめ
スマホだとブログカードの画像がうまく表示されないときの対処法は
インストールされているプラグイン「jetpack」が原因である可能性が高いです。
私はjetpackの設定の変更で正常にブログカードがスマホでも表示させるようになりました！！
今後のブログ作成の記録のためと、同じようなトラブルに困っている方への参考になればと思います。
最後まで読んで下さり、ありがとうございました(^^)
