ワードプレス

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

affinger-color-setting-icon-20200317_ec



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

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

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

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

具体的には…

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

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

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

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

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

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

続きを見る

このブログのWordPress環境

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

著者

azuki_01

あずき@ブロガー

ブログを愛してます

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

プロフィール

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

お疲れさまでした♪

あずき🐥

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

著者

azuki_01

あずき@ブロガー

ブログを愛してます

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

プロフィール

Twitter

-ワードプレス

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