WordPressで動くマーカー(ハイライト)を実装する方法 コピペで簡単!

「動くマーカーってなに?」

最近、ウェブサイトやブログを読んでいて動くマーカーを使って文章をハイライト(強調)しているのをよく見かけるようになりました。

では、実際にどうやってマーカーを動かしているのでしょうか?

この記事では、スタイルシート(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」が便利です。
インストール後、有効化を行い、以下のように設定すれば完了です。

動くマーカーaddquicktag1

すると投稿画面でボタン一つで「動くマーカーの」ショートコードが使えるようになります。
動くマーカーaddquicktag2

まとめ

いかがだったでしょうか?
動くマーカーは、デザイン的に優れているというだけでなく、記事の読者の視線の動きを誘導するという点でも効果を発揮します
サイトのデザインにこだわって競合と差別化を図りたいという方は、ぜひ試してみてください。

無料体験

techacademyWordPressコース

Wordpressをしっかり学びたいなら・・・

TechAcademy WordPressプログラミングコース

  • パーソナルメンターによる学習サポート
  • HTML/CSS/PHPが身につくカリキュラム
  • Wordpressテーマの作成スキルが身につく

 

この記事の執筆者

しろくま
しろくま
WebMonsterの代表。京都大学においてMBA(経営学修士)を取得。現在、サラリーマンをする傍ら、Webコンテンツ制作、株式投資で収入を得ており、その経験をもとに会社に頼らず個人で稼ぐための方法を発信しています。