WordPressで記事を書くときの文字装飾には、文字にマーカーラインを引く方法がありますが、私は必ず記事でマーカーを使用して文字を強調しています。
使用しているWordPressテーマの機能にセットされているマーカーを使用しているのですが、マーカーで文字装飾した文字をもう少し強調したいと思ってWordPressのプラグインを探してたら、マーカーするだけではなくマーカーをアニメーションするプラグインを見つけたので初見で使ってみました。
WordPressで文字装飾するプラグイン
WordPressの記事で文字装飾をしたいときに使えるプラグイン名は「Marker Animation(マーカーアニメーション)」です。
Marker Animation(マーカーアニメーション)のプラグインはGitHubからzipファイルをダウンロードしてWordPressのプラグインにインストールします。
マーカーアニメーションのダウンロードページは以下のリンクで開くことができます。
ダウンロードしたプラグインのzipファイルはWordPressの管理メニュー「プラグイン」からプラグインのアップロードでファイル選択してインストール、そして有効化します。
もしかするとWordPressにMarker Animationプラグインを有効化したときにエラーメッセージが画面に表示されるかもしれません。私がエラーになりました。
そんなときには、GitHubのMarker Animationのページで最新バージョン(latest version)のリンクからダウンローロードしたzipファイルを使用すると無事にWordPressにインストールできます。
また、インストール後のMarker Animationは、プラグイン作成者さんの以下の記事で説明を読んでWordPressのプラグインmarker animationの使用方法を知ることもできます。
マーカーアニメーションを実際にWordPressでインストールして、マーカーで文字装飾するとどんな感じになるか使用してみたいと思います。
文字装飾したマーカーが動く
何よりも先にプラグイン名にもなってる「マーカーアニメーション」で文字装飾したマーカーを動かしたいと思います。
この文章の文字をWordPressのプラグイン「マーカーアニメーション」で動かしてます。
上記のマーカーアニメーションはプラグインのデフォルト設定のままWordPressの投稿で文章に文字装飾をしたマーカーです。
文字装飾のマーカーは、文字を強調するために目立たせたることを目的として使用することが多いので、WordPressプラグインの「マーカーアニメーション」で装飾された文字の背景が動くことで、文章に目を惹きつけやすくなります。
「アニメーションによって文章を自然に追いかけてしまう」が実現できます。
下線マーカーは文字が見やすい
WordPressでマーカーアニメーションのプラグインを有効にしてデフォルト設定を少し変えただけでも下線マーカーにすることができ、記事の文章でマーカーがアニメーションして動きます。
文字に対してマーカー位置が下の位置になりますが、表示する文字をマーカーが邪魔することなくアニメーション動作してくれるため、文章は見やすくなります。
普段WordPressの文字装飾でマーカーを下線にして使用してる方なら、見やすさに加えて、WordPressのプラグインMarker Animationを使用して文章の「強調度」が増します。
文字装飾するプラグインを設定して使ってみる
WordPressでの文字装飾の方法としてマーカーをアニメーションで動かすことができるMarker Animationプラグインを詳細に設定して使ってみたので、プラグインを使用する方の参考になればと思います。
マーカーアニメーションのプラグインをWordPressにインストールして有効化すると、管理メニューにマーカーアイコン付きのメニュー項目が追加されますのでクリックしてダッシュボードに進みます。
WordPressのプラグイン「Marker Animation」のダッシュボードでは、デフォルトで設定されているマーカーのカラーやアニメーションの動作についての設定、プレビューがあるので、設定の概要を把握できます。
以下からマーカー設定の詳細です。
文字装飾したマーカーの色と太さ
Marker Animationプラグインの設定では、WordPressで文章に文字装飾をするマーカーアニメーションの色を決められます。
カラーピッカーを使用して色を決めることができるので、ほぼ無限に好きな色にできます。
アニメーションするマーカーの太さも変更できます。デフォルトの太さは6emだったかと思います。調整して好きな太さのマーカーで文字装飾ができます。
どこまで太くなるかやってみましたが、10emにすると細くなってしまうので9emまでの太さにしたほうがいいです。
サンプル：9emにしたマーカーアニメーションの部分です。
マーカーを下線にしてアニメーションする場合では、ベストな太さは3emか2emくらいが文字装飾に使いやすそうです。
2emの太さはこのくらいです。この部分がマーカーアニメーションします。
太さを2emにしただけだと若干の見づらさを感じるかもしれませんが、2emにして後ほど説明する位置の調整をすると見やすくなります。
WordPressのプラグイン「マーカーアニメーション」の色を変更したマーカーを記事で使用するときには、WordPressのブロックエディターのブロックから使用できます。
マーカーアニメーション時間
WordPressプラグインMarker Animationの設定では、文字装飾に使用するマーカーを動かすアニメーション時間の調整もできました。
アニメーション時間の設定項目は「塗る時間」「塗り方」「遅れ時間」があります。
遅れ時間を調整して、ちょうどマーカーで文字装飾してる文章が画面内に入るタイミングでマーカーをアニメーションするような使い方になりそうです。
デフォルトの時間は2sかと思います。数字を上げるとマーカーがアニメーションする動作は遅くなる。数字を下げるとアニメーションする動作が早くなります。
0sが一番早いマーカーアニメーションの動きですが、0sの時間で設定するのは文字を装飾する目的とした場合には早すぎるアニメーションの速度です。
「ぴっ」って感じの早い動きなので、一瞬すぎてせっかくの文字装飾の意味がないような気がしてしまいます。
塗る時間「0s」のサンプルです。一瞬なので分からなかった場合は、画面をスクロールしてから塗る時間サンプルにリベンジすると、再度アニメーションしてます。「ぴっ」って感じが伝わるれば良いなと思います。
マーカーアニメーションの時間調整するなら、遅くする調整だけになるかと思います。
マーカーをストライプ
WordPressに文字装飾をしたマーカーを「ストライプ」にすることもできました。
Marker Animationの設定項目で「ストライプにするかどうか？」にチェックを入れるだけです。
ストライプにした部分がこの部分です。
ただマーカーの文字装飾をストライプにすると、アニメーションの動く関係の設定項目は使えないようです。
- 塗る時間
- 遅れ時間
- 塗り方
上記の3項目はストライプにしてアニメーションするときに設定ができないので、アニメーションなしのストライプマーカーでWordPressの文字装飾に使用することになります。
文字装飾アニメーションを繰り返す
文字装飾したマーカーのアニメーションを繰り返すこともできます。
永遠に繰り返すマーカーのアニメーションではなくて、マーカーで文字装飾をした文章がスクロール操作で画面から見えなくなった後に、もう一度スクロールで同じ文章に戻り表示されると、文字装飾部分のアニメーションが動き出します。
記事を読み進めて下にスクロールしてから、もう一度、マーカーで文字装飾したサンプル文章に戻るとマーカーがアニメーションで動きます。
個人的には繰り返すアニメーションが好きです。
マーカー位置の調整
WordPressに使用するMarker Animationプラグインの設定で、マーカーの位置も調整できるのでやってみました。
デフォルトは6em
マーカー位置は使ってるフォントでも位置が変わるようなので、それぞれの使用するフォントの文章にマーカーをアニメーションさせてみて位置のずれ方を確認しながら調整することになります。
なので参考程度のマーカー位置ですが
マーカーアニメーションで文字装飾して太さと位置を変更した部分です
位置を9emで太さを2emにしてみたのが上記の文章です。マーカーアニメーションで文字装飾しても文字に被らないので文字が見やすかったです。
文字装飾プラグインで複数のマーカーを作成
ここまで記事で紹介してきたマーカーアニメーションで文字装飾が可能なWordPressプラグインMarker Animationの設定は、デフォルトの設定を使っていましたが、マーカーで文字装飾をするマーカーパターンを何個でも新規追加して作成できます。
マーカーアニメーションのWordPressプラグインのダッシュボードで設定をしていましたが、独自で複数の文字装飾するマーカーパターンを新規で作成するときには「設定管理」で文字装飾のマーカー設定をします。
WordPressの管理メニューからマーカーアニメーションの項目で設定管理に進むと、新規追加ボタンがあるのでクリックします。するとマーカーのタイトルをきめることができ、マーカーの色、太さ、時間、繰り返し、位置調整などの設定で、どんなマーカーのパターンにするかを設定できます。
独自で作成したマーカーは、投稿のブロックエディタのツールバーに追加されます。WordPressで記事を作成するときには簡単に使用することができます。
マーカーで文字装飾をするプラグインMarker Animationは、必要な数だけマーカーを作成してパターン化しておけるので、複数のマーカーを記事で使用したい人にも便利に使えるかと思えます。
文字装飾したマーカーにCSSを使う
マーカーアニメーションのWordPressプラグインでマーカー装飾した文章はHTMLのspan要素で囲まれてクラス属性が付与されます。複数のマーカーを作成した場合でも、それぞれのマーカーにspan要素がマークアップされてクラス属性が付きマーカーのスタイルが適用されます。
マーカーは背景扱いのスタイルになるため、マーカーの文字装飾にあわせてCSSで文字色を変えてマーカーをアニメーションしたり、フォントサイズを変えてみたりと、マーカーに付与されているクラス名を活用して工夫できそうです。
