皆さんはこういった動くマーカーを見たことはありますか?
これは注目を集められるしお洒落だし使ってみたいと思い、探していたらなんと無料プラグインを見つけることができました。
この機能で無料で配信してくれているなんて、、、
有料でもおかしくない出来です。これは紹介しなければと使命感に駆られました。
マーカーアニメーションの導入方法
こちらのプラグインはWordpressの管理画面からではなく、Web上からダウンロードしてインストールするという手順を取る必要があります。
慣れている方でしたらここは読み飛ばしていただいて構いません。
まずは開発者であるTechnoteさんのサイトからプラグインをダウンロードします。
次にWordPressへのインストールです。

管理画面の「プラグイン」にカーソルを合わせると「新規追加」というメニューが出てくるのでクリック。

そして「プラグインのアップロード」をクリック。

ここで先ほどダウンロードしたファイルを選択し、「今すぐインストール」をクリック。
ダウンロードしたファイルはzip形式のままインストールします。解凍をしてしまわないように
このプラグインに限った話ではなく他のプラグインでも同じなので覚えておくと良いでしょう。
インストールが終了したらそのまま有効化しましょう。
使い方
先ほどの手順に沿って有効化まですれば取りあえず使うことは可能です。

こんな感じでエディター画面に出てくるのでそこで色を選ぶだけ。
とても簡単です。
色の追加
デフォルトでは4色+ストライプが用意されていますが、自分で自由に増やしたり減らしたりできます。
WordPress管理画面の「マーカーアニメーション」➡「設定管理」をクリック。

次に「新規追加」をクリックします。

こういった編集画面が出てくるのでそれぞれ好みで編集していきます。今回はサンプルとして1個作りました。
テスト
➀この文章はテストです
②この文章はテストです
➀が新しく作成したもの、②がデフォルトで入っていたものです。
まず太さが全く違いますね。見えないくらいです。また、塗るスピードも違います。
そして、➀は画面をスクロールして再度この文章を出すとまたラインを引き直すように設定してあります。
②は一度ラインが引かれたら消えないようになっています。
自分で弄ってみるのが一番ですが、重要そうなところだけまとめます。
有効かどうか
一番重要です。
このチェックを外すと一時的に無効化することができます。
マーカーの太さ
文字通りマーカーの太さを変えられます。
デフォルトの単位は「em」が使われていますが、「cm」でも動きました。
ただ、突然不具合を起こす場合も考えられますので大人しく「em」を使う方が良いかと。
塗る時間、遅れ時間
塗る時間は文章を塗り終えるまでの時間。
遅れ時間とは文章が表示されてから塗り始めるまでの時間です。
ちなみにこの2つの文章は同じ塗る時間を指定しています。
ただ、文章の長さが違うのでスピードが違います。
遅れ時間はそこまで遅くする必要はないかなと思います。
繰り返すかどうか
先ほどちょろっと書きましたが、アニメーションを再度表示するようにするか、もしくは一度引いたらそのままにするのか設定することができます。
これは完全に好みですかね。ただ、何んとなくのイメージですけど全部が全部毎回アニメーションが動いていたらちょっと邪魔くさいかなと、、
ここはどうしても押したい!という部分を繰り返す設定にするとかいいんじゃないでしょうか。
まとめ
文章に動くマーカーを付けると目立たせることができますし、
何かいい感じのブログに見えます(笑)
記事の内容ももちろん大事なのですが見栄えってとても大事ですからね。
だからと言ってこんなにアニメーションを付けていたら画面がカオスな事になるので
ご利用は計画的にお願いします。
こんなにも優秀なプラグインを無料で提供してくださっているなんてもう頭が上がりません。
ありがたく、ありがたく使わせていただきます。