サイト全体の配色(メインカラー・サブカラーなど)と、ヘッダー・フッターのロゴ画像、ブラウザのタブに表示されるファビコンは、「デザインカスタム」画面でまとめて変更できます。
ここで保存した内容はトップページだけでなくサイトの全ページに一括で反映されます。色を大きく変える前に、現在のカラーコード(# から始まる 6 桁の英数字)を控えておくと、元に戻したいときに安心です。
カラー・ロゴ・ファビコンの変更手順
-
管理画面メニューの「デザインカスタム」をクリック
左メニューの デザインカスタム を開くと、カラー・背景・ロゴ・ファビコンの設定が 1 ページに並んでいます。
デザインカスタム画面。上から順にサイトの各カラーを設定します -
各カラーを選ぶ
変更したい項目の 色を選択 をクリックし、カラーピッカーで色を選びます。# から始まる 6 桁のカラーコードを直接入力することもできます。
グラデーションにしたい場合は グラデーションを使用 にチェックを入れ、色 1・色 2 それぞれの色と「位置」(0〜100)、「角度 (度)」(90 = 左から右)を設定します。色を追加 で 3 色以上にすることもできます。
-
ロゴとファビコンを登録する
ページ下部の ヘッダーロゴ (PC) を選択 をクリックし、メディアライブラリからロゴ画像を選びます。同じ要領で ヘッダーロゴ (モバイル) を選択・フッターロゴ (PC) を選択・フッターロゴ (モバイル) を選択 の 4 か所すべてに登録してください。ファビコンは ファビコンを選択 から 512×512px 程度の正方形 PNG を登録します。
ロゴ 4 種とファビコンはページ下部にあります。最後に最下部の「変更を保存」を押します -
「変更を保存」をクリック
ページ最下部の 変更を保存 を押すと全ページに反映されます。公開サイトを開き直し、見出しの色やロゴが変わったことを PC・スマホの両方で確認してください。
入力項目の説明
| 項目名 | 説明 |
|---|---|
| メインカラー | サイトの基調色。見出し・アクセント線・ナビ・ボタンなど、サイト内で最も多くの場所に使われます |
| サブカラー | 一部の装飾や差し色に使われます |
| テキストカラー | サイト本文の文字色 |
| ラベル背景色 / ラベル文字色 | セラピスト一覧カードの区分ラベルや「本日出勤」帯などの背景色と文字色 |
| ボタン背景色 / ボタン文字色 | プロフィールページのボタン類の色(サイトのデザインによっては変化が分かりにくい場合があります) |
| 背景タイプ / 背景色 | サイト全体の下地。単色・グラデーション・背景画像から選ぶと、選んだタイプの入力欄だけが下に表示されます |
| ヘッダーロゴ (PC / モバイル) | 全ページ上部のロゴ。クリックするとトップページに戻ります。PC 用とスマホ用は別々に登録します |
| フッターロゴ (PC / モバイル) | 全ページ下部(フッター)のロゴ。こちらも PC 用とスマホ用が別々です |
| サイトファビコン | ブラウザのタブやブックマークに表示されるアイコン。512×512px の正方形 PNG 推奨 |
デザインカスタムの変更は、保存した瞬間にサイトの全ページへ反映されます。一度に何か所も変えると崩れたときに原因が分からなくなるため、1 項目ずつ変更して都度サイトを確認してください。また、ロゴやファビコンの 削除 ボタンは押しただけでは確定しません。必ず最後に 変更を保存 を押してください。
保存したのにサイトに反映されない場合は、https://ultra-create.com/manual/guide/cache-purge/ の手順でキャッシュを削除してから再読み込みしてください。ファビコンはブラウザが古いアイコンを記憶していることがあるため、タブを開き直すか、ブラウザを再起動して確認します。
よくあるつまずき
メインカラーをグラデーションにしたら、一部の文字や線の色が消えた — グラデーションは「背景」として使われる場所にしか適用できません。文字色や飾り線としてメインカラーを使っている箇所では色が効かなくなるため、表示が崩れたら グラデーションを使用 のチェックを外して単色に戻してください。
透明度スライダーを動かしても色が変わらない — 透明度が実際にサイトへ反映されるのは背景色のみです。色を薄くしたい場合は、カラーピッカーで薄い色そのものを選んでください。