【WordPress】HTMLブロック1つで、LINE風の背景エフェクトを実装（季節の演出）

プラグインは不要。WordPressの『カスタムHTMLブロック』1つで完結。
LINEのトーク画面の背景エフェクトのような、桜や紅葉が舞う演出を自分のブログで再現します。

なぜ「HTMLブロック」と「p5.js」なのか？

「演出を加えたいならプラグインを使えばいいのでは？」と思うかもしれません。しかし、「自由度」と「サイトの健康（軽さ）」を両立させるには、この組み合わせが最強の選択肢だと思います。

「HTMLブロック」を選ぶ理由：安全な実験場

通常、サイト全体にJavaScriptを反映させるには、テーマの深層部（header.phpなど）を書き換える必要があります。しかし、これには「コードを書き間違えるとサイト全体が表示されなくなる」というリスクが伴います。

ページ限定： HTMLブロックなら、そのページだけにコードを配置できます。「トップページだけ桜を降らせたい」という願いが、他のページに影響を与えず安全に叶います
管理がラク：演出をやめたい時は、ブロックを削除するだけ。テーマを汚さない「クリーンなカスタマイズ」が可能です。

「p5.js」を選ぶ理由：クリエイティブのショートカット

JavaScriptだけでゼロからアニメーションを作るのは、正直かなり大変です。そこで今回は、便利な道具「p5.js」というライブラリを使います。

「描く」ことに特化：「どんな色で、どんな形を、どのくらいの速さで動かすか」といった設定が直感的な言葉で書かれているので、コードのどこをいじればいいか一目瞭然です。
SVGパスとの相性が抜群：複雑な「桜の花びら」や「紅葉」の図形は、座標データ（パス）として読み込むだけです。

💡1からすべて自分で書く必要はありません。
すでにあるコードを使い、肝心な部分だけを書き換えるだけです。

コピペでできる！背景エフェクトの設置方法

まずは、WordPressの編集画面で以下の手順を進めてください。

設置したいページ（トップページ推奨）の編集画面を開く。
「＋」ボタンから「カスタムHTMLブロック」を追加。
「カスタムHTMLブロック」は記事の末尾に置くのがベストです
下のコードを丸ごとコピーして貼り付ける。
画面右上の「新しいタブでプレビュー」で確認、桜が舞えば成功です！

<div id="koro-sakura-canvas"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.min.js"></script>

<script>
// 🌸 こだわりの桜吹雪：設定図
const currentPath = `M 42.24 28.02 L 42.55 27.97 L 42.71 27.91 L 42.82 27.78 L 50.74 14.15 L 51.35 13.70 L 52.10 13.84 L 52.10 13.84 L 52.15 13.87 L 56.41 17.85 L 60.01 22.61 L 63.06 28.15 L 65.64 34.75 L 67.55 41.93 L 68.76 49.77 L 69.15 57.57 L 68.73 64.75 L 67.77 69.89 L 66.15 74.99 L 60.92 85.59 L 53.04 96.49 L 43.31 106.54 L 42.46 106.87 L 41.60 106.55 L 33.27 98.28 L 26.30 89.46 L 21.09 80.60 L 17.61 71.72 L 16.06 64.21 L 15.59 56.09 L 16.17 47.66 L 17.81 39.26 L 20.29 31.65 L 23.69 24.60 L 27.73 18.70 L 32.57 13.75 L 32.64 13.70 L 33.40 13.55 L 34.03 14.01 L 42.05 27.93 L 42.15 28.02 L 42.24 28.02 Z`;

