サイトカラー変更 | マニュアル | CMSなら「ant2-ASP」でホームページ制作!

マニュアル

サイトカラー変更

サイトカラー変更対応のテンプレートを設定すると、サイトカラーを「テーマカラー」に変更することができます。基本カラーや詳細カラーを個別に変更したい場合はカスタマイズできるほか、ゴーゴーAIを利用してサイト全体の配色を提案してもらうことも可能です。

サイトカラー変更対応のデザインを設定する

1
コントロールパネルの[作成][デザイン][デザインを変える]をクリックすると、“サイトデザインダイアログ”が表示されます。

2
【Myデザイン】タブにインストール済みのデザインが表示されます。サイトカラー変更に対応するデザインにはカラー変更対応と表示されるため、対応するデザインにチェックを入れて[OK]ボタンをクリックします。

3
サイトカラー変更対応のデザインを設定すると、コントロールパネルの[作成][デザイン][サイトカラーを変える]のメニューが表示されます。サイトカラー変更については下記の機能を参照してください。詳しくは「サイトカラーを変える」を参照してください。

サイトカラーを変える

サイトカラー変更対応の公式テンプレートを設定すると利用できる「サイトカラー変更」では、テンプレートによって定義されている配色を「テーマカラー」への変更やカスタマイズすることができます。

ご注意ください

カラー変更に対応していないテンプレートを設定している場合は、サイトカラー変更を利用することはできませんのでご注意ください。

サイトカラー変更が利用できないテンプレート

  • カラー変更に対応していない公式テンプレート(“サイトデザインダイアログ”でカラー変更対応の表示がないテンプレート)
  • オリジナルテンプレート(“サイトデザインダイアログ”で「Custom」と表示されるテンプレート)
  • サイトカラー変更対応のテンプレートをカスタマイズして作成されたオリジナルテンプレート

1
コントロールパネルの[作成][デザイン][サイトカラーを変える]をクリックすると、“サイトカラー変更サイドバー”が表示されます。

2
サイドバーの【カラーを探す】タブまたは【カラーカスタマイズ】タブからサイトカラーを変更し、変更内容が反映されているかどうかページ表示(プレビュー)を確認します。サイドバーの設定の詳細は下記の各機能を参照してください。

⇒ お気に入りカラーへの変更についてはこちら
⇒ テーマカラーへの変更についてはこちら

⇒ サイトカラーのカスタマイズについてはこちら

3
変更内容を保存するときはサイドバーの下に表示される[保存]ボタンをクリックします。

4
サイドバーの右上の閉じるをクリックします。表示される確認メッセージの[OK]ボタンを押してサイドバーを閉じて、サイトカラー変更内容が正しく反映されていたら完了です。

  • サイトカラー変更を行っていない場合でも確認メッセージは表示されます。
  • サイドバーの【カラーを探す】タブまたは【カラーカスタマイズ】タブからサイトカラーを変更後に保存していない場合、サイドバーを閉じると破棄されます。サイトカラーの変更内容を保存するときは、[保存]ボタンを押して変更内容を保存してご利用ください。

 Hint

マウスオーバーや右クリックからサイトカラーを変える

画面の上にマウスを合わせて表示される[メニュー]ボタンをクリックし(もしくは右クリックし)、ショートカットメニューの[サイトカラー変更][サイトカラーを変える]を選択します。

画面の上での右クリックの操作でもショートカットメニューが表示されます。

サイトカラーをお気に入りカラーに変える

お気に入りカラーの配色にサイトカラーを変更します。お気に入りカラーの登録については下記を参照してください。

⇒ お気に入りカラーの登録についてはこちら

1..
コントロールパネルの[作成][デザイン][サイトカラーを変える]をクリックします。または、サイドバーが表示されていない場合は、画面の上にマウスを合わせて表示される[メニュー]ボタンをクリックし(もしくは右クリックし)、ショートカットメニューの[サイトカラー変更][サイトカラーを変える]を選択します。

2
“サイトカラー変更サイドバー”が表示され、【カラーを探す】タブが表示されます。

3
「お気に入りカラー」の一覧から変更したいお気に入りカラーを選択すると、選択したお気に入りカラーでプレビューされます。

  • [保存]ボタンを押すまでは変更したサイトカラーは保存されません。

4
プレビューした変更内容を保存するときはサイドバーの下に表示される[保存]ボタンをクリックします。

サイトカラーをゴーゴーAIで提案(ベータ版)

