くるみ
- 「記事内で蛍光マーカーを動かしたい」
- 「プラグイン無しでマーカーのアニメーションを実装したい」
という方に向けて「WordPressの記事内でマーカーを動かす方法」をまとめました。
本記事を参考にすれば、プラグインを使わずにコピペするだけで動くマーカーを記事内で使用できるようになります。
お品書き
動くマーカーの完成イメージ
このように文字にマーカーが引かれます
マーカーを細くすることも出来ます
もちろん色を変えることも出来ます
こんな感じで、スクロールした際にマーカーが引かれるようなアニメーションを挿入できます。
しかし正直これだけだとイマイチ挙動が分かりませよね。なのでその辺りは用意した以下のデモページを参考にしてみてください。
WordPressので蛍光マーカーを動かす方法
マーカーを動かすまでの手順
方法はいたってシンプルかつ簡単です。
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つ目のマーカーも設定している場合は、結果的にこのような形になります。
更にマーカーを設定したい場合
更に別のマーカーを設定したい場合は、同じようにstep4〜6を繰り返してあげればOKです。
くるみ
マーカーが動かない場合の対処法
マーカーが動かない場合は、jQueyが読み込まれていないのが原因であることが多いです。ほとんどのテーマはデフォルトでjQueryを読み込んでくれてるはずですが、中にはそうでないものもあります。
なのでその際は以下のようにフッター等で読み込んであげて下さい。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
SANGOの方は以下の記事が参考になります。
参考 jQueryの使い方SANGOまとめ
「Marker Animation」というマーカーを動かせる便利なプラグインもありますが、「プラグインの数はできるだけ減らしたい…」という方は今回の方法の方が良さげかもしれませんね。
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
marker-moveを名前を変えて作った複製例の記述を記事に追加して頂くことは可能でしょうか?
加藤さん
マーカーを複数設定する方法について追記させていただきました。
ご確認いただけると幸いです!
さすがでございます。早々のご対応、厚くお礼申し上げます。m(__)m
お陰様で無事に複製もできました!