【Studio】文字色・メニュー色を動的に反転させる方法を解説

Webデザインにおいて、背景色に応じて自動でテキストやロゴの色が変わるエフェクトは、洗練されたビジュアルを作る上で非常に有効です。近年、ダークモード対応や動的な文字色の反転がWebデザインのトレンドとなっています。特に、暗い背景では明るい文字、明るい背景では暗い文字に自動調整できると、視認性が向上し、デザインの統一感も高まります。

この記事では、以下のようなエフェクトをカスタムコードを使って実装する方法を解説します。
✅ 文字色の反転（背景色に応じたダイナミックな色変更）
✅ ハンバーガーメニューの色を反転させる（スクロール時に見やすく調整）

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

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

【デザイン例あり】STUDIOのカスタムコードで活用方法を解説！

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

色の反転とは？
1. 色の反転を活用できるシーン
2. Studioで色の反転を実装するメリット
カスタムコードで色の反転を実装する手順
実装結果
Studioのカスタムコード実装例をチェック！
まとめ：Studioのカスタムコードでサイトの魅力をアップ！

色の反転とは？

色の反転とは、背景色に応じて、テキストやロゴの色を自動で反転させるテクニックです。
これにより、背景色が変わるデザインでも、文字やロゴが常に見やすい状態を維持できます。

色の反転を活用できるシーン

✅ ダークモードとライトモードを切り替えるデザイン
✅ スクロールによって背景色が変わるWebサイト
✅ ロゴやナビゲーションメニューを自動調整する場合

Studioで色の反転を実装するメリット

✅ 背景に応じて、文字やロゴの色を自動で変更できる
✅ デザインの統一感が向上し、どのページでも最適な配色を維持できる
✅ カスタムCSSとJavaScriptを組み合わせることで、シンプルなコードで実装可能

カスタムコードで色の反転を実装する手順

① カスタムCSSの追加

まず、Studioの「カスタムコードエディタ」に以下のコードを追加してください。

IDに「hanten」を含む要素に適用 */
[id*="hanten"] {
    display: inline-block;
    padding: 10px 20px;
    transition: color 0.3s ease, background-color 0.3s ease;
    mix-blend-mode: difference; /* 背景色と反対色に設定 */
}

✅ [id*="hanten"] → IDにhantenを含むすべての要素を対象に適用
✅ mix-blend-mode: difference; → 背景と色を反転させるCSSプロパティ
✅ transition: color 0.3s ease; → 色の変化を滑らかにする

② JavaScriptで色の反転を適用

反転カラーを計算する

function invertColor(rgb) {
    const r = 255 - rgb[0];
    const g = 255 - rgb[1];
    const b = 255 - rgb[2];
    return `rgb(${r}, ${g}, ${b})`;
}

✅ RGB値を受け取り、それぞれ255から引いた値を返すことで、反転色を生成
✅ 例えば、黒 (rgb(0, 0, 0)) の場合、255から引くと rgb(255, 255, 255)（白）になる
✅ 明るい色なら暗く、暗い色なら明るくなる
✅ return の値はCSSの color プロパティに適用可能な rgb() フォーマットで返す

要素の背景色を取得する

function getComputedBackgroundColor(element) {
    let bgColor;
    while (element) {
        bgColor = window.getComputedStyle(element).backgroundColor;
        if (bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent") {
            break;
        }
        element = element.parentElement;
    }
    return bgColor;
}

✅ 背景色が透明（rgba(0, 0, 0, 0) または transparent）の場合、親要素をたどって背景色を取得
✅ 例えば、ある要素の背景が透明なら、親要素の背景を取得することで、適切な反転色を計算
✅ 背景色が設定されていない場合、ブラウザがデフォルトで適用する背景色を取得

すべての対象要素の色を反転する

function applyInvertedColors() {
    document.querySelectorAll("[id*='hanten']").forEach(element => {
        let bgColor = getComputedBackgroundColor(element);
        let rgb = bgColor.match(/\d+/g).map(Number);
        element.style.color = invertColor(rgb); // 反転色を適用
    });
}

✅ Studioエディタ内で「hanten」を含むIDを持つ要素をすべて取得（document.querySelectorAll("[id*='hanten']")）
✅ 各要素の背景色を取得し、RGB値に変換して反転処理を適用
✅ 反転した色を element.style.color にセットして、動的に適用

イベントリスナーを追加

window.addEventListener("load", applyInvertedColors);
window.addEventListener("scroll", applyInvertedColors);
window.addEventListener("resize", applyInvertedColors);

✅ ページ読み込み時（load イベント）に反転色を適用
✅ スクロール時（scroll イベント）に適用することで、背景が変化した際に反転色を再計算
✅ 画面リサイズ時（resize イベント）に適用することで、レスポンシブ対応が可能

③ Studioで適用する方法

Studioエディタで、色を反転させたい要素に 「hanten」を含むIDを設定 してください。

文字の色を反転: id="hanten-text"
ハンバーガーメニューの色を反転: id="hanten-menu"
ロゴの色を反転: id="hanten-logo"

実装結果

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

まずは背景画像の色に応じて、文字色を変化させた結果です。

次に、WEBサイトの固定表示としてよく使われる「ハンバーガーメニュー」の色が反転した結果です。スクロールによって背景の色が変わるたびに、動的に色が反転します。

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

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

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