【Studio】カーソル色反転をカスタムコードで実装する方法

ブログ記事サムネイル（カーソルの色反転） Studio

近年、Webデザインのトレンドとして、マウスカーソルのカスタマイズが注目を集めています。
特に、カーソルの色の反転や、ボタンホバー時の拡大といったエフェクトを取り入れることで、
よりスタイリッシュで洗練されたUIを実現できます。

しかし、Studioの標準機能では、マウスカーソルのカスタマイズはできません。
そこで今回は、カスタムコードを活用して、カーソルのデザインを変更する方法を解説します！

✅ 背景色に応じてカーソルの色を反転（mix-blend-modeの活用）
✅ ボタンホバー時にカーソルを拡大し、インタラクションを強化
✅ Studioで簡単にカスタマイズできるシンプルな実装方法

最新のデザイントレンドを取り入れた、動きのあるWebデザインをStudioで再現しましょう！

⚫︎カスタムコードとは？

Studioのカスタムコード機能についての使い方等は、以前の記事でご紹介しています。もしカスタムコード機能を初めて知ったという方は下記の記事もご覧ください。

【デザイン例あり】STUDIOのカスタムコードで活用方法を解説！
前回までの記事では、STUDIOを使ったUIボタンの作成やTOPページの構築方法をご紹介しました。今回はさらに一歩踏み込んで、カスタムコードを使ったデザイン作成について深掘りしていきます。また、記事の最後には、私がココナラで提供しているサー...
the-learning-canvas.com
2024.01.08

マウスカーソルのカスタマイズとは？

Webサイトのマウスカーソルを独自にカスタマイズすることで、直感的で洗練されたUX（ユーザー体験）を提供できます。

🔹 よく使われるマウスカーソルのカスタマイズ例

  • カーソルの色を背景に応じて自動反転
  • ボタンホバー時にカーソルを拡大
  • ホバー時にカーソルの形状を変更
  • カスタムカーソル（ブランドロゴやアイコンの使用）

特に、背景色に応じてカーソルの色を自動で反転させると、
白背景・黒背景どちらでも視認性の高いデザインを実現できます。

カーソルを反転＆拡大する手順

① カスタムCSSの追加

まず、Studioの「カスタムコードエディタ」に以下のコードを追加します。
このCSSは、Studioの標準カーソルを非表示にし、カスタムカーソルを作成するためのスタイルを設定します。

通常カーソルを非表示

[id*="blend"], [id*="big"] {
    cursor: none;
}

✅ [id*="blend"], [id*="big"]

  • blend もしくは big を含むIDを持つ要素すべてに適用。
  • 例えば id="blend-text" や id="big-button" の要素に影響。

✅ cursor: none;

  • 通常のマウスカーソルを非表示にする。
  • 代わりにカスタムカーソルをJavaScriptで表示する。

カスタムカーソルの基本スタイル

.blend-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    mix-blend-mode: difference; /* 背景とコントラストを作る */
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, width 0.2s ease-out, height 0.2s ease-out;
    opacity: 0;
}

✅ 以下の基本スタイルの作成を行なっています。

  • マウスの位置に追従するカスタムカーソルを定義。
  • 通常時のカーソルの大きさを設定（小さい円）。
  • 丸い形状のカーソルにする。
  • カーソルの色を白に設定。
  • 背景と色を反転し、視認性を向上。（白背景では黒、黒背景では白に見える効果）
  • カーソルの中心がマウス位置に合うように調整。
  • 滑らかな移動＆変形アニメーションを適用。

ボタンホバー時にカーソルを拡大

.blend-cursor.expand {
    width: 80px;
    height: 80px;
}

✅ .blend-cursor.expand

  • ボタン（big を含むIDの要素）にホバーした際に、カーソルを拡大。

✅ width: 80px; height: 80px;

  • 通常時 20px のカーソルを 80px に拡大。
  • ボタン上での存在感を強調し、視認性を向上。

② JavaScriptでカーソルの反転＆拡大を適用

次に、「カスタムコードエディタ」に以下のスクリプトを追加します。

「blend」を含む要素でカーソルを表示