動画マニュアルのシナリオ(テキスト)を確認する

  1. 「ゴーゴーAIで提案」は、AIがサイト全体の配色を提案する機能です
  2. コントロールパネルの「デザイン」から「サイトカラーを変える」をクリック
  3. 「ゴーゴーAIで提案」にイメージや要望を入力します
  4. 「提案してもらう」をクリック
  5. 4つのカラー提案が表示されます
  6. コーポレートカラー等の色調も指定できます
  7. 気に入ったら「プレビュー」をクリック
  8. 実際の画面に反映されます
  9. もっと試したい時は「さらに提案」をクリック
  10. 4回まで繰り返すことができます
  11. 気に入ったら「保存」をクリック
  12. 「OK」をクリックして完了
  13. 反映中のカラー提案を「お気に入りカラー」に保存することもできます
  14. 「カラーカスタマイズ」タブをクリック
  15. 「お気に入りカラーに保存」をクリック
  16. 「OK」をクリック
  17. 「カラーを探す」タブの「お気に入りカラー」に保存されます

「ゴーゴーAIで提案」は、サイト全体の配色(サイトカラー)をAIが自動で作成・提案する機能です。「かっこいい」「和風モダン」といった抽象的なイメージを言葉で入力するだけで、AIがサイト全体のバランスを考えて配色を提案します。

ベータ版(β版)について

本機能は現在、試験運用として「ベータ版」で提供しています。利用状況に応じて、機能や制限の内容が変更される場合があります。また、色の指定が提案結果にそのまま反映されない場合があります。

1
コントロールパネルの[作成][デザイン][サイトカラーを変える]をクリックすると、“サイトカラー変更サイドバー”が表示されます。

2
サイドバー内の「ゴーゴーAIで提案」セクションの入力欄に、どのようなサイトにしたいかイメージや要望を入力します。

  • 最大2,000文字まで入力可能です。
  • 単語だけのシンプルな入力はもちろん、コーポレートカラーや会社のコンセプトなどの長文を入力(コピー&ペースト)してもAIが意図を汲み取ります。

3
入力後、[提案してもらう]ボタンをクリックします。

4
AIが要望に合わせて生成した4つのカラーセットをプレビューし、実際のサイト上での印象を確認します。

別のパターンを見たい場合

別のパターンも見たい場合は、結果一覧の下にある[さらに提案]ボタンをクリックすると、前回の要望を引き継いだまま、別のカラーセットを新しく4セット追加生成(最大20セットまで)して比較することができます。

5
採用する配色が決まったら、サイドバー下部の[保存]ボタンをクリックして完了です。

 Hint

気に入った配色をお気に入りに保存する

AIが提案した一覧は、サイドバーを閉じたり、画面のリロードや画面遷移をしたりすると消えてしまいます。後でじっくり比較したい候補が見つかった場合は、以下の手順で登録してください。

  1. 気に入った提案のカラーセットを選択し、サイトに色を反映させます。
  2. そのままサイドバーの【カラーカスタマイズ】タブに切り替えます。
  3. タブ内の[お気に入りカラーに保存]ボタンをクリックします。
  4. 【カラーを探す】タブの「お気に入りカラー」一覧に保存され、いつでもこの配色を選択して微調整が可能になります。
ご利用にあたっての注意事項
  • 本機能はサイトカラー対応の公式サイトデザインテンプレートを対象としています。
  • サイトごとの月間利用回数制限があります。(上限達成時は翌月になるまで利用不可)
  • 【カラーカスタマイズ】タブの詳細設定で特定のブロックを「ロック」している場合でも、AIの提案カラーを適用するとロックは解除されず、一括上書きされます。
  • 具体的な色名やカラーコード(HEX値)を指定した場合でも、テンプレートの読みやすさ(明度・彩度などのアクセシビリティ)やAIの特性により、指定通りの色が採用されず微調整される場合があります。幅広い配色アイデアを得たい場合は、「業種」や「雰囲気」での指定がおすすめです。

サイトカラーをテーマカラーに変える

テンプレートのデフォルトカラー、またはテーマにあわせた配色のテーマカラーにサイトカラーを変更します。

  • “サイトデザインダイアログ”からサイトカラー変更対応のテンプレートを変更したときは、変更前に保存されたサイトカラーで表示されますので、テンプレートのデフォルトカラーに変更する場合は、テーマカラーの「デフォルト」を選択してください。

1
コントロールパネルの[作成][デザイン][サイトカラーを変える]をクリックします。または、サイドバーが表示されていない場合は、画面の上で右クリックして、表示されたショートカットメニューから[サイトカラー変更][サイトカラーを変える]を選択します。

2
“サイトカラー変更サイドバー”が表示され、【カラーを探す】タブが表示されます。

3
「テーマカラー」から変更したいテーマカラーを選択すると、選択したテーマカラーでプレビューされます。

  • [保存]ボタンを押すまでは変更したサイトカラーは保存されません。

テーマカラー

デフォルト

使用しているテンプレートのデフォルトカラーに変更します。

  • テンプレートを変更したときは変更前のサイトカラーで表示されますので、テンプレートのデフォルトカラーに変更する場合は「デフォルト」を選択してください。
