パーツ番号 06-02-07 ・ CSSのみ

マーカーハイライト注釈

本文中の重要語に蛍光マーカーが左から引かれる演出。io-revealで画面内に入ると塗られます。WordPress記事の要点強調に。スクロールで表示すると動作します。

blogscrollcss

プレビュー

ソースコード

HTML

<div class="d06-02-07-text io-reveal">
          <p>コンテンツ制作で最も大切なのは<span class="d06-02-07-mk">読者を第一に考える姿勢</span>です。誰に何を届けるのかを明確にし、<span class="d06-02-07-mk d06-02-07-mk2">具体的な検索意図</span>に応えることで、記事は自然と読まれるようになります。</p>
        </div>

CSS

.prev.d06-02-07{background:#fff}
        .d06-02-07-text{max-width:320px}
        .d06-02-07-text p{margin:0;font-size:14px;line-height:2;color:#2a3042}
        .d06-02-07-mk{background-image:linear-gradient(transparent 60%,#fff59a 60%);background-repeat:no-repeat;
          background-size:0 100%;padding:0 1px;transition:background-size .8s .2s ease}
        .d06-02-07-mk2{background-image:linear-gradient(transparent 60%,#b6f0c4 60%);transition-delay:.6s}
        .d06-02-07-text.is-in .d06-02-07-mk{background-size:100% 100%}

クラス名 .d06-02-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。