GIFアニメーションの再生／停止を制御する方法

GIFアニメーションはページに動きを与え、魅力的なコンテンツ提供ができる反面

サイズが大きくページ読込が遅くなる
ページ読込と同時に再生が始まってしまう
デフォルトでは自動で再生が繰り替えされうるさく感じてしまう

といったデメリットもあります。

そこでGiffferというJavaスクリプトを使ってWordpressの記事でGifアニメーションファイルを動画コンテンツ風に再生／停止を制御する方法を紹介します。

Giffferプラグインを使うとクリックすることで再生／停止を制御でき、また再生時に初めてGIFファイル全体を読み込むのでページ読込の最適化にもつながります。

Giffferの導入

まずGitHubのページに行き「Clone or Download」 > 「Download ZIP」を選択します。

ダウンロードしたファイルを解凍しbuildフォルダにある「gifffer.min.js」をサーバにアップロードします。アップロードする場所はここではWordpressのインストール配下のwp-content/plugins/に「gifffer」というフォルダを作りその中に配置しました。

WordPressの設定

次にWordpress側の設定を行います。「外観」 > 「テーマの編集」 > 「footer.php」を選びGiffferを呼び出すために以下のコードをタグの上に記載します。なお、テーマのアップデートに備え、子テーマを作って編集することをオススメします。

<script type="text/javascript" src="(自分のサーバのgifffer.min.jsをアップロードしたパス)"></script>
<script type="text/javascript">
     window.onload = function() {
        Gifffer();
     }
</script>

GIFアニメーションの貼り付け

GIFアニメーションファイルを通常の画像ファイルと同様に「メディアを追加」 > 「ファイルをアップロード」をして貼り付けます。この時、

リンク先：「なし」
サイズ：「フルサイズ」

を指定するのがポイントです。リンクを指定すると他のプラグインと競合することがあるので「なし」にしておきましょう。また「サイズ」をフルサイズ以外に指定するとWordpressが自動で「縮小した静止画」に差し替えてしまいアニメーションしなくなります。

<img src="https://starpentagon.net/life/wp-content/uploads/2017/10/Rotating_earth_large.gif" 
alt="" width="120" height="120" 
class="aligncenter size-full wp-image-961" />

というようなコードが挿入されるので「src」属性を「data-gifffer」に変更するとGiffferプラグインでの再生になります。

<img data-gifffer="https://starpentagon.net/life/wp-content/uploads/2017/10/Rotating_earth_large.gif" 
alt="" width="120" height="120" 
class="aligncenter size-full wp-image-961" />

CSSスタイルの設定

上記の設定でGiffferプラグインでの再生が出来ますが、クリック時に青枠が表示されたり見栄えがあまり良くありません。そのため「外観」 > 「カスタムCSS」に以下のコードを追加します。

.gifffer {
	vertical-align: text-bottom;
	margin-left: auto;
	padding: 3px !important;
	background: #fff !important;
	outline: none;
}

.gifffer img {
	border: none !important;
	margin: 0;
	padding: 0;
}

GIF画像のimgタグ内のclass要素にgiffferを追加します。

<img data-gifffer="https://starpentagon.net/life/wp-content/uploads/2017/10/Rotating_earth_large.gif" 
alt="" width="120" height="120" 
class="aligncenter size-full wp-image-961 gifffer" />

こうするときれいにGIFアニメーションが表示されると思います。