// SVGパスをp5.jsで描画するための関数（おまじない）
const drawSVGPath = (p5, pathData) => {
  const commands = pathData.match(/[a-zA-Z][^a-zA-Z]*/g);
  if (!commands) return;
  let cx = 0, cy = 0; 
  let isFirstM = true; 
  for (let command of commands) {
    const cmd = command[0];
    const args = (command.slice(1).match(/-?\d*\.?\d+/g) || []).map(Number);
    switch (cmd) {
      case "M": 
        if (!isFirstM) p5.endShape(); 
        p5.beginShape(); 
        cx = args[0]; cy = args[1]; p5.vertex(cx, cy); 
        isFirstM = false;
        break;
      case "m": 
        if (!isFirstM) p5.endShape();
        p5.beginShape();
        cx += args[0]; cy += args[1]; p5.vertex(cx, cy); 
        isFirstM = false;
        break;
      case "L": cx = args[0]; cy = args[1]; p5.vertex(cx, cy); break;
      case "l": cx += args[0]; cy += args[1]; p5.vertex(cx, cy); break;
      case "H": cx = args[0]; p5.vertex(cx, cy); break;
      case "h": cx += args[0]; p5.vertex(cx, cy); break;
      case "V": cy = args[0]; p5.vertex(cx, cy); break;
      case "v": cy += args[0]; p5.vertex(cx, cy); break;
      case "C":
        p5.bezierVertex(args[0], args[1], args[2], args[3], args[4], args[5]);
        cx = args[4]; cy = args[5]; break;
      case "c":
        p5.bezierVertex(cx + args[0], cy + args[1], cx + args[2], cy + args[3], cx + args[4], cy + args[5]);
        cx += args[4]; cy += args[5]; break;
      case "Z": case "z": p5.endShape(p5.CLOSE); isFirstM = true; break;
    }
  }
  p5.endShape(); 
};

const sketch = (p) => {
  let petals = [];
  // 💡 【調整ポイント】花びらの数（PCは50個、スマホは30個）
  const NUM = p.windowWidth > 600 ? 50 : 30;

  class Leaf {
    constructor() {
      // 💡 【調整ポイント】色（330〜350はピンク系。秋は10〜50に！）
      this.hue = p.random(330, 350);
      this.alpha = p.random(0.4, 0.7); // 透明度
      this.size = 50; // 画面外に消えるタイミングを調整する数字
      this.xRadius = p.random(10, 20); // 左右のゆらゆら幅
      this.baseX = p.random(p.width); // 降り始める横位置
      this.margin = 150; 
      this.pos = p.createVector(this.baseX, p.random(-p.height, p.height));
      this.angle = p.createVector(p.random(360), p.random(360));
      this.velocity = p.createVector(1, 2); // 💡 落ちるスピード（2を大きくすると速くなる）
      // 💡 【調整ポイント】大きさもスマホなら少し小さめに（PC: 0.3~0.7, スマホ: 0.2~0.4）
      this.scale = p.windowWidth > 600 ? p.random(0.3, 0.7) : p.random(0.2, 0.4);
    }

    move() {
      this.angle.add(this.velocity);
      // ゆらゆら揺れながら落ちる計算
      this.pos.x = this.baseX + this.xRadius * p.cos(p.radians(this.angle.y));
      this.pos.y += this.velocity.y;

      // 画面の下まで行ったら上に戻る
      if (this.pos.y > p.height + this.margin) {
        this.pos.y = -this.margin; 
        this.baseX = p.random(p.width);
      }
    }

    display() {
     // 💡【調整ポイント】 HSBの色の「彩度:鮮やかさ」と「明度:明るさ」をここで決めています
     // p.fill(色相, 鮮やかさ, 明るさ, 透明度)
      p.fill(this.hue, 70, 100, this.alpha);
      p.push();
      p.translate(this.pos.x, this.pos.y);
      p.rotate(p.radians(this.angle.x)); // くるくる回す
      p.scale(this.scale);
      drawSVGPath(p, currentPath); 
      p.pop();
    }
  }

  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight).parent('koro-sakura-canvas');
    p.colorMode(p.HSB);
    p.noStroke();
    for (let i = 0; i < NUM; i++) { petals.push(new Leaf()); }
  };

  p.draw = () => {
    p.clear();
    petals.forEach((petal) => {
      petal.display();
      petal.move();
    });
  };

  p.windowResized = () => {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
  };
};

// 実行！
new p5(sketch);
</script>

