普通の表情のせつこさん

こんにちは!カスタマイズ大好きせつこです。

今回は、「文章に動くマーカーを引こう」というカスタマイズをしていきます。

視線誘導効果があるので、絶対読んで欲しい1文を目立たせたい時などに役立ちます。

スクロールして、見える範囲に入ったらマーカーが引かれます。

笑顔のせつこさん

では、さっそくカスタマイズしていきます!

手順
  1. CSSをコピペ
    style.cssなどにコードをコピペ
  2. PHPをコピペ
    functions.phpにコードをコピペ
  3. ショートコードをコピペ
    実際に使うショートコードをコピペ
  4. 使い方を覚える
    ちょっと使い方にクセがあるので覚えて終了!

「文章に動くマーカーを引く」の作成手順

1.CSSをコピペ

/*文章に動くマーカーを引く*/
.move_marker{
  background: linear-gradient(left, transparent 65%, #ffff00 65%);/*ここのカラーコードを変えるとマーカーの色が変わる*/
  background: -webkit-linear-gradient(left, transparent 50%, #ffff00 50%);/*ここのカラーコードを変えるとマーカーの色が変わる*/
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 1.5s ease;/*ここの1.5sを0.5や2.5などにするとマーカーを引く速度が変わる*/
  font-weight: bold;
}

.move_marker.active{
  background-position: -100% 10px;
}

2.PHPをコピペ

//文章に動くマーカーを引く
function move_markter() {
echo <<< EOM
<script>
jQuery(function($){
	$(window).scroll(function (){
	 $(".move_marker").each(function(){
	   var position = $(this).offset().top;
	   var scroll = $(window).scrollTop();
	   var windowHeight = $(window).height();
	   if (scroll > position - windowHeight){
		 $(this).addClass('active');
	   }
	 });
	});
});
</script>
EOM;
}
add_action( 'wp_print_footer_scripts', 'move_markter' );

function move_markerFunc( $atts, $content = null ) {
  $content = do_shortcode( shortcode_unautop($content) );
  if($content){
    return '' . $content . '';
  }
  return '';
}
add_shortcode('move-marker', 'move_markerFunc');

3.ショートコードをコピペ

[move-marker]ここにテキストが入ります。[/move-marker]

4.使い方を覚える

動くマーカーを引きたい文章を下記のように囲むだけです!

[move-marker]ここに動くマーカーを引きたい文章。[/move-marker]

「文章に動くマーカーを引く」のまとめ

このページでは、「【コピペで簡単】文章に動くマーカーを引こう|視線誘導でUXまであげられる!」について書きました。

UXが上がるかは分かりませんが、みられる確率は上がります。

動くので重そうに見えますが、軽量なコードなので心配ありません。

     
普通の表情のせつこさん

私はこれを導入してからCVRがあがりました!

簡単に使えるので、ぜひ試してみてはいかがでしょうか。

それではまたー!