【プラグイン不要】WordPressで蛍光マーカーを動かす方法

WordPress
2021-07-02

完成イメージ

このように文中にマーカーが引かれるようなアニメーションを挿入できます。

上の例だとアニメーションが勝手に繰り返されているかと思いますが、本カスタマイズではスクロールしその文が見えた時に初めてマーカーが動くようになります。

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の閉じタグ直前などで読み込んでください。