スマホで舞う!タップすると銀の粉が広がる幻想的な便箋素材【WordPressコピペ配布】

manaoの素材箱
Screenshot

暗闇の中に銀色の光が舞い踊る、少し特別な便箋素材を作りました。

WordPressの「カスタムHTML」ブロックに貼り付けるだけで、あなたのブログに幻想的な空間を作ることができます。

横書きバージョン

標準的な横書きタイプです。メッセージカードや、夜の静かな独り言に。

Screenshot

縦書きバージョン

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

Screenshot

自分好みに!カスタマイズの方法

コードの中身を少し書き換えるだけで、デザインを自由に変更できます。

① 見出しを消して、よりシンプルにしたい場合

「見出し(大きな文字)はいらない」という時は、コード内の以下の部分を探してまるごと削除してください。

消去する範囲(横書き・縦書き共通):

<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機能を使ってリアルタイムに描画しています。

あなたの綴る言葉が、美しい光とともに読者へ届きますように。

コメント

タイトルとURLをコピーしました