デフォルト以外 テーマにあわせた配色のテーマカラー(アンティークなど)に変更します。

4
プレビューした変更内容を保存するときはサイドバーの下に表示される[保存]ボタンをクリックします。

 Hint

変更したテーマカラーからサイトカラーをカスタマイズするときは、【カラーカスタマイズ】タブから変更することができます。

⇒ カラーカスタマイズについてはこちら

サイトカラーをカスタマイズする

テンプレートの基本カラーや各ブロックの詳細カラーを、カラーピッカーやカラーコードを入力してカスタマイズします。

1
コントロールパネルの[作成][デザイン][サイトカラーを変える]をクリックします。または、サイドバーが表示されていない場合は、画面の上で右クリックして、表示されたショートカットメニューから[サイトカラー変更][サイトカラーを変える]を選択します。

2
“サイトカラー変更サイドバー”が表示されますので、【カラーカスタマイズ】タブを選択します。

3
テンプレートの基本カラーを変更する場合は[基本設定]を選択します。テンプレートのブロック別の詳細カラーを変更する場合は[詳細設定]を選択します。各項目から変更したい項目の[色を編集]ボックスをクリックします。

基本設定

[基本設定]を選択すると、テンプレート全体の基本カラーをカスタマイズすることができます。

主な機能
  • [色を編集]ボックスをクリックすると、基本カラーをカスタマイズすることができます。
  • [詳細設定]の各詳細カラーは、基本カラーと連動するようにテンプレートによって定義されているため、基本カラーをカスタマイズすると対応する詳細カラーも連動して変更されます。
    ※[詳細設定]より詳細カラーにロックがされている場合は基本カラーの変更の影響は受けません。

詳細設定

[詳細設定]を選択すると、テンプレートのレイアウトのブロックごとに分類された詳細カラーをカスタマイズすることができます。

主な機能
  • [色を編集]ボックスをクリックすると、対象ブロックの対象カラーをカスタマイズすることができます。対象箇所が表示しているページにあるときは、その位置までスクロールされ対象箇所に枠線が表示されます。(対象箇所によってスクロールや枠線表示されない場合があります)
  • ロックマークをクリックするとロック状態に変わり、詳細カラーが基本設定の変更の影響を受けないようにロックすることができます。ロック機能は、【カラーカスタマイズ】タブの色の編集へのロック機能となるため、【カラーを探す】タブの「テーマカラー」および「お気に入りカラー」をプレビューしたときや、【履歴】タブのカラー変更履歴から戻したときは、保持されている色は変更されます。
  • [背景画像設定]ボックスをクリックすると、対象ブロックの背景画像を設定することができます。
    ⇒ 背景画像設定についてはこちら
  • [詳細設定]のロックの設定は、[保存]ボタを押すと保存されます。ロック状態が保存されていない場合でもログイン中はロックの設定が保持されますが、ログアウトやサイトデザインを変更したときには解除されますのでご注意ください。

 Hint

右クリックからカラーカスタマイズ

サイドバーが表示されているときは、画面のサイトカラーを変更したい箇所で右クリックすると、ショートカットメニューの[サイトカラー変更]にその箇所で変更できる色が表示されます。
変更したい色名を選択するとサイドバーからカスタマイズすることができます。
※右クリックした箇所の要素から遡って変更可能な色が設定されている要素が順に表示されます。

4
カラーピッカーから設定したい色を選択、またはカラーコードを入力し、[保存]ボタンを押すと、変更した箇所が保存した色に置き換わって表示(プレビュー)されます。

  • カラーピッカーの保存履歴は、カラーピッカーの下に表示されます。色の保存履歴はページの移動やサイドバーを閉じた際には消去され、選択色のみの表示となります。

5
プレビューした変更内容を保存するときはサイドバーの下に表示される[保存]ボタンをクリックします。

ご注意ください

カラーコードの指定について

