アニメーションGIFに再⽣ボタンを表示する⽅法(gifffer)

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

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

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 type="text/javascript" src="/wp-content/plugins/gifffer/gifffer.min.js"</script>
<script type="text/javascript">
  window.onload = function() {
    Gifffer();
  }
</script>

以上で、設定は完了です。

記事への挿入方法

アニメーションGIFファイルのアップロード

アニメーションGIFファイルは、画像ファイルと同じように挿入します。挿入時の設定は「リンク先︓なし、サイズ︓フルサイズ」です。

Memo

リンクを指定すると、他のプラグインと競合してうまく表示されない場合があります。また、サイズをフルサイズ以外に設定すると、Wordpressが勝手に静⽌画に差し替えてしまいます。

コードの編集

アニメーションGIFファイルを記事に挿入すると、以下のようなコードになります。

コード:

<img src="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="" width="150" height="150" class="alignnone size-full wp-image-2648" />

GIF:

上のコードの「src」属性を「data-gifffer」に変更することで、Giffferを使った再⽣になります。

コード:

<img data-gifffer="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="" width="150" height="150" class="alignnone size-full wp-image-2648" />

GIF:

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

枠線を消す

デフォルトのままだと、閲覧に利用するブラウザによってはアニメーションGIFをクリックしたときに枠線が表⽰されます。これは「CANVAS」というタグが使われているためのようです。CSSでこの枠線を消すことができます。

「style.css」に次のコードを追記します。

/* gifffer */
.gifffer {
  outline: none;
}

クラス「gifffer」をアニメーションGIFを挿入するコードに追加します。

<img data-gifffer="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="" width="150" height="150" class="alignnone size-full wp-image-2648 gifffer" />

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

まとめ

Giffferを使えば、操作などを紹介する記事でGIFアニメをたくさん使っても、ページがうざくなくおすすめです。

スポンサーリンク