【クリエイターモード】テンプレートAdvanceで、ヘッダーのアイコンを黒に変更する方法を教えてください。 – makeshop よくある質問

CSSで、アイコンの色の反転（白→黒にする）を指定することができます。

編集の際は、デザインセットのコピーボタンをクリックし、バックアップを保管したうえで作業してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」

欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に

.h-icon li img

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

.h-icon li img { 
   width: 40px; 
   height: auto; 
   filter: drop-shadow(0 0 2px #666); 
}

この記述を以下に変更し、保存してください。

＜変更後＞

.h-icon li img { 
   width: 40px; 
   height: auto; 
   filter: invert(100%); 
}

トップページの写真の明度が低い場合は、トップページだけ白に指定することも可能です。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ「CSS」に

.h-icon li img { 
   filter: drop-shadow(0 0 2px #666); 
}

と入力（コピー＆ペースト）し保存してください。

関連記事