【プラグイン不要】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」というプラグインを使うのがおすすめです。
タグを設定するだけで、毎回ワンクリックで要素を挿入したり囲むことができます。
複数のマーカーを設定して動かす方法
上でご紹介した方法だと複数の文章にマーカーを引くことはできても、マーカーのスタイル(色や太さなど)は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
の閉じタグ直前などで読み込んでください。