動くマーカーをCSSとjQueryで自作する方法を解説【プラグインなし】

ブログ記事で時々このような動くマーカーを目にしますよね。何気なくお洒落だな程度に感じていましたが、いざ使用してみるとセッション時間が向上して、アフィリエイトサイトでは売り上げも上がっちゃいました！

特にSEOで上位表示を狙っているとアフィリエイトサイトも文字数勝負となってきます。しかし、１つの商品のページで5000文字も書いていると本当に伝えたい文章がぼやけてしまいますよね。

テスト勉強では蛍光ペンを引いて大事な箇所を強調していましたよね！ブログ記事にも同じように動くマーカーに自然に目がいきますので、自然に強調したい文章を伝えれます。

この記事ではプラグインを一切使わずにCSSとjQueryで動くマーカーを実装する方法を解説します。

動くマーカーの開始位置を判定させる為のjQuery

動くマーカーを実装させる為にはスクロールを判定するプログラムを追加する必要があります。これを導入しないとページ読み込み時にマーカーが動いてしまうので、モーションが表示されません。

jQueryのコードに関してはWeb制作会社のWEBLAB様より拝借させていただいてます。このコードは非常に使い勝手が良くこのような動く画像を配置させる時にも重宝します。

$(window).scroll(function (){
$(".marker-animation").each(function(){
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
var scroll = $(window).scrollTop(); //スクロールの位置を取得
var windowHeight = $(window).height(); //ウインドウの高さを取得
if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
$(this).addClass('active'); //クラス「active」を与える
}
});
});

上記のコードを<script></script>で挟んで記入します。コードの張り付け方法はテーマによって違いますが、凡そのテーマではheader.phpに記載します。

デフォルトで読み込んでいるjQueryより下に配置する為に</head>の直前に配置しましょう。また、特に必要がない場合はコメントアウト（//～～）は削除しておきましょう。容量が僅かですが軽くなります。

お使いのテーマがjQueryを読み込んでいなければ上記コードの前にコチラの一行を追加してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

セレクタ名を変更する場合は「.marker-animation」の箇所を変更します。

動くマーカーを実装するためのCSSを追加する

動くマーカーを実装する為のCSSをマーカーの太さや好きな色を追加しやすいように各項目毎に説明しながら解説していきます。

当サイトで使用しているCSS全文はコチラです。

.marker-animation.active{
background-position: -100% .5em;
}
.marker-animation {
display: inline;
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
font-weight: bold;
}
.ma-red{
background-image: -webkit-linear-gradient(left, transparent 50%, #fcc 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #fcc 50%);
background-image: linear-gradient(to rigth, transparent 50%, #fcc 50%);
}
.ma-blue {
background-image: -webkit-linear-gradient(left, transparent 50%, #9cf 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #9cf 50%);
background-image: linear-gradient(to right, transparent 50%, #9cf 50%);
}
.ma-green {
background-image: -webkit-linear-gradient(left, transparent 50%, #cfc 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #cfc 50%);
background-image: linear-gradient(to right, transparent 50%, #cfc 50%);
}
.ma-yellow {
background-image: -webkit-linear-gradient(left, transparent 50%, #ff6 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #ff6 50%);
background-image: linear-gradient(to right, transparent 50%, #ff6 50%);
}

そのままコピペして使っていただいて構いません。

プロパティ毎の解説

.marker-animation.active{background-position: -100% .5em;}

動くマーカーの仕組みはマーカーを画面外に配置してスクロール位置が指定の要素を通過するとマーカーの位置まで移動する仕組みになっています。このプロパティでマーカーを画面外に隠しています。

.marker-animation {
display: inline;
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
font-weight: bold;
}

カスタマイズ要素だけ説明します。

transition: all 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

「3s」はマーカーが引き終わるまでの時間を指定しています。2秒にしたいなら「2s」と書き換えてください。
「cubic-bezier」でアニメーションの動きを指定しています。当サイトではインパクトを持たせるため多少独特のアニメーションにしています。ノーマルがいいなら「ease」と記入します。

font-weight: bold;

文字の太さを指定しています。数値で指定することもでき「100」が最小「900」が最大です。boldは太いの意味で数値の700と同じサイズです。normalと書くと400と同じサイズになります。マーカーを引きたい文字はインパクトを与えたい時に使用しますので、bold推奨です。

色の追加方法とプロパティの解説

色を増やしたい時の追加方法を解説します。

.ma-red{
background-image: -webkit-linear-gradient(left, transparent 50%, #fcc 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #fcc 50%);
background-image: linear-gradient(to rigth, transparent 50%, #fcc 50%);
}

上は赤色のマーカーのCSSとなります。1行目と2行目に「-webkit-」「-moz-」とついていますが、これはベンダープレフィックスと呼ばれる古いブラウザにこれは新しい機能ですよと伝える役割を持っています。

「-webkit-」は Google ChromeとSafari、「-moz-」はFirefoxのブラウザに対応しています。ベンダープレフィックスは省略してもらっても構いません。当サイトでは念のために記入しております。

ベンダープレフィックス有りと無しで「linear-gradient」の頭文字の書き方が違います。ベンタープレフィックスを使用する時はグラデーションを開始する位置を書きます。つまり「left」ですね。ベンダープレフィックス無しの時はグラデーションの向きを指定します「to rigth」で右の方向へ、と指定しているわけです。

ベンダープレフィックス無しの時に「left」と記載すると効果もなく検証モードで「warning」と表示されてしまいます。

色を追加したい時は「#fcc」の箇所を変更してセレクターの名前を変えて追記します。半透明にしたい等細かい指定をする場合はRGBA値を使用してください。

動くマーカーの使い方

jQueryとCSSの入力が終われば、動かしたい文字をspanやstlongで囲んでクラスを指定すればOKです。

<span class=”marker-animation ma-blue”>ここに文章を入力</span>

ここに文章を入力

AddQuicktagプラグインを使って好きな時にタグを呼び出しましょう。

まとめ

この記事では動くマーカーをjQueryとCSSで自作する方法を解説しました。

少しのカスタマイズでお洒落なマーカーを実現できます。本当に注目してほしい文章にはばんばんマーカーを使って目を引かせましょう。