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
で要素を指定するため、複数ある場合はclass
とquerySelectorAll
を使いましょう。- SWELLやSnow Monkeyなどテーマに応じて、JS挿入方法(フッター/カスタムスクリプト)が異なる場合があります。
まとめ
Rough Notationは、WordPressでも簡単に導入できて、手書き風の演出でユーザーの目を引く便利なライブラリです。
ちょっとした強調に、ラフで親しみのあるアニメーションを使ってみませんか?