【プラグイン不要】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

ちなみにマーカーを引くたびに要素を囲むのが面倒な場合は、「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の閉じタグ直前などで読み込んでください。