affinger-color-setting-icon-20200317_ec

WordPress

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



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

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

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

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

具体的には…

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

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

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

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

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

affinger-web-icon-20200314_ec
AFFINGER5で便利な「Webアイコン」の種類と使い方【WordPressブログ】

続きを見る

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

【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です

お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.