【 QooQ 】 関連記事のサムネイル画像が表示されないことがある

こんにちは、HARU（ @HARU ）です。

Blogger のテンプレートである QooQ を愛用して、１年以上が過ぎようとしています。

特に問題という問題はなく、カスタマイズも順調にできていましたが、最近、関連記事のサムネイル画像が表示されないときがあることに気づきました。

同じように悩んでいる方もいるかもしれませんので、簡単に原因と対策について書いておきます。

関連記事のサムネイル画像が表示されないときがある

最近になって書いた記事が関連記事に表示されるとき、サムネイル画像が表示されていないことに気が付きました。

原因は Blogger の新インターフェースにあり

結論から先に言うと、このような現象が発生する原因としては Blogger のインターフェースが新しくなったことにあります。

Blogger の新インターフェースについて言いたいことは多々ありますが、それはまた後で書きたいと思います。

新インターフェースにおいて、作成ビューにて画像を挿入後、「 画像の編集 」からできるサイズ変更をすると、QooQ の関連記事サムネイル画像が表示されなくなります。

対策１：画像の編集を行わない

投稿メニューから「 画像の編集 」を行わなければ、関連記事のサムネイル画像が消えることはありません。

ちなみにサムネイルになる予定の画像以外は、「 画像の編集 」からサイズ変更を行っても特に問題はありません。

要するにサムネイルに指定したい画像（ この場合、記事トップ画像 ）のサイズを変更しなければ、この問題は発生しないことになります。

対策２：HTML ビューで画像を挿入する

新インターフェースになったばかりのときは、HTML ビューにて画像を挿入することができませんでした。

今はクレームでもあったのか、HTML ビューで画像を挿入することができるようになっています。

HTML ビューで画像を挿入した場合の「 レイアウトの選択 」からサイズ変更した場合は、関連記事のサムネイル画像が消えることはありませんでした。

対策３：コメントで新たな対策（ 2021.03.08 追記 ）

イケチンさん | 駐在員ICHIKENのバエないアメリカ生活から「 コードを修正することで表示させることができる 」とコメントを頂きました。情報提供ありがとうございます！

サムネイル画像もサイズ変更したい！

それでもサムネイルに指定したい画像も、他の画像と同様のサイズに合わせたい方もいると思います。

その場合、投稿メニューのサイズ変更ではなく、HTML を直接変更しサイズを変更しましょう。

  画像 HTML 例（ 省略あり ）
  <img border="0" data-original-height="599" data-original-width="900" src="example.jpg" width="〇〇〇" />

まとめ

テンプレート QooQ の関連記事サムネイル画像が消える原因は、Blogger の新しいインターフェースによるものです。

消えないようにするには画像サイズの変更をする際、以下のようにするといいでしょう。