WORDPRESS

AFFINGER5で「Webアイコン」の色設定をカスタマイズする手順【WordPressブログ】

AFFINGER5で「Webアイコン」の色設定をカスタマイズする手順 アイキャッチ



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

「Webアイコン」の色設定
をカスタマイズする手順

をご紹介していきたいと思います

まずWebアイコンとは、記事のなかに挿入する色んな「デザインパーツ」のこと

具体的には…

affinger-customize-web-icon-20200317_1-07

↑ こちらのアイコンのこと

WING(AFFINGER5)」の場合、これらの色設定をカスタマイズする方法は超簡単です

それではさっそく見ていきましょー🐥

Webアイコンの使い方自体は、↓ をどうぞ♪

AFFINGER5で便利な「Webアイコン」の種類と使い方 アイキャッチ
AFFINGER5で便利な「Webアイコン」の種類と使い方【WordPressブログ】

続きを見る

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

【Webアイコン編】AFFINGER5における「色設定」のカスタマイズ手順

pc-work-202001_01

まずは、カスタマイズ画面を開きましょう(下記手順です)

affinger-customize-web-icon-20200317_1-01

↑ WordPress管理画面 > 外観 > カスタマイズ をクリックします

affinger-customize-web-icon-20200317_1-02

↑ 左側のメニュー一覧から、「オプションカラー」をクリックします

affinger-customize-web-icon-20200317_1-03

↑ 左側のメニュー一覧から、「記事内のWebアイコン」という項目をクリックします

各Webアイコンの色設定は…

affinger-customize-web-icon-20200317_1-04

↑ こちらの「はてなマーク」~「初心者マーク」までの項目で、それぞれカスタマイズできます

初期設定では…

affinger-customize-web-icon-20200317_1-05

↑ このように  アイコンのみ赤色で、あとはブラックに設定されてます

今回は参考例として、僕が実際に使ってる…

affinger-customize-web-icon-20200317_1-06

↑ このような配色に設定してみます

具体的なカラーコードは、

  • オレンジ色 = #ffb049
  • 赤色 = #f54e6a
  • 緑色 = #81d742

この通りです

改めてプレビューで見てみると…

affinger-customize-web-icon-20200317_1-07

↑ こんな感じになりました

設定できたら…

affinger-customize-web-icon-20200317_1-08

↑ 画面上部の 公開 をクリックして、設定を保存しましょう

これで、「Webアイコン」の色設定はOKです

お疲れさまでした♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