WordPressでアニメーションGIFの再生/停止をコントロールする⽅法(gifffer)

WordPressでアニメーションGIFの再生/停止をコントロールする⽅法(gifffer)

ブログ記事などでアニメーションGIFを使った場合、内容をより分かりやすく伝えることができる半面、ページ読込と同時にループ再⽣されるため、ページが見づらくなってしまうのが難点です。

そこで、ここではWordPress環境で「Gifffer」というJavaスクリプトを使い、アニメーションGIFの再⽣/停⽌をコントロールする⽅法を紹介します。

動作環境

この記事は、以下の環境で実行した結果を基にしています。他のバージョンでは、動作結果が異なる場合があることをご了承ください。

ソフトウェアバージョン
WordPress5.7

Giffferのメリット

Giffferを使うと、アニメーションGIFの再⽣/停⽌を制御でき、また再⽣時にGIFファイル全体を読み込むのでページ読込の最適化につながります。

導入手順

ここでは、WordPress環境への導入手順を紹介します。

本体のダウンロード

以下のWebページ(GitHub)で「Clone or Download」>「Download ZIP」を選択し、Gifffer本体をダウンロードします。

https://github.com/krasimir/gifffer

WordPressでアニメーションGIFの再生/停止をコントロールする⽅法(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" />

以上で、記事への挿入は完了です。

プレビューで確認してみると、以下のように画像の中央に再生ボタンが表示されており、クリックすると再生されるでしょう。

WordPressでアニメーションGIFの再生/停止をコントロールする⽅法(gifffer)

枠線を消す

記事を閲覧するブラウザによってはアニメーション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" />

すると、枠線が消えます。

WordPressでアニメーションGIFの再生/停止をコントロールする⽅法(gifffer)

あとがき

ちょっした操作をアニメーションGIF動画として記事に挿入したい場合、Giffferなら動画ファイルのように再生したいときだけクリックしてもらえばよいので、閲覧する側にとっても優しいですね。

ただ、アニメーションGIFはファイルサイズが大きくなりがちで、再生コントロールを付けようとすると、ここで紹介しているように少し手間がかかるため、手間なく簡単にアニメーション素材を挿入したい場合は、webmなどの動画形式で対応したほうが良いかもしれません。


記事が役立ったらシェアしてくれるとうれしいです。

あなたにおすすめのコンテンツ