絞れば、出てくる、アイディア。

ワードプレスで文字にマーカーのような装飾をつける方法

Webサイトやブログの記事を読みやすくするために欠かせないのが「強調表現」です。
その中でも、文字の後ろに蛍光ペンのような「マーカー風の装飾」をつける方法は、視認性が高く、読者や訪問者の注目を集める効果があります。

今回の記事では、無料テーマ「Cocoon」とページビルダープラグイン「Elementor」で文字にマーカーの装飾をつける方法を中心に、手順をスクリーンショット付きで詳しく解説します。

デザイン性の高いアニメーション付きのマーカー

を実装する方法も紹介します！

この記事の目次

Cocoonテーマの場合 – 標準のマーカー機能で簡単に装飾する方法
Elementorを使用している場合のマーカー装飾方法
スクロールに合わせて引かれる「アニメーション付きマーカー」を作る方法

1. Cocoonテーマの場合 - 標準のマーカー機能で簡単に装飾する方法

ワードプレスの人気無料テーマ「Cocoon」には、初めからマーカー風の強調機能が搭載されています。CSSなどのカスタム不要で装飾することができます。

↑Cocoonテーマを利用しているワードプレスで投稿画面（固定ページでも可）を開き、装飾を付けたいテキストを選択します。

↑テキストを選択すると表示されるメニューの右端にある下三角マークをクリックし、「ハイライト」をクリックします。

↑「テキスト」と「背景」が選択できるので「背景」を選択し、好みの色を設定します。
背景を濃い色にした場合は、テキストを白にするなどの調整も可能です。

↑背景とテキストの色はカラーコード（HEX）でも指定することができます。
カラーチャートで好きな色をその場で直感的に決めることも可能です。

2. Elementorを使用している場合のマーカーの装飾方法

Elementorは、ワードプレスのWEBサイト制作やブログ作成におすすめのページビルダープラグインです。Elementorを使用している場合のマーカーの装飾方法についても解説します。

※今回はHello Elementor テーマの子テーマ「Hello Elementor Child」を利用している場合を例としてご紹介します。（その他のテーマでも基本的には方法は同じです）

↑Elementorの投稿画面から、マーカー装飾を付けたいテキストエディター全体を選択します。
（画面左上に「テキストエディターを編集」と表示されている状態

テキストの編集方法を「コード」にし、テキスト入力欄のマーカーを引きたい箇所をで囲みます。

完了したら、一度保存して、ワードプレスのトップメニューに戻ります。

↑ワードプレスのメニューから「外観」にマウスをかざし、「カスタマイズ」をクリックします。

↑カスタマイズの画面に入ったら、「追加CSS」をクリックします。

↑追加CSSに下記のコードを貼り付けます。
（既に何か別のコードが入っている場合は消さずに２〜３行空けてその下に追記します）
コードを貼り付けたら「公開」をクリックします。

				
					.marker {
  background: linear-gradient(transparent 60%, #ffeb3b 60%);
  padding: 2px 4px;
}

マーカーの色を変更したい場合は色コード（#から始まる部分）、透明度を変更したい場合はtransparentの数値を変更することでカスタマイズ可能です。

↑先ほどマーカーを追加した投稿を確認すると、囲った部分にマーカーが付いています。
マーカー部分を変更したい場合は投稿の編集画面からで囲う部分を変更するだけです。

これでElementorでもテキストの一部分にマーカーをつけることができました！

3. スクロールに合わせて引かれる「アニメーション付きマーカー」を作る方法

ワードプレスでは、少し工夫するだけで画面のスクロールに合わせてマーカーが引かれるアニメーションもつけることができます。
※今回はテーマ「Cocoon」を使用している場合の方法を例として紹介します。

こんな感じでアニメーション付きのマーカー

を作ることが可能です！

↑アニメーション付きマーカーを作りたいテキストを含む文章はテキストウィジェットではなく「カスタムHTML」で作成します。

↑カスタムHTMLにコードを入力します。
アニメーションマーカーを付けたい箇所を「」で囲みます。

下記のコード例は「みかんは「冬の果物」として定着」部分にマーカーを引く場合のコードです。

				
					特に昭和30年代から40年代にかけて
<span class="marker-animate">みかんは「冬の果物」として定着</span>
しました。テレビや雑誌などのメディアを通じて、みかんの健康効果や栄養価が
広く知られるようになり、家庭の食卓に欠かせない存在となりました。

↑子テーマ「Cocoon child」をインストール＆有効化していない場合は、Cocoon childをインストールします。

↑ワードプレスのメニューから「外観」→「テーマファイルエディター」を選択します。
画面右側の「テーマファイル」の部分から「tmp-user」という箇所を開き、「footer-insert.php」をクリックして開きます。

↑footer-insert.phpに下記のコードを貼り付けます。
既に記入されているコードを消さずに、その下に貼り付け、画面下部の「ファイルを更新」をクリックします。

※テーマファイルを編集する場合は、念の為メモなどにバックアップをとっておきます。

				
					<script>
document.addEventListener("DOMContentLoaded", () => {
  const markers = document.querySelectorAll('.marker-animate');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {

      if (entry.isIntersecting) {
        // 遅延してアニメーション開始（300ms）
        const delay = entry.target.dataset.delay ? Number(entry.target.dataset.delay) : 300;
        setTimeout(() => {
          entry.target.classList.add('active');
        }, delay);
      } else {
        // 画面外に出たらリセット
        entry.target.classList.remove('active');
      }

    });
  }, { threshold: 0.4 });

  markers.forEach(el => observer.observe(el));
});
</script>

記事に戻り確認すると、マーカーにアニメーションが付いているはずです！

まとめ😺

今回の記事では、ワードプレスを利用している場合のテキストへのマーカーの装飾をつける方法を紹介しました。

今回は例としてワードプレステーマ「Cocoon」での場合を紹介しましたが、他のテーマでも応用できる方法になっています。
また、Elementorでの方法はテーマに関わらずEementorを使っている場合は同様の方法で実装することが可能です。
ぜひ今回の記事を参考にマーカー装飾の追加を試してみてください！

2026-01-09
Friday