【プラグイン不要】WordPressで蛍光マーカーを動かす方法
完成イメージ
このように文中にマーカーが引かれるようなアニメーションを挿入できます。
上の例だとアニメーションが勝手に繰り返されているかと思いますが、本カスタマイズではスクロールしその文が見えた時に初めてマーカーが動くようになります。
WordPressで蛍光マーカーを動かす方法
1. CSSコードをコピペする
.marker { background-image: linear-gradient( 90deg, rgb(252, 214, 158) 90%, transparent /*好きな色*/ ); background-repeat: no-repeat; background-size: 200% 100%; /*2つ目の値でマーカーの太さを変える*/ background-position: 0 bottom; animation: marker-move 3s ease 0s; /*マーカーを引く速度*/}@keyframes marker-move { 0% { background-position: right -100% bottom; } 100% { background-position: 0 bottom; }}
上記コードをstyle.css
などにコピペします。
原理としては、background-size
で要素の2倍の大きさの背景を描画しそれを左から動かしています。
- マーカーの色
- マーカーの太さ
- マーカーを引く速度
ちなみにこの3点は値を修正することで変更可能です。どれを修正すればいいのかは、上記コード内のコメントアウトを参考にしてみてください。
2. JavaScriptコードをコピペ
$(window).scroll(function () { $(".marker-target").each(function () { const markerPosition = $(this).offset().top; const diff = markerPosition - $(window).height(); if ($(window).scrollTop() > diff) { $(this).addClass("marker"); } else { $(this).removeClass("marker"); } });});
上記をjsファイルにコピペします。テーマによって貼るべきファイルの名前が違かったり、無い場合もあるのでその辺りご注意ください。
<script> $(window).scroll(function () { $(".marker-target").each(function () { const markerPosition = $(this).offset().top; const diff = markerPosition - $(window).height(); if ($(window).scrollTop() > diff) { $(this).addClass("marker"); } else { $(this).removeClass("marker"); } }); });</script>
jsファイルをあまり触りたくない場合は、上記のようにマーカーを引きたいその記事の編集画面で以下の要素を直接貼る、という選択肢もあります。
ちなみにその場合はテキストモードで貼る必要があるのでご注意ください。
3. spanタグで囲む
<span class="marker-target">(マーカーを引きたい文字)</span>
記事の編集画面でマーカーを引きたい文字を上記のようにspan
タグで囲めば完成です。
ちなみにマーカーを引くたびに要素を囲むのが面倒な場合は、「AddQuicktag」というプラグインを使うのがおすすめです。
タグを設定するだけで、毎回ワンクリックで要素を挿入したり囲むことができます。
複数のマーカーを設定して動かす方法
上でご紹介した方法だと複数の文章にマーカーを引くことはできても、マーカーのスタイル(色や太さなど)は1種類しか設定できません。
そこで次は複数スタイルのマーカーを使用する方法をご紹介します。
1. classを定義する
.marker--002 { background-image: linear-gradient(90deg, rgb(252, 214, 158) 90%, transparent); background-repeat: no-repeat; background-size: 200% 100%; background-position: 0 bottom; animation: marker 3s ease 0s;}
別のマーカー用のclassを新たに作成します。
今回は例として、追加する2つ目のマーカーにmarker-move2
というclassをあてます。マーカーの色や太さは適宜変えてあげてください。
2. spanタグで囲む
<span class="marker-target--001">(マーカーを引きたい文字)</span><span class="marker-target--002">(マーカーを引きたい文字)</span>
2つ目のマーカーを引きたい文章を、上記のように別classを付与したspan
タグで囲んであげます。
今回は例としてmarker-target--002
というクラスにでもしましょうか。
3. JavaScriptコードを追記
$(window).scroll(function () { $(".marker-target").each(function () { $(".marker-target--001").each(function () { const markerPosition = $(this).offset().top; const diff = markerPosition - $(window).height(); if ($(window).scrollTop() > diff) { $(this).addClass("marker"); $(this).addClass("marker--001"); } else { $(this).removeClass("marker"); $(this).removeClass("marker--001"); } }); $(".marker-target--002").each(function () { const markerPosition = $(this).offset().top; const diff = markerPosition - $(window).height(); if ($(window).scrollTop() > diff) { $(this).addClass("marker--002"); } else { $(this).removeClass("marker--002"); } });});
マーカーが動かない場合の対処法
本カスタマイズをしたにも関わらずマーカーが動かない場合は、jQueryが読み込まれていないことが多いです。
ほとんどのWordPressテーマはデフォルトでjQueryを読み込んでいるはずですが、中にはそうでないものもあります。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
なのでその際は上記のようにCDNをbody
の閉じタグ直前などで読み込んでください。