...

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

CSSを使って蛍光マーカーを動かす方法

どうもおはようポテト(@ohayoupoteto22)です。

蛍光マーカー引いてるようなアニメーションを実装したい…

ということで今回は

「記事内で蛍光マーカーを動かしたい」

「プラグイン無しでマーカーのアニメーションを実装したい」

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

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

ブログ主

早速いってみよう!

マーカーの完成イメージ

このように文字にマーカーが引かれます

 

マーカーを細くすることも出来ます

 

もちろん色を変えることも出来ます

 

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

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

参考 デモページぽてちる

マーカーを動かす手順

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

手順
step1
JavaScriptのコードをコピペ
step2
CSSコードをコピペ
step3
spanタグで囲む
レッツゴー!

ソロモン

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はファイルを作る必要があります。以下の方法でどうぞ。

参考 カスタマイズでJavaScriptを利用する方法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点は値をいじってあげれば変更可能です。

マーカーの色

マーカーの太さ

マーカーを引く速度

ブログ主

もし複数の種類のマーカーを使いたい場合は、その数ぶんmarker-moveを名前を変えて作ってあげればいいんだね
WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSコードを追加する3つの方法

 

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の方は以下の記事が参考になります。

参考 jQueryの使い方SANGO

まとめ

以上、「プラグイン無しでWordPressで蛍光マーカーを動かす方法」でした。

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

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA