動くマーカーが実装できるおすすめプラグインの紹介とデメリットの解説

  • 2020年4月19日
  • 2020年4月20日
  • wordpress
動くマーカーが実装できるおすすめプラグインの紹介とデメリットの解説
動くマーカーを実装できるプラグインが知りたい!

最近よく見かける動くマーカーを簡単に実装できるプラグインをご紹介します。

また、導入前には必ず当記事を最後までお読みいただいてからインストールするようにしてください

動くマーカーを実装できるプラグイン

さっそく動くマーカーを実装できるプラグインを紹介します。無料で実装できるプラグインでおすすめはTechnoteさんが開発した「Marker Animation」です。

少し前まではダッシュボードの新規プラグインより検索できたのですが、現在は公式ブログより直接ファイル(release.zip)をダウンロードする事になっています。

→外部リンク:Technoteさんの動くマーカー

Marker Animationをインストール

ファイルをダウンロードしたら解凍せずにzip形式のままワードプレスにインストールします。

releaseをインストール

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で自作する方法を解説【プラグインなし】

勿論プラグインを導入するほうが簡単に動くマーカーが実装できますが、もし興味があるなら参考にしてください。

>プログラミング情報サイト「In-Output」

プログラミング情報サイト「In-Output」

当サイトではプログラミング言語の情報を発信しています。
HTMLやCSSのマークアップ言語の学習方法や解説、WordPressでのサイト開設方法、python等のプログラミング言語を使用して日頃の作業の効率化等、皆様のお役に立てるサイトを目指しています。

CTR IMG