WordPressに手書き風アニメーションを!「Rough Notation」の導入と使い方

WordPressで、テキストや要素を手書き風のアニメーションで目立たせたい!
そんなときにピッタリなのが「Rough Notation(ラフ・ノーテーション)」という軽量のJavaScriptライブラリです。

See the Pen rough-notationで動くハイライト by hiro (@hirochanpon) on CodePen.

この記事では、WordPressサイトにRough Notationを導入して、注目してほしい要素をアニメーションで強調する方法を解説します。


Rough Notationとは?

Rough Notation は、HTML要素に対して「手書き風の強調マーク」を付けられるJavaScriptライブラリです。

主な効果:

  • 下線を引く(underline)
  • 枠で囲む(box)
  • ハイライト(highlight)
  • 丸で囲む(circle)
  • 括弧で囲む(bracket)
  • 取り消し線(strike-through)

見た目に遊び心があって、ユーザーの目を引くことができます!


WordPressでの導入手順(プラグイン不要)

① Rough NotationのCDNを読み込む

まず、テーマの header.php または functions.php に以下のコードを追加して、Rough Notationを読み込ませます。

方法1:functions.php に追記(推奨)

function add_rough_notation_script() {
  if ( !is_admin() ) {
    echo '<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>';
  }
}
add_action('wp_head', 'add_rough_notation_script');

基本的な使い方(例:下線を引く)

① 投稿や固定ページにHTMLを記述:

ブロックエディターまたはカスタムHTMLブロックで、次のように書きます。

<p>これは <span id="highlight">重要なポイント</span> です。</p>

② JavaScriptを挿入

記事下や footer.php、もしくはSWELLなどのテーマであればカスタムJS挿入機能に以下のコードを追加。

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const el = document.getElementById('highlight');
    const annotation = RoughNotation.annotate(el, {
      type: 'underline',
      color: '#f00',
      animationDuration: 800
    });
    annotation.show();
  });
</script>

これで、読み込まれたときに「重要なポイント」の部分に赤い下線が手書きアニメーションで引かれます!


他のエフェクトを試す

以下の type を使うだけで、表現を変更できます:

type表現
'underline'下線
'box'四角で囲む
'highlight'マーカー風
'circle'丸で囲む
'strike-through'取り消し線
'bracket'括弧(brackets: ['left', 'right']などで調整)

スクロール表示時にアニメーション(応用)

IntersectionObserverを使えば、要素が表示されたタイミングで実行できます。

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const el = document.getElementById('highlight');
    const annotation = RoughNotation.annotate(el, {
      type: 'highlight',
      color: '#ffe600',
      animationDuration: 1000
    });

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          annotation.show();
          observer.disconnect(); // 一度表示で停止
        }
      });
    });

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

注意点と補足

  • ID で要素を指定するため、複数ある場合は classquerySelectorAll を使いましょう。
  • SWELLやSnow Monkeyなどテーマに応じて、JS挿入方法(フッター/カスタムスクリプト)が異なる場合があります。

まとめ

Rough Notationは、WordPressでも簡単に導入できて、手書き風の演出でユーザーの目を引く便利なライブラリです。

ちょっとした強調に、ラフで親しみのあるアニメーションを使ってみませんか?


参考リンク

高速・安心のWebサイト運営なら
Hostingerで決まり!

WordPressも秒速でインストール。高性能・低価格で、個人からビジネスまで幅広く対応します。

公式サイトを見る

Author

Table of Contents