はじめに
ウェブサイトのデザインにおいて、一貫性と統一感は重要な要素です。Elementorでは、グローバルカラー機能を使用して、サイト全体で使用する色を簡単に設定し、維持することができます。
症状・背景
このテーマが必要になる主な場面:
- サイトのデザインの一貫性を高めたい
- 色調がばらついており、統一感に欠けている
- フォントやスタイルと同様に色も中央で管理したい
- 共通のデザイン要素（ヘッダー、フッター等）を使用している
手順・設定方法
ステップ1: グローレベルカラー設定を開く
# Elementorのダッシュボードにログインします。
cd wp-admin/edit.php?post_type=elementor_library
# 「グローバルスタイル」を選択して開きます。
cd edit.php?post_type=elementor-global-stylesステップ2: 新しいグローバルカラーを追加する
# グローバルスタイルページで「新規追加」ボタンをクリックします。
wp-admin/post-new.php?post_type=elementor_global_styles
# 「色」タブを選択し、「新しい色スイッチ」をオンにします。
click .e-global-colors__toggle-buttonステップ3: 色の詳細を設定する
# テーマカラーから選ぶか、RGBやHexで任意の色を指定します。
select #elementor-theme-colors .e-select2
input #elementor-custom-colors .color-palette-input
# 任意の名前を入力して保存します。
type input[name="name"]
click button[type="submit"]ステップ4: 設定したグローバルカラーを使用する
# サイトページを開き、Elementor編集モードに切り替えます。
wp-admin/post.php?post=1&action=elementor&chrome=preview
# 必要な要素を選択し、「スタイル」→「グローバル」タブで設定した色を使用します。
select .e-control-box__control
click .elementor-global-colors__button注意事項
- テーマの更新時に手動で確認する必要がある場合があります。
- カスタムCSSを追加している場合は、グローバルカラーと衝突しないように注意してください。
- セキュリティ上の注意: 外部からのアクセスや権限設定を適切に管理し、不正な操作からサイトを保護すること。
- パフォーマンス/運用上の注意: 色の種類や使用頻度を考慮して効率的な管理を行う。
まとめ
1. 一貫性: サイト全体で統一された色を使用することで、デザインの一貫性が向上します。
2. 効率化: デザイン要素を集中管理でき、更新作業も容易になります。
3. カスタマイズ: 設定したグローバルカラーは自由に変更可能で柔軟性があります。
4. 維持: 一元管理により、サイトの保守が楽に行えます。
5. ユーザビリティ: グローバルカラー機能はユーザーにとって直感的で使いやすいデザインを提供します。
関連記事: