暗闇の中に銀色の光が舞い踊る、少し特別な便箋素材を作りました。
WordPressの「カスタムHTML」ブロックに貼り付けるだけで、あなたのブログに幻想的な空間を作ることができます。
横書きバージョン
標準的な横書きタイプです。メッセージカードや、夜の静かな独り言に。

縦書きバージョン
情緒あふれる縦書きタイプです。詩や俳句、和風な演出をしたい時に最適です。

自分好みに!カスタマイズの方法
コードの中身を少し書き換えるだけで、デザインを自由に変更できます。
① 見出しを消して、よりシンプルにしたい場合
「見出し(大きな文字)はいらない」という時は、コード内の以下の部分を探してまるごと削除してください。
消去する範囲(横書き・縦書き共通):
<p style="font-weight: 200; font-size: 1.6rem; ...">静寂の夜に</p>
※これだけで、本文から始まるよりミニマルなデザインになります。
② 便箋の長さを変えたい場合
コードの1行目にある min-height: 500px; の数字を書き換えてください。
• 短くしたいとき:300px
• 長くしたいとき:800px
③ 文字の色や種類を変えたい場合
color: #d1d1d1; の部分を書き換えます。
• 純白にする:#ffffff
• 金粉風にする:#ffd700(銀の粉と合わせると豪華になります)
④粉の色を変更する
コード内の this.color = … という一行を探して、以下のコードに書き換えてみてください。
- 【金粉(ゴールド)】 豪華で華やかな印象に
this.color = "rgba(255, 215, 0, " + Math.random() + ")"; - 【桜(ピンク)】 春の訪れや優しいメッセージに
this.color = "rgba(255, 183, 197, " + Math.random() + ")"; - 【深海(ブルー)】 クールで知的な雰囲気に
this.color = "rgba(0, 191, 255, " + Math.random() + ")";
⑤設置上の注意
- 「カスタムHTML」ブロックを使用してください。
• スマホ表示を優先して設計していますが、あまりに長い文章を入れると枠からはみ出すことがあります。適宜改行を入れて調整してください。
編集後記
タップするたびにキラキラと輝く粉は、JavaScriptのCanvas機能を使ってリアルタイムに描画しています。
あなたの綴る言葉が、美しい光とともに読者へ届きますように。


コメント