気の向くままに歩き続ける.log

気の向くままに、日ごろの気になることについて綴れたら最高!

【はてなブログ無料】蛍光マーカーのようなラインをアニメーションで引いてみる!

f:id:naRTmo:20190428193501j:plain


こんにちは。


蛍光マーカーのラインを引いてみる方法は、以前こちらでご紹介しました。↓

nartmo.hatenablog.com


その中でも少し触れておりますが


蛍光マーカーのようなラインを、アニメーションで引いてみる方法を今回はご紹介します。


蛍光マーカーでも十分インパクトはありますが、更にアニメーションで引くことで、文字が映えますね。


っていうか、


かっこよすぎる!


こちらのブログで非常に丁寧にご紹介されておりましたので参考にさせていただきました。

affiliate-couple.hatenablog.com


jqueryをヘッダに設定


まずは、ヘッダ部分にこちらのコードを貼り付けます。


設定 → 詳細設定 → headに要素を追加


f:id:naRTmo:20190428190236p:plain


f:id:naRTmo:20190428190406p:plain


「headに要素を追加」に以下のコードを貼り付けます。


f:id:naRTmo:20190428185719p:plain



CSSをデザインCSSに設定


CSSを、デザインCSSに設定します。


デザイン(歯車マーク) → カスタマイズ → デザインCSSに以下のコードを貼り付けます。


f:id:naRTmo:20190428190742p:plain

f:id:naRTmo:20190428190855p:plain


「♯87cefa」色コードになりますので、お好きな色に変更してみてください。


こちらのサイトで色見本と色のコードがあるので参考にしてみてください。
www.colordic.org

HTMLコード設定

ヘッダとCSSのコードを貼り付けたら完成となりますので、以下のHTMLを記述することで、蛍光マーカーようなラインをアニメーションで引くことができます。


f:id:naRTmo:20190428192830p:plain

まとめ

蛍光マーカーが動いて表示されるので、かなりのインパクトがありますね。


ただ、HTMLを記述する必要があるので、ボタンで表示できればより使いやすくなりますので、引き続き調べていきたいと思います。


ではでは~