動くマーカーの無料プラグイン「マーカーアニメーション」が凄い

節約・お金

ワードプレスで動くマーカーが簡単に使えるプラグイン「マーカーアニメーション」を使ってみよう。

使い過ぎるとウザいことありゃしませんが、適度に使うとブログ映えする動く蛍光ペン効果。

  • 文章のメリハリを付けたい
  • 他のブログと差別化がしたい
  • アフィリのCVを上げたい
  • 無料で使いたい☆

こんな悩みがあるブロガーさんは導入してみてはいかがでしょうか。

ワードプレスをいじるのは慣れてるよって人は制作者Technoteさんの公式ブログを参考にした方が良いかも。より詳しく解説されています。

マーカーアニメーションの導入方法

「マーカーアニメーション」はアップロードするタイプのプラグインですので、プラグインをダウンロードして手動でインストールする必要があります。

(昔はWordPressプラグインディレクトリにあった模様)

プラグイン導入の流れ
  1. プラグインをダウンロード
  2. ワードプレスにアップロード
  3. インストール
  4. 有効化

まずは開発者であるTechnoteさんのサイトから「release.zip」をダウンロードして保存します。

次にダウンロードしたファイルをワードプレスにインストール。

場所は管理画面にログインしてメニューの「プラグイン」→「新規追加」「プラグインのアップロード」

アップロード画面

アップロードが終えたら続けて「今すぐインストール」

「有効」にしたら導入完了。ここまでは簡単ですね。

マーカーアニメーションの使い方

マーカーアニメーションは「色」「スピード」「繰り返す」「ストライプデザイン」など色々な種類の動く蛍光ペンが作れます。

まずはデフォルトで用意されているマーカーを使って文章を書いてみます。

投稿画面

マーカーを引きたい文章(あああああ)を選択し、マーカーアニメーションのアイコンで指定するだけ。

なんて簡単なんだあああああ。

※ビジュアルモードでは反応しませんが、プレビューで確認するとマーカーが動きます。

ツールバーにアイコンが表示されない時の使い方

ツールバーにアイコンが無い

投稿画面のツールバーにマーカーアニメーションのアイコンが見当たらない場合があります。

アイコンが出ない原因
  • Classic Editorで旧エディターを使っている
  • 使っているテーマの相性が悪い
  • ワードプレスのバージョンが古い

マーカーアニメーションはブロックエディターで使用することが推奨されています。「Classic Editor」で旧エディターを使用しているとアイコンが表示されません。

ブロックエディターでも表示されないやんけ!という方もご安心下さい。僕も表示されていません。

アイコンが表示されないテーマ(外観)が幾つかありました。検証した結果、高機能なテーマ(cocoonなど)は表示されないっぽいです。

では何故使えているのか?

プラグイン自体はインストールされているので<span>タグで囲って無理矢理表示させています。

<span class=”marker-animation-3173″>あああああ</span>

あああああ

クラス名は「marker-animation-***」という形式になります。***いは数字が入りますので「セレクタ」を参考に変更して下さい。

テキストエディター(コードエディター)でいちいち書いても良いですし、「AddQuicktag」に設定しておくとワンクリックでマーカーが引けるので便利になりますよ、と。

この方法は強引なやり方の為、制作者さんは動作を保証するものでは無いとしています。

また、ワードプレスのバージョンが5.2未満だとおかしな挙動をするGutenberg側のバグがあったようです。5.2にバージョンアップすると解消されたとのこと。

マーカーアニメーションの設定方法

マーカーアニメーションは、自分好みの動くマーカーを作ることができます(最初に入っているマーカーをそのまま使ってもOK)

  • マーカーの色や太さを変える
  • 文字を太字にしない
  • 塗るスピードを変える
  • スタートを遅らせる
  • ストライプ模様は動かない?

マーカーをストラプ模様にすると動かないのはブラウザの関係でしょうか(僕の環境では動かない)

作ったマーカーを保存して色々な記事で使い回すことができますが、普段使用する5個くらいで十分でしょう。管理も大変ですからね。

ではマーカーを追加してみます。

管理画面メニューに「マーカーアニメーション」が追加されるので「設定管理」→「新規追加

マーカーの追加画面

有効かどうか

チェックを外すことによって一時的に無効にできます。

マーカーの色

色見本から選択、カラーコードを入力、どちらでも色が指定できます。

マーカーの太さ

マーカーの太さを調節できます。単位は「em」で指定。

塗る時間

塗り終えるまでの時間を秒「s」とミリ秒「ms」で指定できます。

10秒設定。

同じ10秒でも文章を長くするとスピードが早くなるという訳です。違いが分かりますか。

遅れ時間

画面に表示されてから塗り始め時間を指定します。デフォルトだと1秒後に塗り始め。

単位は塗る時間と同じ秒「s」とミリ秒「ms」で指定できます。

塗り方

アニメーションの演出を微妙に変えることができます。

  • 開始と完了を滑らかに
  • 一定
  • ゆっくり始まる
  • ゆっくり終わる
  • ゆっくり始まりゆっくり終わる

太文字にするかどうか

デフォルトは太字ですが太くしないようにもできます。

繰り返すかどうか

一度表示されたアニメーションは再び画面に戻っても動きません。「繰り返し」を有効すると、画面を戻せば再びアニメーションします。

マーカー位置の調整

デフォルトは0.6emに設定されアンダーラインマーカー。太さを1em、位置を0にすると通常のマーカーになります。

ストライプデザインかどうか

ストライプにすると環境によってアニメーションしないようです。使わない方が無難でしょう。

基本的には「色」と「塗る時間」を変えるだけで問題ないと思います。

設定ができたら分かりやすい「タイトル」を付けて「公開(保存)」するとリストに入ります。

無料のマーカーアニメーションすごい

ワードプレスのテーマ「Diver」にも動くマーカー機能が搭載されています。他にも色々な機能が付いているそうですがお値段17,980円とかなり高め。

プラグイン単体では「ゼブライン」が有名です。点滅させたりタグを追加できたり機能が充実して3,000円。

とりあえずマーカーが動けばいいという方は無料の「マーカーアニメーション」を使えばいいかな、と思います。

3,000円といえばレモン37個分のお値段。トミカだって6台も買えちゃいますからね。

コメント

タイトルとURLをコピーしました