蛍光ペンで下線を引いたようなラインマーカーのCSSとElementorでの使い方下線にアニメーションを追加して動かし方も解説

蛍光ペンを引いたようなラインマーカーの引き方と動かし方を解説します。

ワードプレスにはプラグインで「マーカーアニメーション」という便利なプラグインがあったのですが、プラグイン自体の更新が止まってしまい、尚且つ新しいバージョンのワードプレスでは、有効化しているだけでエラー画面になってしまう事象が発生し、おススメしません。

なんでもプラグインに頼るとこういうことは起こりえますので、ここはスタイルシートで実装するのが無難かなと思います。

当サイトはElementor proを使っていますが、テーマの土台はCocoonを使っています。

したがって、テーマ側の仕様でこのようなマーカーラインは引けます。

が、テーマを変えれば使えなくなってしまいますし、Elementorでもちゃんと使えるように、テーマ側の機能とは切り離して解説したいと思います。

今回は以下のような形で、「マーカーを引く」「動かす」の二段階にし、動く・動かないは選択できるようにしたいと思います。

蛍光ペンのように文字に対して下の方に薄いラインが入るようにする。
黄色、赤、青など色を選べるようにする
動く・動かないは使い分けられるようにする

スタイルシートを追加する
JavaScriptを追加する
HTMLコードを使って実装する
1. 動かないタイプの下線（段落すべて）
2. 動かないタイプの下線（span要素で文章の一部だけ）
ラインマーカーを動かす
1. Elementor（エレメンター）での実装方法

スタイルシートを追加する

マーカー装飾はいろんなページで使うことが多いと思いますので、テーマやワードプレス側のスタイルシートに以下を追加しましょう。

テーマ側に追加する場合/ ワードプレスのダッシュボード→外観→テーマファイルエディタ→「style.css」に追加　※この場合テーマを変更すると使えなくなります。

ワードプレス側に追加する場合/ワードプレスダッシュボード→外観→カスタマイズ→追加CSSに追加

※こういった他にもプラグイン等の機能でサイト全体にスタイルシートを追加できる場合があります

.marker_ylw{
background:linear-gradient(transparent 50%, rgba(255, 255, 102) 50%);
}
.marker_blue{
background:linear-gradient(transparent 50%, rgba(102, 204, 255) 50%) ;
}
.marker_pnk{
background:linear-gradient(transparent 50%, rgba(255, 187, 227) 50%) ;
}
.marker_red{
background:linear-gradient(transparent 50%, rgba(255, 198, 185) 50%) ;
}
.marker_anime{
background:linear-gradient(transparent 50%, rgba(255, 220, 123) 50%);
display: inline;
background-repeat: no-repeat;
background-size: 0% 100%;
transition:background-size 1.5s;
}
/* マーカーが引かれる際に付与するクラス */
.marker_anime.on {
/* 横方向を100%にして、マーカーを引く */
background-size: 100% 100%;
}

上記のスタイルシートで用意されている色は、黄色、ブルー、ピンク、レッドの4色。必要に応じてカスタマイズしてください。

また、「marker_anime」は動かすときに指定するクラスです。

JavaScriptを追加する

スタイルシートを追加しただけだと、「下線が視野に入ったときに動く」仕様ではありません。

したがって、動かしたい要素が画面内に来たら動かす仕組みを追加しないといけません。

以下のJavaScriptで追加できます。JavaScriptは、テーマ側の機能で挿入するか、ヘッダー＆フッターに要素を追加できるプラグインを使うか、使用するページだけに追加するかはお任せします。

テーマ側の機能で挿入/例えばCocoonには、Cocoon設定→アクセス解析・認証タブ→「その他のアクセス解析・認証コード設定」に於いて、ヘッド、ヘッダー、フッターにコードを入れ込める箇所があります。全ページに挿入され、テーマを変更すると使えなくなります。また、Cocoonは各投稿毎にCSSとJavaScriptを追加できる機能があるので、ページごとに使う・使わないを変更できます。ただ、汎用として使い回すのなら、ページごとに設定するのは少々面倒ではあります。
ヘッダー＆フッターにコードを挿入できるプラグイン「WPCode Lite」/ ヘッダーやフッターにコードを挿入できるプラグイン。プラグインなのでテーマを変更しても使用を続けられます。また投稿タイプの条件によって挿入する・しないを自動化できます。
テーマファイルに直接書き込む/外観→テーマファイルエディタのheader.php やjavascript.jsなどに直接書き込む。

//マーカー
window.addEventListener('scroll',function() {
  const height = window.innerHeight;                    //画面の高さを取得
  const scroll = this.pageYOffset;                      //スクロール量
  const marker = document.querySelectorAll('.marker_anime');  //マーカーを引く要素を取得
  const value = scroll - height + 300                   //後ろの数字を弄ることで、イベント位置をずらす

  // markerクラスを持っている要素全てに処理を行う
  marker.forEach(function(element){
      //要素が画面内の指定の位置に来たら「on」クラスをつける
      if (scroll > element.getBoundingClientRect().top + value) {
          element.classList.add('on')
      }
  });
})

CSSで蛍光ペンのようなマーカーを引く方法【アニメーション付き】

蛍光ペンでマーカーを引いたような、線。 Webサイトで良く用いられる表現なので、皆さんも何度か見たことあるんじゃないでしょうか？今回はそんなマーカーの引き方。画面に入った際に、スッと線を引いたような

HTMLコードを使って実装する

実際に使用するためには、スタイルシートを設定しなければなりません。

動かないタイプの下線（段落すべて）

ワードプレスのブロックエディタで、「段落すべてに設定」する場合は、ブロック設定の「高度な設定」にスタイルシートを設定します。

動かないタイプの黄色アンダーラインを引いたよ

動かないタイプの下線（span要素で文章の一部だけ）

ブロックエディタでしたら、HTMLコードブロックを挿入して手動でspan要素を追加していきます。

<p>文章の一部だけに<span class="marker_pink">ピンクのアンダーライン</span>を引いたよ</p>

文章の一部だけにピンクのアンダーラインを引いたよ

ラインマーカーを動かす

すでにJavaScriptを追加しているので、スタイルシートを追加するだけでOKです。

追加したい文章や文章の一部に「marker_anime」を追加します。これによる動かすバージョンと動かさないバージョンで使い分けることができます。

<p>文章の一部だけに<span class="marker_pink marker_anime">動く！！ピンクのアンダーライン</span>を引いたよ</p>

文章の一部だけにピンクのアンダーラインを引いたよ

Elementor（エレメンター）での実装方法

エレメンターの場合も、スタイルシートさえ設定できればいいので、テキストエディターなどを使って実装するだけです。

ぜひ、試してみてください。

蛍光ペンで下線を引いたようなラインマーカーのCSSとElementorでの使い方　下線にアニメーションを追加して動かし方も解説