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

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

SHARE

くるみ

蛍光マーカー引いてるようなアニメーションを実装したいんだな
ということで今回は

  • 「記事内で蛍光マーカーを動かしたい」
  • 「プラグイン無しでマーカーのアニメーションを実装したい」

という方に向けて「WordPressの記事内でマーカーを動かす方法」をまとめました。

本記事を参考にすれば、プラグインを使わずにコピペするだけで動くマーカーを記事内で使用できるようになります。

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

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

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

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

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

しかし正直これだけだとイマイチ挙動が分かりませよね。なのでその辺りは用意した以下のデモページを参考にしてみてください。

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

マーカーを動かすまでの手順

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

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

step1：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>

その場合はテキストモードで貼る必要があるのでご注意ください。

step2：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点は値をいじってあげれば変更可能です。どれをいじればいいのかは、上のコードの中のコメントアウトを参考にしてみてください。

step3：spanタグで囲む

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

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

このようにマーカーも動くはず。これで完成です

お疲れ様！

くるみ

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

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

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

複数のマーカーを設定して動かす方法

色や太さを変えて複数のマーカーを設定したい場合もありますよね。

その場合は以下の方法で実現できます。

step4：クラスを定義する

上の「step2：CSSコードをコピペする」で行なったように、別のマーカーを設定してあげます。

今回の例として追加する2つ目のマーカーは「marker-move2」というクラスにします。マーカーの色や太さは適宜変えてあげてください。

.marker-move2{
  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;
}

step5：spanタグで囲む

2つ目のマーカーを引きたい文章を、以下のように別のクラスを付与したspanタグで囲んであげます。

「marker-sentence2」というクラスでにもしましょうか。

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

step6：JavaScriptのコードを追記

$(window).scroll(function () {
  //ここに追記
});

上のように、「step1：JavaScriptのコードをコピペ」でコピペしたjsコードの中に「$(window).scroll…});」という記述がありますよね。

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

その中に上のjsのコードを追記してあげます。「//ここに追記」の箇所にですね。

$(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");
    }
  });
  $('.marker-sentence2').each(function () {
    let marker_position = $(this).offset().top;
    let diff = marker_position - $(window).height();
    if ($(window).scrollTop() > diff) {
      $(this).addClass("marker-move2");
    } else {
      $(this).removeClass("marker-move2");
    }
  });
});

1つ目のマーカーも設定している場合は、結果的にこのような形になります。

注意
上のものはCSSで「marker-move2」というクラスを指定し、マーカーをひきたい文章を<span class=”marker-sentence2″></span>で囲んだ場合の例です。
これでmarker-sentence2で囲んだ文章に、marker-move2で設定したマーカーが引かれます。

更にマーカーを設定したい場合

更に別のマーカーを設定したい場合は、同じようにstep4〜6を繰り返してあげればOKです。

CSSでマーカーの線の設定をして、jsを追記してあげればいいんだね

くるみ

これで色や太さの違うマーカーを同じ記事内で使用できます。

マーカーが動かない場合の対処法

マーカーが動かない場合は、jQueyが読み込まれていないのが原因であることが多いです。

ほとんどのテーマはデフォルトでjQueryを読み込んでくれてるはずですが、中にはそうでないものもあります。

なのでその際は以下のようにフッター等で読み込んであげて下さい。

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

SANGOの方は以下の記事が参考になります。

参考 jQueryの使い方SANGO

まとめ

記事を読んでくれてありがとう

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

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

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


3 COMMENTS

加藤　

marker-moveを名前を変えて作った複製例の記述を記事に追加して頂くことは可能でしょうか？

返信する
おはようポテトのアイコン おはようポテト

加藤さん

マーカーを複数設定する方法について追記させていただきました。
ご確認いただけると幸いです！

返信する
加藤

さすがでございます。早々のご対応、厚くお礼申し上げます。m(__)m
お陰様で無事に複製もできました！

返信する

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

新卒1年目のひよっこWEBエンジニア。業務ではPHPを触り、プライベートではNext.jsで宅配冷凍弁当の比較サイトとWeb制作に役立つツールの開発・運営をしています。お問い合わせはこちらよりどうぞ。

前の記事

WordPressでCSSコードを追加する方法
【初心者向け】WordPressでCSSを編集する方法を徹底解…

次の記事

【SANGO】カテゴリー一覧をオシャレにカスタマイズする方法
SANGOのカテゴリーメニューのカスタマイズ方法