カスタマイズされたカラーコードを編集サイトおよび公開サイトに反映する際には、テンプレートの「コンパイル」を行っております。コンパイルの機能が、透過度を含めた8桁16進数のカラーコード(例:#00000000)を入力された場合に対応していないため、基本的には6桁、もしくはどんな色も適用したくない場合は無効なプロパティとなりますが8桁でご入力ください。
なお、8桁で入力した場合にサイトデザインの保存エラー、サイト公開の際に通信エラーやサイト公開ができない場合があります。その際は該当箇所の色がご利用のテンプレートにて計算式に使用されており、無効なプロパティになることで計算できずエラーになっている状態になりますので、6桁に修正してご対応ください。

  • エラーメッセージ:「エラーが発生しました。」または「通信エラーが発生しました(P-1)」

ブロックの背景画像を設定する

UPPERやメインコンテンツ、BOTTOMなど各ブロックに背景画像を設定します。

1
コントロールパネルの[作成][デザイン][サイトカラーを変える]をクリックします。または、サイドバーが表示されていない場合は、画面の上で右クリックして、表示されたショートカットメニューから[サイトカラー変更][サイトカラーを変える]を選択します。

2
“サイトカラー変更サイドバー”が表示されますので、【カラーカスタマイズ】タブを選択します。

3
[詳細設定]を選択して背景画像を変更するブロックをクリックします。「背景画像」の項目の[背景画像設定]ボックスをクリックします。

4
“背景画像設定ダイアログ”が表示されますので、背景画像と配置を設定します。

背景

背景画像を設定する場合は画像ファイルを指定し、配置の形式を設定します。

配置
  • パーツ全体を覆う背景画像にする・・・パーツ全体を覆うように背景画像が配置されます。
  • 画像全体を表示する(右下)・・・パーツの右下を起点に背景画像が配置されます。
  • 画像全体を表示する(左下)・・・パーツの左下を起点に背景画像が配置されます。
  • 画像を全体にリピートする・・・パーツ全体に背景画像が繰り返して配置されます。
  • 上側に画像をリピートする・・・パーツの上側に背景画像が繰り返して配置されます。
  • 下側に画像をリピートする・・・パーツの下側に背景画像が繰り返し配置されます。

5
[OK]ボタンをクリックして完了です。

 Hint

背景画像設定の適用について

各ブロックの背景画像設定は、“サイトカラー変更サイドバー”の各機能では下記の通り適用されます。
※適用される場合は、背景画像なしの設定も上書きされます。

【カラーを探す】タブ
・お気に入りカラー:お気に入りカラーの背景画像の設定が適用される(お気に入りカラーの背景画像設定の有無で上書きされる)
・テーマカラー:背景画像には影響しない(変更前の背景画像の設定が維持される)

【カラーカスタマイズ】タブ
・保存ボタン:背景画像の設定が適用される(詳細設定の背景画像設定で上書きされる)
・お気に入りカラーに保存ボタン:背景画像の設定がお気に入りカラーとして登録される

【履歴】タブ
・元に戻す:保存された時点の背景画像の設定が適用される(履歴の背景画像設定の有無で上書きされる)

お気に入りカラーを登録する

カスタマイズしたサイトカラー及び背景画像をお気に入りカラーとして登録すると、登録済みのお気に入りカラーから選択して変更することができます。

  • お気に入りカラーにはカスタマイズした配色と背景画像の設定が登録されます。背景画像が未設定で登録されたお気に入りカラーでプレビューして保存すると、該当のブロックの背景画像は未設定の状態になります。

1
“サイトカラー変更サイドバー”【カラーカスタマイズ】タブを選択します。カラーカスタマイズの設定について詳しくは「サイトカラーをカスタマイズする」を参照してください。

2
【カラーカスタマイズ】タブで設定したカスタマイズしたサイトカラー(基本設定・詳細設定)を[お気に入りカラーに保存]ボタンを押してお気に入りカラーに登録します。

  • お気に入りカラーは最大10件登録することができます。10件を超える場合は不要なお気に入りカラーを削除してからお気に入りカラーに保存してください。

3
サイドバーの【カラーを探す】タブを選択し、「お気に入りカラー」に保存されているお気に入りカラーを確認します。保存したお気に入りカラーは「お気に入り」+最大値のタイトルで保存されます。タイトルはわかりやすいタイトルに編集します。

お気に入りカラーのタイトル編集

お気に入りカラーの[タイトル編集]ボタンをクリックし、タイトルを入力して[タイトル保存]ボタンをクリックします。

  • タイトルの最大文字数8文字です。

お気に入りカラーの削除

お気に入りカラーの[削除]ボタンをクリックし、メッセージを確認して[OK]ボタンをクリックします。

カラー変更履歴から戻す

【カラーを探す】タブおよび【カラーカスタマイズ】タブで[保存]ボタンを押して保存した履歴からその時点のサイトカラーおよび背景画像に戻します。

  • カラー変更履歴には最大10件が保存されます。10件を超えると古い履歴は削除されます。

1
コントロールパネルの[作成][デザイン][サイトカラーを変える]をクリックします。または、サイドバーが表示されていない場合は、画面の上で右クリックして、表示されたショートカットメニューから[サイトカラー変更][サイトカラーを変える]を選択します。

2
“サイトカラー変更サイドバー”が表示されますので、【履歴】タブを選択します。

3
「カラー変更履歴」の一覧から戻したい日時の[元に戻す]ボタンをクリックし、メッセージを確認して[OK]ボタンをクリックすると完了です。

  • [元に戻す]ボタンを押すと、その時点の保存内容が編集サイトへ反映されます。

  1. ホーム
  2. マニュアル・ヘルプ
  3. CMS操作マニュアル
  4. マニュアル
  5. サイトカラー変更