WordPressの文字装飾のうちの一つ、文字にマーカーラインを引く文字装飾がありますが、私は必ず記事でマーカーを使用して文字を強調しています。
マーカーで文字装飾した文字を、もう少し強調したいと思ってWordPressのプラグインを探してたら、マーカーにするだけではなくマーカーアニメーションにできるプラグインを見つけたので初見で使ってみました。
WordPressで文字装飾するプラグイン
WordPressで文字装飾したいときに使えるプラグイン名は「marker animation(マーカーアニメーション)」です。
WordPressのプラグイン検索で、マーカーアニメーションで検索するとすぐに出てこないので、作成者さんの名前「Technote」でプラグイン検索すると早いです。
マーカーアニメーションをzipファイルでダウンロードしたい場合は下記です。
プラグイン検索やzipファイルでダウンロードできない場合にはGitHubにもソースがあるので、GitHubからmarker animationをダウンロードして使用する方法を作成者さんの以下の記事の説明を読んで使用できます。
マーカーアニメーションを実際にWordPressでインストールして文字装飾するとどんな感じに使用できるか説明していこうと思います。
文字装飾したマーカーが動く
何よりも先にプラグイン名にもなってる「マーカーアニメーション」にして文字装飾したマーカーを動かしたいと思います。
この文章の文字をプラグイン「マーカーアニメーション」で動かしてます。
上記のマーカーアニメーションはデフォルト設定のまま文字装飾したマーカーです。
文字装飾のマーカーって、文字強調のために使用して記事を書いてることが多いので、読んでくれる人達はマーカーを見飽きてるかもしれないと考えることができます。
WordPressプラグインの「マーカーアニメーション」で文字装飾が動くことで、さらに文章の強調ができるので目を惹きつけることができます。
「自然に文章をアニメーションで追いかけてしまう」が実現できます。
下線マーカーで文字が見やすい
マーカーアニメーションのプラグインを有効にしてデフォルト設定のまま使用しても、記事の文章に下線のマーカーアニメーションになってマーカーが動きます。
マーカーが下線なので、使ってる文字に邪魔することなくアニメーションが動くので、普段WordPressの文字装飾でマーカーを下線にして使用してるなら、さらにプラグインを使うことでマーカーが動くため文字が見えやすいに加えて「強調度」が増します。
文字装飾するプラグインを設定して使ってみる
文字装飾でマーカーアニメーションできるプラグインを詳細に設定して使ってみたので、プラグインを使用する人がいれば参考になればと思います。
基本はデフォルトで設定したマーカーアニメーションの使用と独自で作成する複数のマーカーアニメーションを投稿画面のブロック表示から記事で文字装飾していく使い方です。
以下から詳細な設定です。
文字装飾したマーカーの色と太さ
文字装飾をするマーカーアニメーションの色を決められます。
カラーピッカーを使用して色を決めることができるので、ほぼ無限に好きな色にできます。
マーカーアニメーションの太さも変更できます。デフォルトの太さは6emなので、調整して好きな太さで文字装飾できます。
どこまで太くなるかやってみましたが、10emにすると細くなってしまうので9emまでの太さにしたほうがいいです。
9emにしたマーカーアニメーションの部分です。太すぎるかもしれません。
マーカーアニメーションのベストな太さは、デフォルトの3emか2emが文字装飾しやすかったです。
2emの太さはこのくらいです。この部分がマーカーアニメーションしてます。
太さを2emにしただけだと若干の見づらさを感じるかもしれませんが、2emにして後ほど説明する位置の調整をすると見やすくなります。
WordPressのプラグイン「マーカーアニメーション」のダッシュボードから色を変更したマーカーはデフォルトの色としてWordPressの投稿画面のブロック表示から使えます。
マーカーアニメーション時間
文字装飾する部分をマーカーアニメーションで動かすアニメーション時間の調整もできました。
アニメーション時間関係の設定項目は「塗る時間」「塗り方」「遅れ時間」があります。
遅れ時間を調整して、ちょうど文字装飾してる文章を読むタイミングでマーカーアニメーションするような使い方になりそうです。
デフォルトの時間は2sかと思います。この数字を上げるとマーカーのアニメーションする動きは遅くなる。数字を下げるとアニメーションの動きが早くなります。
0sが一番早いマーカーアニメーションの動きですが、0sの時間にするのはおすすめできません。
「ぴっ」って感じの早い動きなので、一瞬すぎてせっかくの文字装飾の意味がなくなります。
塗る時間「0s」のサンプルです。一瞬なのでスクロールで外れてから戻るとアニメーションするようにしてますが、使い方に困ります。
マーカーアニメーションの時間調整するなら、遅くする調整だけになるかと思います。
マーカーをストライプ
文字装飾したマーカーを「ストライプ」にすることもできました。
設定項目の「ストライプにするかどうか？」にチェックを入れるだけです。
ストライプにした部分がこの部分です。
ただマーカーの文字装飾をストライプにすると、アニメーションの動く関係の設定項目は使えないようです。
- 塗れる時間
- 遅れ時間
- 塗り方
上記の3項目の設定はできないので、アニメーションなしで文字装飾できるストライプになります。
文字装飾アニメーションを繰り返す
文字装飾したマーカーのアニメーションを繰り返すこともできます。
永遠に繰り返すアニメーションではなくて、文字装飾した部分が画面から見えなくなった後に、もう一度同じ文字装飾にしてる文章が画面に表示されると、文字装飾部分のアニメーションが動き出します。
なんか説明が下手かもなのでリベンジ説明！
マーカーアニメーションで文字装飾した部分です。画面から外れて戻るとアニメーションします。
記事を読み進めて下にスクロールしてから、もう一度文字装飾した文章に戻るとマーカーがアニメーションで動きます。
個人的には繰り返すアニメーションが好きです。
マーカー位置の調整
マーカーの位置も調整できるのでやってみました。
デフォルトは6em
マーカー位置は使ってるフォントでも位置が変わるようなので、それぞれの位置のずれ方で調整が変わると思います。
なので参考程度の位置ですが
マーカーアニメーションで文字装飾して太さと位置を変更した部分です
位置を9emで太さを2emにしてみたのが上記です。マーカーアニメーションで文字装飾しても文字に被らないので文字が見やすかったです。
文字装飾プラグインで複数のマーカーを作成
今まで上述してきたマーカーアニメーションのプラグイン設定はデフォルトの設定でしたが他にも文字装飾するマーカーを何個でも追加して作成できます。
マーカーアニメーションのプラグインのダッシュボードで設定をしていましたが、独自で複数の文字装飾するパターンを作成するときには「設定管理」で文字装飾のマーカー設定をします。
新規追加して作成するマーカーのタイトルを決めてからマーカーの色、太さ、時間、繰り返し、位置調整を設定で決めます。
独自で作成したマーカーアニメーションは先ほどデフォルトで設定したマーカーアニメーションの横にブロック表示されてるので投稿の時に簡単に使用することができました。
独自のマーカーアニメーションを必要な数だけパターン化しておけるので複数使用したい人にも便利に使えるかと思えます。
文字装飾したマーカーにCSSを使う
マーカーアニメーションで文字装飾した要素にはクラス属性が付与されてます。
まとめてクラス指定した文字装飾の部分にCSSで文字色を変えてマーカーアニメーションしたり、フォントサイズを変えてみたりと、使い道はアイデア次第で多そうです。
付与されたクラスには設定管理でオリジナルで作成したマーカーのIDがついてるので確認できます。
もし複数のマーカーアニメーション部分に同じCSSを使う場合にはカンマで区切って指定すれば楽にできます。
