やりたいことは、スクロールしたらミョイ〜ンとマーカー。
スクロールしたら、記事の強調したい部分に
マーカーがミョイ〜ンってしたい。
でも、自前で実装されてる例が少なく、
ちょっぴり調べたので、共有。
こちらが完成した時の動き!
やっぱり動きがあると、マーカーって気持ちいい・・・

主にやることは以下の3点!
実装までの概要をまとめます!
- function.phpに管理画面から「マーカー」を選択可能にする
- スクロールしたら発火用のclass(筆者は:.scrollin)を付加するjsを記述する
- 発火した後の動きと、マーカーの色などを指定するcss(SCSS)を記述する
細かいところは、各々の環境で調整してくださいね。
1. 管理画面から「マーカー」を選択可能にする
こちらのコードをfunction.phpにコピペします。
function tiny_style_formats( $settings ) {
$style_formats = array(
array(
'title' => 'マーカー',
'inline' => 'span',
'classes' => 'marker',
'wrapper' => 'true',
),
);
$settings[ 'style_formats '] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'tiny_style_formats' );
//スタイル項目追加と位置
function original_styles_button( $buttons ){
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}
add_filter('mce_buttons', 'original_styles_button' );
コピペ後、管理画面のエディターでクラシックを選択すると、
“マーカー”というスタイルが追加されます。
マーカーを引いて欲しい部分をドラッグして、スタイルで”マーカー”を選択。
そうすると、スクロールした時にミョい〜んって伸びます。

2. スクロールしたらクラスを付加するjs
こちらを適正なところに記述。
$(window).scroll(function () {
$(".marker").each(function () {
var elemPos = $(this).offset().top,
scroll = $(window).scrollTop(),
windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 100) {
$(this).addClass("scrollin");
}
});
});
3. css(SCSS)はこちら
/* ### マーカーアニメーション
--------------------------------------------*/
.marker {
background: -webkit-linear-gradient(left, $cospot-lime-yellow 50%, transparent 50%);
background: -moz-linear-gradient(left, $cospot-lime-yellow 50%, transparent 50%);
background: linear-gradient(left, $cospot-lime-yellow 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% .8em;
background-position: 100% .5em;
transition: 2s;
font-size: 16px;
&.scrollin {
background-position: 0% .5em;
}
}
みんなプラグインで実装・・・いいのかい?それで。
よくあるオシャレ系のいけてるブログさんの記事って、
スクロールすると、強調すべき部分にマーカーが出てくるので、
俺っちもそれがやりたい!ってなってググった結果、
結構みなさん、何の躊躇いもなくプラグインをブチこまれていて・・・
基本的に余計な機能とかもぶち込まれるのがほとんどなので、
開発側としては、できるだけプラグインは避けたいんですよね・・・
ほら、Wordpressの管理画面って、メニュー増やすと地獄じゃなァい?
なんで、できるだけ余計なプラグインをおいそれとぶち込んで、
メニューボタンまみれなんてことは避けたいんすよね。
ほんとやめよ?適当にプラグイン入れるの・・・
アプデ後によくわからんことになる原因にもなるし・・・。
勉強にもなるし、アカンとなった場合でも原因の特定・解決も早いので、
自前で実装できるようになろ。