今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「Webアイコン」の色設定
をカスタマイズする手順
をご紹介していきたいと思います
まずWebアイコンとは、記事のなかに挿入する色んな「デザインパーツ」のこと
具体的には…
↑ こちらのアイコンのこと
「WING（AFFINGER5）」の場合、これらの色設定をカスタマイズする方法は超簡単です
それではさっそく見ていきましょー🐥
Webアイコンの使い方自体は、↓ をどうぞ♪
-
AFFINGER5で便利な「Webアイコン」の種類と使い方【WordPressブログ】
続きを見る
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
【Webアイコン編】AFFINGER5における「色設定」のカスタマイズ手順
まずは、カスタマイズ画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ 左側のメニュー一覧から、「オプションカラー」をクリックします
↑ 左側のメニュー一覧から、「記事内のWebアイコン」という項目をクリックします
各Webアイコンの色設定は…
↑ こちらの「はてなマーク」～「初心者マーク」までの項目で、それぞれカスタマイズできます
初期設定では…
↑ このように ！ アイコンのみ赤色で、あとはブラックに設定されてます
今回は参考例として、僕が実際に使ってる…
↑ このような配色に設定してみます
具体的なカラーコードは、
- オレンジ色 ＝ #ffb049
- 赤色 ＝ #f54e6a
- 緑色 ＝ #81d742
この通りです
改めてプレビューで見てみると…
↑ こんな感じになりました
設定できたら…
↑ 画面上部の 公開 をクリックして、設定を保存しましょう
これで、「Webアイコン」の色設定はOKです
お疲れさまでした♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^