はてなブログのトップページに雪を降らせるカスタマイズ（コピペでOK！）￤冬に使えるおしゃれデザイン❄

ブログのデザインって大幅に変えるのは大変だし、一度設定したら長いことそのままになることが多いですよね。

季節によって少しだけ手を加えて、ブログの雰囲気を変えられたらお手軽だと思い、今回のデザインを考えてみました！

このカスタマイズをすると、こんな風に見えます！
▼サンプルページyunico-fluffylife.com

こんなこと書いています
冬季のデザインにおすすめなトップページに雪を降らせる、はてなブログのカスタマイズ（コピペでOK）をご紹介❅
　
特に無くてもいいカスタマイズですが(Ꙭ )
『冬の特別仕様』を演出できますよ！笑

ワードプレス用のカスタマイズ方法はあったのですが、はてなブログで使えるものが見つからなくて…作っちゃいました❅.*

yunico

はじめに￤注意点など
コードと貼り付ける場所
- ヘッダに貼り付けるコードとスクリプト
- デザインCSSに貼り付けるコード
  - 雪の色を変える
おわりに￤作成の小話

はじめに￤注意点など

コード使用のお願い
公開しているCSSコードは個人利用のコピペはOKですが、ブログなどでカスタマイズ方法を紹介する場合は、本記事をリンクして引用である旨の表記が必須です。
どうぞよろしくお願い致します。

カスタマイズは気軽に行えますが、コード記述に不備があるとレイアウトが崩れたり、画面が表示されなくなることがあります。

レイアウトが崩れても追加したコードを消せば元に戻りますが、もしもの時に備え、現在使っているコードをバックアップしておくと安心です。

バックアップ方法
現在のコードをコピーして、スマホやパソコンのメモ帳・メールの下書き・はてなブログの記事下書きなどに貼り付けておくのが簡単です✎

コードと貼り付ける場所

はてなブログのデザインカスタマイズはパソコン画面で行いますので、パソコンやタブレットで作業するのがおすすめです！（スマホで操作する場合は、PCモードに切り替えてね୨୧）

「スマホから見たデザインが変わらない」時はyunico-fluffylife.comこちらを参考に、デザインを反映させてください。

ヘッダに貼り付けるコードとスクリプト

デザイン設定ページから

🔧マークを選択。
ヘッダを選択すると下に項目が出てくる。
ブログタイトル下に以下のコードをコピー＆貼り付ける。

<!-- 雪を降らせる -->
<div class="snowfall">
<script src="snow-script.js"></script>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const snowfallContainer = document.querySelector(".page-index .snowfall");

    for (let i = 0; i < 20; i++) { // ：雪の量
    createSnowflake();
    }
    
    // 雪を生成する間隔（ミリ秒）：100ミリ秒
    const snowflakeInterval = 100;
    // 初回の雪生成
    createSnowflake();
    // 定期的に雪生成
    setInterval(createSnowflake, snowflakeInterval);

    function createSnowflake() {
    const snowflake = document.createElement("div");
    snowflake.className = "snowflake";
    snowflake.style.left = `${Math.random() * 100}vw`; // 水平位置ランダム
    snowflake.style.top = `${Math.random() * 100}vh`; // 垂直位置ランダム
    snowflake.style.animationDuration = `${Math.random() * 4 + 4}s`; // アニメーション期間ランダム
    snowfallContainer.appendChild(snowflake);
    
    // 古い雪を削除（50個まで保持）
    if (snowfallContainer.children.length > 50) {
    snowfallContainer.removeChild(snowfallContainer.children[0]);
    }
    }
});
</script>
<!-- 雪降らしここまで -->

デザインCSSに貼り付けるコード

デザイン設定ページから

🔧マークを選択。
下の方にあるデザインCSSを選択する。
出てくる入力欄に以下のコードをコピー＆貼り付ける。

/*** 雪を降らす ここから ***/
.snowfall {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    }

.snowflake {
    position: absolute;
    background-color: rgba(192, 192, 192, 0.2); /* 透過の薄グレー */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: falling linear infinite;
    filter: blur(2px); /* 雪をぼかす */
    }

@keyframes falling {
    0% {
    transform: translateY(0) rotate(0deg);
    }
    100% {
    transform: translateY(100vh) rotate(360deg);
    }
    }
/*** 雪を降らす ここまで ***/

雪の色を変える

background-color: rgba(192, 192, 192, 0.2);

⇧は雪の色味の設定で、変更が可能です。

背景が白ベースの場合はこのまま使用して問題ないと思いますが、背景が濃い色の場合は雪が目立たない可能性があるので、雪の色を白系に変更するとよいでしょう！

rgba(255, 255, 255, 0.2);

⇧雪を白色にする場合はこちらに差し替えてね❅

おわりに￤作成の小話

スクリプトに『降ってくる雪を順々に削除する』命令を入れているのですが、このコードを入れるまで永遠と雪が降り続け、画面が雪まみれでタブレットPCがフリーズ寸前になるという珍事件が起きました՞

公開しているコードは、雪降り画面で30分くらい放置して、各デバイスの動作に問題がないか確認していますのでご安心ください◎

スクリプトコードの中にある『古い雪を削除～』ってところは絶対に消さないように注意してね。

データとして軽くなったとは言え、至るところで雪が降るのはたぶん鬱陶しいのでトップページだけに反映され、尚且つ記事には被らないようになっています。

雪の形と色を変えたら、春仕様の桜散るデザインにできるかな。春になったらまた作ってみよ✿

ご不明な点や「ここをこんな風にしたいんだけど…」というご希望がありましたら、お気軽にコメントくださいね。

今日はそんな感じ！
それではまたね。