ヘッダーの背景色を変更する

カスタムプランでは、TUNAGに会社のカラーを反映できる『カスタムテーマ機能』と、自社オリジナルのサンクスカードを実現できる『カスタムサンクス機能』の2つをセットでご利用いただけます。

『カスタムテーマ』では、画面上部のヘッダー部分にて、ロゴやカラーを自由に変更することが可能です。

__________2023-02-28_10.46.41.png

設定の手順

ヘッダーの背景色は、カラーコードやRGB値によって指定することが可能です。

 

1. 「カスタム」→「カスタムテーマ」から、ヘッダーの背景設定欄を開く

スクリーンショット 2024-07-18 11.38.10.png

 

2. 「カスタムカラーを追加」ボタンをクリックし、ヘッダーの背景色を指定する

d6d79a22-6115-402d-87ea-d3ec7f20f28f-1920x272r.png

カラーコード、もしくはRGB値を指定することで、色を設定することができます。

7ca0bd00-5ae6-426b-881b-4c66457c90f7.png

 

※設定したカスタムカラーを変更する場合は、「×」ボタンをクリックしてリセットしてください。

 

3. プレビューを確認して、TUNAGに反映する

TUNAGへの反映を行う前に、プレビューを確認することができます。
プレビューを確認後、「TUNAGに反映する」ボタンを押すと、設定がTUNAGに反映されます。

※「TUNAGに反映する」ボタンを押さずにページを離れた場合、設定中の情報は破棄されます。

スクリーンショット 2024-07-18 11.45.22.pngスクリーンショット 2024-07-18 11.44.17.png

そのほかの変更も合わせて実施する場合はこちら

ヘッダーのロゴを変更する
ヘッダーのメニュー文言を変更する

 

運用のポイント

カラーコードとは?

正確な色を表現するために、アルファベットや数字の形式で表したものです。
コーポレートサイトなどで使用されている色をそのまま使いたい場合には、Google Chromeの拡張機能を用いて、表示された色のカラーコードを調べることができます。

ColorPick Eyedropper
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

 

おすすめの配色

背景と文字の色を選ぶ際は、明るさの違いがはっきりした組み合わせにすると見やすいデザインにできます。

  • 背景が濃い色の場合 → テキストは薄い色
  • 背景が薄い色の場合 → テキストは濃い色

また、非常に鮮やかな色同士を組み合わせると、文字が見づらい画面になってしまう場合があるためご注意ください。

 

6367543e-25ce-418d-b7e4-17d0125ce84c-1920x1080r.png

 

------------------------------------------------------------------------------------
※本機能は有料のオプション機能となります。ご利用にはお申し込みが必要となります。
※ご利用料金については、弊社担当までお問い合わせください。

 

この記事は役に立ちましたか?

0人中0人がこの記事が役に立ったと言っています

他にご質問がございましたら、リクエストを送信してください