こんにちは。
蛍光マーカーのラインを引いてみる方法は、以前こちらでご紹介しました。↓
その中でも少し触れておりますが
蛍光マーカーのようなラインを、アニメーションで引いてみる方法を今回はご紹介します。
蛍光マーカーでも十分インパクトはありますが、更にアニメーションで引くことで、文字が映えますね。
っていうか、
かっこよすぎる！
こちらのブログで非常に丁寧にご紹介されておりましたので参考にさせていただきました。
affiliate-couple.hatenablog.com
jqueryをヘッダに設定
まずは、ヘッダ部分にこちらのコードを貼り付けます。
設定 → 詳細設定 → headに要素を追加
「headに要素を追加」に以下のコードを貼り付けます。
CSSをデザインCSSに設定
CSSを、デザインCSSに設定します。
デザイン（歯車マーク） → カスタマイズ → デザインCSSに以下のコードを貼り付けます。
「♯87cefa」色コードになりますので、お好きな色に変更してみてください。
こちらのサイトで色見本と色のコードがあるので参考にしてみてください。
www.colordic.org
HTMLコード設定
ヘッダとCSSのコードを貼り付けたら完成となりますので、以下のHTMLを記述することで、蛍光マーカーようなラインをアニメーションで引くことができます。
まとめ
蛍光マーカーが動いて表示されるので、かなりのインパクトがありますね。
ただ、HTMLを記述する必要があるので、ボタンで表示できればより使いやすくなりますので、引き続き調べていきたいと思います。
ではでは～