Simplicityのアイキャッチ画像をアニメーションGIF化する方法

simplicity
この記事では、WordPressのテーマ「Simplicity」のアイキャッチ画像をアニメーションGIF化する方法を紹介します。

アイキャッチ画像のアニメーションGIF化

WordPressのテーマ「Simplicity」の「投稿の編集」ページの右下の「アイキャッチ画像」にアニメーションGIFを設定しても、PC/スマホに表示されるアイキャッチ画像はアニメーションしません。

PC/スマホに表示されるアイキャッチ画像は、「アイキャッチ画像」に設定した画像ファイルをリサイズ処理した画像ファイルにリンクされており、リサイズ処理の際に、アニメーションしないGIFに変換されてしまうようです。

具体例として、「アイキャッチ画像」に画像サイズ:300×300のアニメーションGIF「hoge.gif」を設定すると、PCの記事一覧のアイキャッチ画像は、画像サイズ:150×150にリサイズ処理されたアニメーションしない「hoge-150×150.gif」にリンクされ、スマホの記事一覧のアイキャッチ画像と、PC/スマホ共に新着記事と関連記事のアイキャッチ画像は、画像サイズ:100×100にリサイズ処理されたアニメーションしない「hoge-100×100.gif」にリンクされます。

なお、「アイキャッチ画像」に設定する画像ファイルの拡張子(とフォーマット)は、リサイズ処理の際にも引き継がれて、PC/スマホで表示されるアイキャッチ画像の拡張子になるので、「アイキャッチ画像」に設定する画像ファイルの拡張子(とフォーマット)は、gifにします。

ここでは、画像サイズ:150×150と100×100のアニメーションGIFを準備して、WordPressのuploadsフォルダの画像ファイル(上記の例では、hoge-150×150.gifとhoge-100×100.gif)を上書きすることで、アイキャッチ画像のアニメーションGIF化を実現します。

hoge-150x150

hoge-150×150.gif

まとめ

この記事では、WordPressのテーマ「Simplicity」のアイキャッチ画像をアニメーションGIF化する方法を紹介しました。