メインコンテンツにスキップ
ボックスの色を設定する

ボックスの色を変更する方法をご紹介します。登録済みカラー、RGBA/HEX指定、デフォルトカラーなどから設定することができます。

Saika avatar
対応者:Saika
昨日アップデートされました

対象プラン:全プラン


ボックスの色を設定する

デザインエディタ上部の[ボックス]タブ内にある[塗り]から、ページに配置したボックスの色を設定することができます。 「塗り」メニューのカラーパレットを使って、次のいずれかの方法で色の設定を行います。

「塗り」メニューでのカラー設定方法

登録済みのカラー

プロジェクト内でよく使う色は、カラーパレットにマイカラーとして登録できます。不透明度が設定されている場合は、ベースの色と不透明度設定後の色がスラッシュで表示されます。

スクリーンショット:カラーパレットにマイカラーから選択する様子。

未登録の色は、[+]からマイカラーに追加できます。

スクリーンショット:カラーパレットにマイカラーを新登録する様子。

単色・グラデーション切り替え

メニュー中央部のボタンで、単色とグラデーションを切り替えることができます。

スクリーンショット:単色とグラデーションを切り替える様子。

グラデーション設定画面では、色の追加や角度の設定が行えます。追加した色はカーソルをあてると表示される[×]をクリックして削除できます。

グラデーションを設定する様子。

RGBAの数値指定、HEXコードの指定

RGBAの数値やHEXコードで色を指定することができます。数値右横のボタンで切り替えが可能です。

スクリーンショット:RGBAの数値指定またはHEXコードを指定する様子。

カラーピッカー

カラーピッカーを使うと、画面上のあらゆる色を抽出することができます。

スクリーンショット:カラーピッカーを利用する様子。

デフォルトカラー

カラーパレット中央部左のボタンをクリックすると、単色・グラデーションのサンプル色をパレット形式で表示できます。ここから選択した色は、微調整することも可能です。

スクリーンショット:デフォルトカラーから選択する様子。

透明(塗りなし)

ボックスの色を透明(塗りなし)にしたい場合に使用できます。

スクリーンショット:透明(塗りなし)を設定する様子。

設定手順

  1. ボックスを選択

    色を変更したいボックスを選択します。 複数のボックスの選択:Shiftを押しながら複数のボックスをクリックします。

    スクリーンショット:ボックスを選択する様子。

  2. 塗りから色を設定

    エディタ上部のスタイルバーから[塗り]にカーソルを当てます。表示されるカラーパレットから色を選択します。

    スクリーンショット;色を設定する様子。

こちらの回答で解決しましたか?