<style>
/* 💡 背景として固定し、クリックを邪魔しない設定 */
#koro-sakura-canvas {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 1000;
  pointer-events: none; /* ここが重要！下のボタンが押せるようになります */
}
</style>

季節に合わせたカスタマイズ術（桜から紅葉へ）

一度設置してしまえば、あとは2つの場所を書き換えるだけで、サイトの季節をガラッと変えることができます。

① 形を変える（SVGパスの差し替え）

コードの冒頭にある currentPath を、紅葉のデータに入れ替えます。
数学的な座標データなので難しそうに見えますが、ただの『点と点を結ぶ指示書』だと思ってください。秋になったら、この紅葉用パスをコピーして貼り付けるだけです！

const currentPath = `M 29.06 32.88L 31.03 30.96L 33.13 26.74L 33.35 26.23L 33.59 25.87L 33.97 25.64L 37.15 23.55L 40.18 21.38L 40.74 21.20L 41.24 21.25L 43.03 21.73L 43.60 21.73L 49.95 19.89L 50.94 20.60L 50.92 20.79L 50.31 22.97L 49.41 26.68L 49.64 29.13L 49.74 29.57L 49.65 30.06L 48.78 31.89L 45.30 36.07L 43.29 38.17L 40.51 39.84L 38.91 40.17L 33.80 41.45L 31.11 43.08L 30.96 43.39L 31.29 43.34L 35.61 41.99L 38.90 42.09L 39.67 42.34L 40.02 42.46L 43.07 42.22L 45.90 42.02L 47.84 43.77L 48.63 44.17L 52.93 43.83L 53.58 44.09L 53.76 44.77L 53.68 44.99L 49.62 50.39L 44.66 53.58L 40.07 54.48L 39.65 54.63L 39.50 55.07L 39.58 55.72L 39.78 56.20L 39.86 56.60L 39.55 56.88L 39.20 57.00L 37.76 56.96L 31.61 55.25L 23.82 52.95L 17.99 52.33L 16.88 52.75L 16.21 53.72L 15.05 57.48L 14.48 58.19L 13.58 58.31L 13.21 58.22L 12.47 57.73L 12.62 56.86L 18.96 47.78L 26.68 40.45L 26.82 40.23L 26.77 40.09L 26.76 40.08L 26.61 39.97L 26.42 40.02L 17.65 47.11L 15.66 49.12L 15.60 49.16L 15.41 48.99L 15.84 43.73L 15.05 39.35L 14.28 36.21L 14.18 33.45L 14.68 31.05L 15.92 28.96L 16.30 28.71L 16.77 28.74L 17.46 28.98L 17.97 28.99L 18.25 28.57L 18.56 26.86L 18.98 24.85L 20.23 22.26L 22.03 19.61L 22.39 19.29L 22.84 19.15L 24.73 18.47L 27.15 16.77L 29.89 14.87L 29.96 14.84L 30.84 14.84L 31.44 15.48L 32.23 20.50L 31.15 25.02L 31.15 26.09L 31.03 28.94L 28.98 32.77L 28.92 32.91L 29.06 32.88Z`;

雪の結晶のデータ

