「動くマーカーってなに？」
最近、ウェブサイトやブログを読んでいて動くマーカーを使って文章をハイライト（強調）しているのをよく見かけるようになりました。
では、実際にどうやってマーカーを動かしているのでしょうか？
この記事では、スタイルシート（css）とヘッダーシートにコピペするだけで簡単に動くマーカーが実装できる方法を紹介しています。ぜひ、試してみてください。
動くマーカー イメージ
#9eceff
マーカーが動くよ
#ffff66
マーカーが動くよ
#ff66ff
マーカーが動くよ
動くマーカーを実装する方法
動くマーカー（ハイライト）を実装するためには、テーマのcssとheader.phpの2つのファイルを編集する必要があります。
ヘッダーを編集する
ヘッダーでは、jQueryを読み込み動くマーカーの制御を設定します。
<!--マーカーアニメーション ここから-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
$(".highlight-b").each(function(){
var position = $(this).offset().top; //ページの一番上から対象の要素までの距離を変数として定義
var scroll = $(window).scrollTop(); //スクロールの位置を変数として定義
var windowHeight = $(window).height(); //ウインドウの高さを変数として定義
if (scroll > position - windowHeight){ //スクロール位置が対象の要素の位置を過ぎたときの「active」クラスを与える
$(this).addClass('active');
}
});
});
</script>
<!--マーカーアニメーション ここまで-->上記のコードをhead～/headの間にコピーすれば、ヘッダーの編集は完了です。
cssを編集する
cssでは、動くマーカーのデザインを設定できます。
カラーの変更やマーカーの太さなどは、ここを編集すれば好きなデザインに変更することができます。
/*-------------------------
動くマーカー
-------------------------*/
/* ブルー */
.highlight-b.active{
background-position: -100% .9em;
}
.highlight-b {
background-image: -webkit-linear-gradient(left, transparent 50%, #9eceff 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #9eceff 50%);
background-image: -ms-linear-gradient(left, transparent 50%, #9eceff 50%);
background-image: -o-linear-gradient(left, transparent 50%, #9eceff 50%);
background-image: linear-gradient(left, transparent 50%, #9eceff 50%);
background-repeat: repeat-x;
background-size: 200% .5em;
background-position: 0 .9em;
transition: all 3s ease;
font-weight: bold;
}
以上で、cssの編集は完了です。
投稿画面にショートコードを追加する
投稿画面にショートコードを追加するには、プラグイン「AddQuicktag」が便利です。
インストール後、有効化を行い、以下のように設定すれば完了です。
すると投稿画面でボタン一つで「動くマーカーの」ショートコードが使えるようになります。
まとめ
いかがだったでしょうか？
動くマーカーは、デザイン的に優れているというだけでなく、記事の読者の視線の動きを誘導するという点でも効果を発揮します。
サイトのデザインにこだわって競合と差別化を図りたいという方は、ぜひ試してみてください。
無料体験
Wordpressをしっかり学びたいなら・・・
TechAcademy WordPressプログラミングコース
- パーソナルメンターによる学習サポート
- HTML/CSS/PHPが身につくカリキュラム
- Wordpressテーマの作成スキルが身につく
TechAcademy公式サイト
この記事の執筆者
