テーマオプション カラー設定

このコンテンツでは、【テーマオプション カラー設定】の解説（1～3）と、配色データの利用（4～6）について解説しています。

このオプションはサイト全体のベースとなる配色設定ですが、特定のアイテムの配色はテーマオプションの各アイテム毎に上書きすることができます。まずは、このオプションで用意されているプリセットで全体のカラー設定を行い、ボタンやホバーカラーなど細かい部分をテーマオプションの各アイテム毎に行うといいでしょう。

このオプションは、サイト全体を明るくまたは暗めに選択することができます。

Light（ライト）は、背景色などが白ベースになり、Dark（ダーク）は、背景色などが黒ベースになります。フォントカラーを予め設定している場合は、Lightを選択した場合に#fff（白）やDarkを選択した場合に#000（黒）にしていると見えなくなってしまうので注意しましょう。

なお、Fusion Page Optionsで背景色を変更したり、ビルダーでコンテナの背景色を個別に設定している場合は、このオプションが上書きされます。

画像左がLight、右がDarkとなります。

このオプションは、サイト全体の配色設定をします。ここで選択したカラーをベースに、マウスホバーやボタンカラーなどが変更されます。

なお、テーマオプションの各アイテムタブより機能毎にカラー設定の上書きができます。
例えば、テーマオプションのメニュータブ → メインメニューにある『Main Menu Font Hover Color（メインメニューのホバーカラー）』では、このオプションの配色設定となっていますが、好きな色に変更できます。

この特長を生かし、このオプションで全体を設定してから、変更したい部分のみ各テーマオプションから変更するといいでしょう。

画像は、【1.Predefined Theme Skin / スキン設定】でDarkを選択し、このオプションのテンプレ・Pinkを設定したものになります。

【2.Predefined Color Scheme / 配色設定】でテンプレから配色を選択すると、自動でプライマリーカラー設定が行われます。プライマリーカラーのみ変更したい場合は、このオプションから設定することができます。プライマリーカラーはマウスホバーなどを指します。

このセクションでは、カスタム配色の保存について解説しています。

ホバーカラーやメニューカラーなど、テーマオプションで各機能毎に設定したサイト全体の配色を保存することができます。保存するとエクスポートができるので、他のAvadaを使用したサイトで使ったり、手軽にサイト全体の配色を変更することができるようになります。

保存は、以下の手順で行います。

1. 【2.Predefined Color Scheme / 配色設定】にある【Save（保存）】をクリック
2. 画像②と③エリアが表示されるので、テキストエリアに任意の名前を付ける
3. 最後にテキストエリア右側の【Save（保存）】をクリック

なお、2でつける名前は日本語だとマウスホバーしたときに表示される名前が文字化けしてしまいます。アルファベットを使うようにしましょう。

保存に成功すると新しくカラーアイコンが表示されます。
アイコンにマウスホバーすると2で入力した名前が表示されます。

また、【Save（保存）】【 Import（インポート）】以外に、【Update（更新）】【Delete（削除）】【Export（エクスポート）】メニューが新たに加わります。

このセクションでは、【4.サイト全体の配色の保存】で保存またはインポートしてきた配色データを、更新したり削除する手順について解説しています。

テーマオプションの各機能からカラー変更を行った場合に、保存しているカスタム配色データを現在の最新の状態に更新することができます。

なお、変更前と変更後の両方のカスタム配色データを残したい場合は、【Save（保存）】をして別データとすることもできます。

更新は、以下の手順で行います。

1. 【2.Predefined Color Scheme / 配色設定】にある【Update（更新）】をクリック
2. 画像②と③エリアが表示されるので、テーマオプションで設定している現在の配色データに上書きしたい名前を選択
3. 右側にある【Update（更新）】をクリック

テーマオプション画面左上に『Settings Saved!（設定を保存しました）』と表示されれば、最新の配色データに上書きされ完了です。

保存したカスタム配色データを削除するには、以下の手順で行います。

1. 【2.Predefined Color Scheme / 配色設定】にある【Delete（削除）】をクリック
2. 削除したい配色データを選択（プリセットは選択できません）
3. 選択した配色データに×マークが付いているのを確認し、【Cansel Selection（選択をキャンセル）】右側の【Delete（削除）】をクリック

テーマオプション画面左上に『Settings Saved!（設定を保存しました）』と表示され、該当のカラーアイコンが削除されれば完了です。

このセクションでは、【4.サイト全体の配色の保存】で保存した配色のインポートとエクスポートについての手順について解説しています。

【Export（エクスポート）】メニューの表示には【Save（保存）】または【Import（インポート）】からカスタム配色データを作成しておく必要があります。

配色データをエクスポートするには、以下の手順で行います。

1. 【2.Predefined Color Scheme / 配色設定】にある【Export（エクスポート）】をクリック
2. テキストエリアに配色データがコードとして表示されるのでコピペする

エクスポートデータをインポートする方法については、次（6-2）で解説しています。

なお、テキストエリアに表示されるエクスポート用コードは、最新の保存データまたはインポートデータとなります。

バックアップ用に保存していた配色データや、Avadaを使用した他サイトの配色データのインポート方法について解説しています。

このサイトで実際に使われている配色データを用意したので、デモとして使ってみてください。使用前に現在の配色データを保存またはエクスポートして、バックアップを取りましょう。

配色データのインポートは、以下の手順で行います。

1. 【2.Predefined Color Scheme / 配色設定】にある【Import（インポート）】をクリック
2. 画像②と③エリアが表示されるので、テキストエリアにコピペしたコードをペースト
3. テキストエリア下側にある【Import（インポート）】をクリック

左上に『Settings Saved!（設定を保存しました）』と表示され、ページがリロードされます。
テンプレで用意されているカラー横に、新しいカラーアイコンが追加表示されれば完了です。

保存と同様に、配色データをインポートすると【Update（更新）】【Delete（削除）】【Export（エクスポート）】メニューが新たに追加されます。

このインポートされた配色データを利用するには、新しいカラーアイコンをクリックし有効化する必要があります。有効化すると左上に『Settings Imported!（設定がインポートされました）』と表示され、カラーアイコンが赤枠で囲まれます。その状態で【Save Changes（変更を保存）】をクリックすると、設定が反映されます。