最近よく見かける動くマーカーを簡単に実装できるプラグインをご紹介します。
また、導入前には必ず当記事を最後までお読みいただいてからインストールするようにしてください。
動くマーカーを実装できるプラグイン
さっそく動くマーカーを実装できるプラグインを紹介します。無料で実装できるプラグインでおすすめはTechnoteさんが開発した「Marker Animation」です。
少し前まではダッシュボードの新規プラグインより検索できたのですが、現在は公式ブログより直接ファイル（release.zip）をダウンロードする事になっています。
→外部リンク：Technoteさんの動くマーカー
Marker Animationをインストール
ファイルをダウンロードしたら解凍せずにzip形式のままワードプレスにインストールします。
Marker Animationの設定
Marker Animationをインストールするとダッシュボードに設定画面が現れます。
Maeker Animationの設定は基本デフォルト推奨です！細かい動きの指定ができますが、視覚的にそのままが使いやすい。
色の追加も簡単に行えるので、お気に入りの色を追加しましょう。
Marker Animationのデメリットの解説
Marker Animationプラグインは非常に簡単におしゃれなマーカーを実装できるプラグインですが、最大の欠点があります。
それは、マーカーのスタイルは全てHTMLに記載されてしまう点です。
<span class="marker-animation" data-marker_animation="true" style="display: inline; background-position: left -100% center; padding-bottom: 0.8em; font-weight: bold; background-size: 200% 0.5em; background-repeat: repeat-x; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(192, 255, 163) 50%); transition: background-position 1.4s ease-in-out 0.1s;"></span>
動くマーカーを使用する度に凡そこれだけのHTMLが追加されてしまいます。これはサイトの速度低下だけではなくSEO的にも大きなデメリットとなります。
ZEBLINEのご紹介
デメリットがなくプラグインだけで動くマーカーを実装するには有料ではありますがZEBLINEが非常におすすめです。
→商品ページ：あなたの読者を惹きつけるラインマーカープラグイン ZEBLINE（ゼブライン）
コチラのプラグインならマーカーの点滅等も実装が可能です。
まとめ
この記事ではプラグインで動くマーカーを実装する方法を解説しました。
Marker Animationは無料だが、HTMLファイルが大きくなる。
ZEBLINEはデメリットはないが、有料である。
当サイトではプラグインを一切使わずjQueryとCSSで動くマーカーを自作する方法も解説しています。
→関連記事：動くマーカーをCSSとjQueryで自作する方法を解説【プラグインなし】
勿論プラグインを導入するほうが簡単に動くマーカーが実装できますが、もし興味があるなら参考にしてください。
