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

という方に向けて「WordPressの記事内でプラグインを使わずにマーカーを動かす方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

動くマーカーの完成イメージ

こんな感じでスクロールした際にマーカーが引かれるようなアニメーションを挿入できます。

しかし正直これだけだとスクロールに合わせてマーカーが引かれるかイマイチ分かりませよね。その辺りは用意した以下のデモページを参考にしてみてください。

マーカーを動かす手順

方法はいたってシンプルかつ簡単です。

WordPressので蛍光マーカーを動かす方法

JavaScriptのコードをコピペ

$(window).scroll(function () {
  $('.marker-sentence').each(function () {
    let marker_position = $(this).offset().top;
    let diff = marker_position - $(window).height();
    if ($(window).scrollTop() > diff) {
      $(this).addClass("marker-move");
    } else {
      $(this).removeClass("marker-move");
    }
  });
});

上のコードをjsファイルにコピペします。

ちなみにやってることとしては、scrollTop()を使ってマーカーの文字の所までスクロールされた時にクラスを付与してあげてます。

テーマによって貼るべきファイルの名前が違かったり、無い場合もあるのでその辺りご注意ください。

ちなみにSANGOはファイルを作る必要があります。以下の方法でどうぞ。

「jsファイルあまり触りたくない…」という方は、マーカーを引きたいその記事の編集画面で以下の要素を直接貼る、という選択肢もあります。

<script>
  $(window).scroll(function () {
    $('.marker-sentence').each(function () {
      let top = $(this).offset().top;
      let marker_position = top - $(window).height();
      if ($(window).scrollTop() > marker_position) {
        $(this).addClass("marker-move");
      } else {
        $(this).removeClass("marker-move");
      }
    });
  });
</script>

CSSコードをコピペする

.marker-move{
  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 3s ease 0s; /*マーカーを引く速度*/
}
@keyframes marker{
  0%{
    background-position:right -100% bottom;
  }
  100%{
    background-position:0% bottom;
  }
}

上のCSSコードをコピペしてあげます。

background-sizeで要素の2倍の大きさの背景を用意してあげてそれを左から動かしてあげます。

以下の3点は値をいじってあげれば変更可能です。

【初心者向け】WordPressでCSSを編集する方法を徹底解説

spanタグで囲む

<span class="marker-sentence">(マーカーを引きたい文字)</span>

記事の編集画面で、マーカーを引きたい文字を上のようにspanタグで囲んであげれば完了です。

このようにマーカーも動くはず。これで終わりっ！

気軽にマーカーを引きたい時は

「マーカーを引くたびに要素を囲むの面倒…」という場合はAddQuicktagというプラグインを使うのが圧倒的オススメです。

タグを設定するだけで、毎回ワンクリックで要素を挿入したり囲んだりできる優れもの。

マーカーが動かない場合

jQueyが読み込まれていないせいでマーカーが動かない場合があります。

テーマによってはjQueryをテーマ側で読み込んでくれていないものも。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

その際は上のようにjQueryをフッター等で読み込んであげて下さい。
SANGOの方は以下の記事が参考になります。

まとめ

「Marker Animation」というマーカーを動かせる便利なプラグインもありますが、「プラグインの数はできるだけ減らしたい…」という方は今回の方法の方が良さげかもしれませんね。

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