targetElementsLarge.forEach((element) => {
    element.addEventListener("mouseenter", () => {
        isInsideLarge = true;
        cursor.style.opacity = "1";
    });

    element.addEventListener("mouseleave", () => {
        isInsideLarge = false;
        cursor.style.opacity = "0";
    });

    element.addEventListener("mousemove", (e) => {
        if (isInsideLarge) {
            cursor.style.left = `${e.clientX}px`;
            cursor.style.top = `${e.clientY}px`;
        }
    });
});

✅ マウスが blend を含む要素に入ったら、カーソルを表示（opacity: 1）
✅ マウスが要素から離れたら、カーソルを非表示（opacity: 0）
✅ マウスを動かすたびに、カーソルをマウス位置に追従

「big」を含む要素でカーソルを拡大

targetElementsBig.forEach((element) => {
    element.addEventListener("mouseenter", () => {
        cursor.classList.add("expand");
    });

    element.addEventListener("mouseleave", () => {
        cursor.classList.remove("expand");
    });
});

✅ ボタン（big を含む要素）にホバーすると expand クラスを追加し、カーソルが拡大
✅ ホバーが外れると expand クラスを削除し、カーソルを元のサイズに戻す

ページ全体でカーソルを移動させる

document.addEventListener("mousemove", (e) => {
    if (isInsideLarge) {
        cursor.style.left = `${e.clientX}px`;
        cursor.style.top = `${e.clientY}px`;
    }
});

✅ mousemove イベントでカーソルの位置を常に更新
✅ マウスの clientX と clientY を取得し、カーソルの位置を設定

③ Studioでの設定方法

Studioエディタで、カーソルを変更したい要素にIDを設定します。

  • 文字の色を反転させたい → blend-text
  • ボタンホバー時にカーソルを拡大 → big-button

実装結果

このカスタムコードを追加すると、以下のような表現が可能になります。

まずはマウスカーソルが通過した部分の背景やコンテンツに応じて、カーソル色を反転した結果です。

次に、背景色やコンテンツにより色を反転したマウスカーソルが、UIボタン上にホバーした時にカーソルを拡大させた結果です。

STUDIOのカスタムコード実装例をチェック！

もっとStudioのカスタムコードでの事例を見たい方はこちら！
https://kreaidesign.studio.site/library

最新の制作事例をInstagramでチェックしてみてください！
InstagramのDMからお仕事のご相談をいただいた、先着５名様限定で定価の10％OFFにて、WEBサイト制作を実施させて頂きます！
https://www.instagram.com/kreai_design?igsh=dmdqNXdudmlxNWZv&utm_source=qr

インスタグラムのQRコード

私のココナラサービスでは、Studioを用いたWEBデザインから実装のサービスを提供しています。
カスタムコードのみの対応も承っていますので、ウェブサイトに個性を加えるためのカスタムコードを入れたい方、ぜひ詳細はココナラのプロフィールページをご覧ください。

STUDIOでオリジナルWEBサイト作成します 修正制限無し！デザイン/画像/文章丸投げOK!【２名様限定】

まとめ：Studioのカスタムコードでサイトの魅力をアップ！

Studioのカスタムコードを活用することで、マウスカーソルの色を背景に応じて自動反転させたり、ボタンホバー時にカーソルを拡大させることが可能になりました。

このエフェクトを取り入れることで、視認性の向上や、洗練されたインタラクションの強化が実現できます。特に、ダークモードや動的なデザインを採用するサイトでは、ユーザー体験を向上させる重要な要素となります。

📌 今日のポイント
✔ CSSで標準カーソルを非表示にし、カスタムカーソルを作成
✔ JavaScriptでカーソルをマウス位置に追従させ、動的に変化
✔ ボタンホバー時にカーソルを拡大し、操作性とデザイン性を向上
✔ StudioのID設定を活用し、簡単にカスタマイズ可能

Webサイトの細部にこだわることで、よりユニークで魅力的なデザインを実現できます。
👉 ぜひこのカスタムコードを試して、Studioでワンランク上のWebデザインを構築しましょう！

コメント