光る玉を並べて、文字や図形を描く道具です。マウスを近づけると近くの玉だけが光り、ほかの玉が影を落とします。スマホでは指でなぞると同じように光ります。できあがったコードは、カスタムHTMLブロックにそのまま貼れます。
画面の上の「見本から始める」を押すと、設定がまとめて切り替わります。そこから少しずつ変えていくのが早いです。
| 六角（ハニカム） | 玉を六角形に並べた形です。最初から全部の玉が光っています。 |
| 文字が光る | 文字「HELLO」。最初から光っていて、近づけた所がさらに明るく広がります。 |
| 暗い所から光る | 最初は全部消えていて、マウスを近づけた所だけが光ります。 |
「すべて初期値に戻す」で、最初の状態に戻せます。設定のまとまりごとの「↺ リセット」は、そのまとまりだけを戻します。
設定は4つのまとまりに分かれています。よく使う項目だけが出ていて、細かい項目は「▶ 詳細」の中にあります。項目の横の「i」を押すと、その項目の説明が出ます。
| 並び | 文字／六角／升目／卍／▼ の5つ。 |
| 文字 | 玉で描く言葉です。下の「HELLO」「SALE」「2026」「光と影」を押すと、その言葉が入ります。 |
| 文字の幅（PC） | パソコンで見たときの、文字全体の横幅です（400〜1600px）。置く場所がこれより狭いときは、自動で小さくなります。 |
| 文字の幅（スマホ） | 画面の幅が600px以下のときの横幅です。置く場所の横幅に対する割合で決めます（40〜100%）。100%で端から端まで、80%なら左右に少し余白が出ます。 |
| 細かさ（詳細） | 文字は縦に並ぶ玉の数です。多いほどなめらかになり、玉は小さくなります。 |
| 行の間隔・行の揃え方（詳細） | 改行したときの行と行の間と、左・中央・右の揃え方です。 |
| 玉の大きさ（詳細） | 玉ひとつの大きさです（70〜130%）。 |
| 最初の状態 | 「光っている」＝最初から全部の玉が光っています。「光っていない」＝最初は消えていて、近づけた所だけが光ります。 |
| 光る広さ | 左いっぱい（0）は、いちばん近い1つだけが光ります。右へ動かすほど、近い玉ほど明るく、広い範囲が光ります。 |
| 光の強さ（詳細） | 光の明るさです。 |
| 光のにじみ（詳細） | 100%が標準です。左へ動かすほど光がくっきり、右へ動かすほどふんわり広がります。 |
| 影（詳細） | 「地面に埋め込み」＝どの玉も同じ丸い光り方。「影を出す」＝消えている玉が光を遮って、影と光の柱が伸びます。 |
| 光の色 | 白／電球色／青。右の四角を押すと、好きな色を選べます。 |
| 消えている玉（詳細） | 消えている玉の色です。光が当たっても、この色は変わりません（反射しません）。 |
| 背景（詳細） | 玉のうしろの色です。 |
| 横幅 | 「記事の幅」＝置いた場所の幅に合わせます。「画面の端まで」＝画面の左端から右端まで広げます。 |
| 高さ（PC）／高さ（スマホ） | 光る部分の高さです。画面の幅が600px以下のときに、スマホの高さになります。 |
| 端のなじませ（詳細） | 最初は0（どの玉も同じ強さで光る）。記事の幅で置いて、周りとの境目が気になるときだけ上げます。上げると、枠の端に近い玉ほど光が背景へ溶けます。 |
横幅は「記事の幅」のまま、カスタムHTMLブロックに貼ります。1つの記事に何個置いても動きます。光の計算は、画面に見えている間だけ行います。
横幅を「画面の端まで」にしてからコピーします。カスタムHTMLブロックには WordPress の「幅広・全幅」のボタンが無いので、この設定で広げます。
外観 → ウィジェットで、「ヘッダー画像エリア」にカスタムHTMLを入れて貼ります。画面の端から端まで光らせたいときは、「画面の端まで」でコピーしてください。「記事の幅」のときは、ヘッダーの幅に合わせて表示されます。