WordPressで記事を作成するときに、操作などをわかりやすく伝える方法の一つに「アニメーションGIF」を使った方法がありますが、アニメーションGIFを記事内にそのまま挿入した場合、通常はページ読込と同時にループ再⽣されてしまうため、ページが見づらくなってしまうという難点があります。
そのようなときに便利なのが、アニメーションGIFの再生／停止を制御できる「Gifffer」です。
そこでここでは、WordPress環境に「Gifffer」を導入して、アニメーションGIFの再⽣／停⽌を制御する⽅法を紹介します。
目次
動作環境
この記事は、以下の環境で実行した結果を基にしています。他のバージョンでは、動作結果が異なる場合があることをご了承ください。
| ソフトウェア | バージョン |
|---|---|
| WordPress | 5.7 |
Giffferのメリット
Giffferを使うと、アニメーションGIFの再⽣／停⽌を制御でき、また再⽣時にGIFファイル全体を読み込むのでページ読込の最適化につながります。
導入手順
ここでは、WordPress環境への導入手順を紹介します。
本体のダウンロード
以下のWebページ（GitHub）で「Clone or Download」＞「Download ZIP」を選択し、Gifffer本体をダウンロードします。
https://github.com/krasimir/gifffer
jsファイルの配置
ダウンロードしたファイル「gifffer-master.zip」を解凍し「build」フォルダーの中にある「gifffer.min.js 」をサーバへアップロードします。
ここでは、例としてWordpressのコンテンツルート配下の「/wp-content/plugins/gifffer/」ディレクトリをアップロードする場所としました。
Giffferの呼び出し設定
次にWordpressの設定を⾏います。
テーマ（子テーマがある場合は、子テーマ）の「footer.php」に、Giffferを呼び出すためのコードを追記します。
<script src="/wp-content/plugins/gifffer/gifffer.min.js"</script>
<script>jQuery(window).on('load',function(){Gifffer();});</script>以上で、設定は完了です。
記事への挿入方法
アニメーションGIFファイルをアップロード
アニメーションGIFファイルは、画像ファイルと同じように挿入箇所にドラッグ＆ドロップで挿入できますが、挿入時の設定は「リンク先︓なし、サイズ︓フルサイズ」とします。
リンク先を設定すると、他のプラグインと競合してうまく表示されない場合があり、サイズをフルサイズ以外に設定すると、Wordpressが勝手に静⽌画に差し替えてしまうのでごちゅういください。
コードの編集
アニメーションGIFファイルを記事に挿入すると、テキストエディタ上には以下のようなコードが表示されているはずです。
<img src="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="WordPressでアニメーションGIFの再生／停止を制御する方法「gifffer」" width="150" height="150" class="alignnone size-full wp-image-2648" />このコードの「src」属性を「data-gifffer」に変更することで、Giffferを使った再⽣になります。
<img data-gifffer="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="WordPressでアニメーションGIFの再生／停止を制御する方法「gifffer」" width="150" height="150" class="alignnone size-full wp-image-2648" />以上で、記事への挿入は完了です。
プレビューで確認してみると、以下のように画像の中央に再生ボタンが表示されており、クリックすると再生されるでしょう。
枠線を消す
記事を閲覧するブラウザによってはアニメーションGIFをクリックしたときに枠線が表⽰されることがありますが、CSSでこの枠線を消すことができます。
枠線を消したいときは「style.css」に次のコードを追記します。
/* gifffer */
.gifffer {
outline: none;
}クラス「gifffer」をアニメーションGIFを挿入するコードに追加します。
<img data-gifffer="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="WordPressでアニメーションGIFの再生／停止を制御する方法「gifffer」" width="150" height="150" class="alignnone size-full wp-image-2648 gifffer" />すると、枠線が消えます。
あとがき
ちょっした操作をアニメーションGIF動画として記事に挿入したい場合、Giffferなら動画ファイルのように再生したいときだけクリックしてもらえばよいので、閲覧する側にとっても優しいですね。
ただ、アニメーションGIFはファイルサイズが大きくなりがちで、再生コントロールを付けようとすると、ここで紹介しているように少し手間がかかるため、手間なく簡単にアニメーション素材を挿入したい場合は、webmなどの動画形式で対応したほうが良いかもしれません。