const currentPath = `M409.162,326.341c38.951-25.866,49.348-36.597,44.162-44.869c-1.156-1.848-3.558-4.047-8.362-4.047c-9.835,0-29.14,9.461-64.337,31.574c-27.112-16.234-58.98-34.766-90.488-52.995c30.353-17.562,62.88-36.484,90.481-53.003c35.196,22.113,54.501,31.574,64.337,31.574c4.811,0,7.213-2.207,8.377-4.055c5.178-8.256-5.218-18.986-44.169-44.861c69.425-42.867,72.235-51.269,68.538-57.653c-0.912-1.596-2.89-3.484-7.132-3.484c-9.607,0-33.479,10.528-77.07,34c-2.906-46.311-6.945-60.673-16.78-60.673c-2.256,0.081-4.324,1.075-5.993,2.874c-4.632,5.007-8.614,17.472-6.521,73.846c-27.902,15.526-59.777,33.797-91.14,51.864c-0.032-40.945-0.187-75.174-0.651-104.858c49.86-26.364,58.67-36.053,60.688-42.566c0.733-2.345,0.562-4.633-0.496-6.644c-1.05-1.978-3.395-4.331-8.598-4.331c-8.223,0-23.578,5.886-52.344,20.151C269.245,6.627,263.382,0,255.998,0c-7.377,0-13.239,6.627-15.665,88.185c-28.757-14.265-44.112-20.151-52.336-20.151c-5.203,0-7.548,2.353-8.598,4.34c-1.059,2.002-1.222,4.29-0.504,6.636c2.027,6.513,10.828,16.202,60.689,42.566c-0.505,31.672-0.627,68.506-0.652,104.867c-36.353-20.941-65.265-37.461-91.139-51.848c2.092-56.382-1.89-68.863-6.522-73.87c-1.669-1.799-3.738-2.793-6.27-2.891c-9.567,0-13.589,14.378-16.495,60.69c-43.591-23.473-67.472-33.993-77.079-33.993c-4.234,0-6.212,1.889-7.124,3.469c-3.697,6.391-0.888,14.785,68.538,57.66c-38.951,25.874-49.348,36.605-44.17,44.869c1.165,1.84,3.567,4.054,8.378,4.047c9.836,0,29.14-9.461,64.329-31.574c27.08,16.226,58.963,34.766,90.489,53.003c-30.369,17.57-62.912,36.5-90.472,52.995c-35.206-22.113-54.518-31.574-64.353-31.574c-4.812,0-7.205,2.198-8.37,4.054c-5.178,8.256,5.211,18.987,44.162,44.862c-69.425,42.867-72.235,51.269-68.53,57.66c0.912,1.58,2.89,3.468,7.124,3.468c9.607,0,33.488-10.519,77.07-34c2.915,46.311,6.937,60.689,16.495,60.689c0,0,0.236-0.008,0.285-0.008c2.255-0.081,4.324-1.083,5.993-2.874c4.632-5.016,8.614-17.48,6.522-73.854c27.568-15.332,58.711-33.178,91.139-51.864c0.041,40.954,0.196,75.174,0.66,104.867c-49.868,26.372-58.67,36.052-60.697,42.566c-0.717,2.344-0.554,4.633,0.504,6.644c1.05,1.978,3.395,4.331,8.598,4.331c8.223,0,23.579-5.887,52.336-20.151c2.426,81.557,8.288,88.185,15.665,88.185c7.384,0,13.247-6.628,15.665-88.185c28.765,14.264,44.121,20.151,52.344,20.151c5.203,0,7.548-2.353,8.598-4.34c1.058-2.002,1.229-4.291,0.496-6.636c-2.018-6.514-10.828-16.194-60.681-42.566c0.497-31.672,0.627-68.506,0.652-104.858c30.45,17.537,63.14,36.28,91.14,51.855c-2.093,56.366,1.889,68.839,6.521,73.854c1.669,1.791,3.738,2.793,5.993,2.874c0.057,0,0.228,0.008,0.284,0.008c9.559,0,13.581-14.378,16.488-60.689c43.592,23.481,67.472,34,77.087,34c4.225,0,6.204-1.888,7.116-3.468C481.397,377.602,478.587,369.208,409.162,326.341z`;

② 色を変える（HSBモードの魔法）

直感的に色を操れる『HSBモード』が使えるので、色相（hue）の数字をいじるだけで、自然な色のバラツキが生まれます。
this.hue = p.random(最小値, 最大値); の数字です。

春（桜） 330, 350 優しい桃色から赤みのあるピンク。
秋（紅葉） 10, 50 真っ赤なモミジから、黄金色のイチョウまで。
冬（雪の結晶）180, 200 シアンから

③ 大きさとバラツキを調整する（scale）

形によって、元のサイズが異なることがあります。『ちょっと小さいな』と感じた時は、this.scale = p.random(最小値, 最大値); の数字を調整してみましょう。

桜（標準）：0.3, 0.7
紅葉（小さめな時）： 0.8, 1.2
雪の結晶（大きめな時）：0.05, 0.15

パス内の数字が小さい図形は、コンピュータにとっては「小さな図面」として認識されます。
p.scale はその図面を何倍に拡大するかを決める命令。形を変えた時にサイズに違和感があったら、この数字を「拡大コピー」の倍率だと思って調整してみてください。

解説と注意点

なぜ「p.」がついているの？（インスタンスモードの秘密）

p5.jsの解説サイトを見ると、普通は createCanvas() と書かれているのに、今回のコードでは p.createCanvas() となっています。これは「インスタンスモード」という書き方です。

WordPressには、他のプラグインやテーマが動かすJavaScriptがたくさん動いています。
念の為、それらと名前がぶつかって「ケンカ（競合）」して、サイトが動かなくならないように。「p」という箱の中に閉じ込めて、他のプログラムに迷惑をかけずに、自分の場所だけで安全に動かせるようにしています。

注意点：SEOとユーザー体験（UX）のバランス

表示速度（LCP）への配慮：サイトエディタを使って、ヘッダーに入れるだけで、全ページに適応することも可能ですが、ライブラリを読み込むので、どうしても重くなります。
対策：「トップページ限定」にし、さらに画像の読み込みを邪魔しないよう、コードは記事の後半に置くのがベストだと思います。
スマホでの挙動：PCでは綺麗でも、スマホで見ると花びらが大きすぎたり、動きがカクついたりします。対策：コード内の NUM（数）や this.scale（大きさ）を、スマホ用に小さく調整するコードを入れています。

【応用】スクロールしたら演出が消える（エコで読みやすい設計）

「記事を読み進めている間は、文章に集中してほしいのでエフェクトは消したい」
「見えていない時は、スマホのバッテリーを節約したい」

そんな気遣いを実装してみましょう。
監視役（センサー）をページの先頭に置き、それが見えなくなったらエフェクトを消して、アニメーションを止めます。

1.ページの先頭にHTMLを追加

記事のタイトル直後や、最初の段落の前など、読者がページを開いた瞬間に必ず表示される場所に置きます。
理由：これは「ここが見えている間は桜を降らせてね」という目印（センサー）だからです。

<div id="koro-sakura-sensor"></div>

2.スタイル（CSS）の追加

<style> タグの中に、以下のルールを追記します。
「特定の目印がついている時だけ消す」という命令です。

/* センサーが画面外にある時だけ、キャンバスを非表示にする */
body.koro-is-hidden #koro-sakura-canvas {
  display: none;
}

3.JavaScriptに「監視」を追加

p.setup = () => { … } の中に、以下のコードを書き加えます。
これが「見えているか、見えていないか」を常にチェックしてくれる賢い機能です。

p.setup = () => {
  // キャンバスの作成（既存のコード）
  p.createCanvas(p.windowWidth, p.windowHeight).parent('koro-sakura-canvas');

  // --- ここから追加 ---
  const sensor = document.querySelector('#koro-sakura-sensor');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 🌸 センサーが見えている時
        document.body.classList.remove('koro-is-hidden');
        p.loop(); // 計算を開始
      } else {
        // 🍃 センサーが消えた時
        document.body.classList.add('koro-is-hidden');
        p.noLoop(); // 計算を停止（エコモード！）
      }
    });
  });
  observer.observe(sensor);
  // --- ここまで追加 ---

  p.colorMode(p.HSB);
  p.noStroke();
  for (let i = 0; i < NUM; i++) { petals.push(new Leaf()); }
};

今回は、p5.jsを使ってサイトにLINE風のエフェクト実装する方法をご紹介しました。
自分好みに色や形を変えて楽しんでいただけたら嬉しいです。

🌸 「SVGパス」の探し方についてはこちらを参考に。

▶︎ 【p5.js】SVGRepoの罠を回避！動くSVGパスの見分け方と『最強の描画関数』