ほとんどの場合、ボタンアイコンはデフォルトのスタイルを自動的に継承します。ただし、カスタムボタンの背景、ブランドカラー、またはダークレイアウトを使用する場合は、適切な視認性と一貫したスタイルを確保するために、アイコンの色を手動で定義する必要がある場合があります。
その ボタン要素 GemPagesでは、ボタンの設定方法に応じて2種類のレイアウトタイプがサポートされています。
- アイコンのないボタン： ボタンのテキストのみを表示します
- アイコン付きボタン： ボタンテキストの横にアイコンを表示します
あなたが アイコン付きボタン レイアウトでは、カスタム CSS を使用してアイコンの外観をカスタマイズできます。このガイドでは、 アイコンの色を変更する アイコンを含むボタンを使用する場合。
ボタンデザインにおいてアイコンの色が重要な理由
ボタン内のアイコンは、ユーザーが操作の目的を素早く理解するのに役立ちます。
しかし、デフォルトのアイコンカラーは必ずしもデザインのニーズに合致するとは限りません。多くの実際のプロジェクトでは、販売者はボタンアイコンに次のようなことを求めています。
- ブランドカラーに合わせる
- 暗い背景やグラデーションの背景でも視認性を維持
- ボタンのテキストの色に合わせる
- 複数のセクションにわたって一貫したスタイルを維持する
アイコンの色が背景色と十分にコントラストをなしていないと、見づらくなり、ボタンの効果が低下する可能性があります。
ボタン要素のアイコンの色を変更する方法
ボタンにカスタムアイコンカラーを適用するには、以下の手順に従ってください。
ステップ1：ボタンのカスタムコードを開く
- エディターでページを開きます。
- 動画内で ボタン要素 アイコンが含まれているもの。
- ボタン要素を右クリックします。
- 選択する カスタムコード.
カスタムコードパネルが開きます。
ステップ2：CSSコードを追加する
内部 CSS タブに、次のコードを追加します。
| button.elementID svg{
色：#ffffff; } |
置換：
要素ID 上部に表示されているクラスを使用します。
＃FFFFFF ご希望のカラーコードでご指定ください。
使用したいHEXカラーコードがわからない場合は、オンラインのカラーピッカーツールを使用して生成できます。 以下に、役立つウェブサイトをいくつかご紹介します。
- カラーピッカーオンラインツールカラーホイールを使用して色を選択し、HEX、RGB、またはHSL値を即座にコピーできます。
- 画像カラーピッカーツール画像をアップロードして、任意の領域をクリックすると、その画像の正確なHEXカラーコードを抽出できます。
ステップ 3: 保存して公開する
コードを追加したら、クリックしてください。 保存します。 Tアイコンの色はすぐに更新されます。
効果的なアイコンカラーを選ぶためのヒント
次の点を考慮してください
1. 強いコントラストを維持する
アイコンは見やすいものであるべきです。
良い対比の例：
- 暗いボタン + 白いアイコン
- ライトボタン＋ダークアイコン
コントラストが低い例：
- ダークボタン + ダークアイコン
- ライトボタン＋ライトアイコン
2. ブランドカラーパレットの範囲内で使用してください
可能な限り公式ブランドカラーを使用してください。
視覚的な一貫性を損なうような、無作為な色の使用は避けてください。
3. デバイス間でのテスト
アイコンの表示状態を確認してください：
- デスクトップ
- タブレット
- モバイル
画面が小さいと、色の見え方が異なる場合があります。
アイコンのサイズも変更する必要がある場合は、以下のガイドに従ってください。 カスタムコードを使用してボタン要素のアイコンサイズを変更する方法 色のカスタマイズを適用する前に、アイコンのサイズを調整してください。
コメントしてくださってありがとうございます