専業ブロガー5年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「Webアイコン」の入れ方&カスタマイズ設定方法
について、ブログ初心者さん向けに1からわかりやすく解説していきます
まず、ACTION AFFINGER6における「Webアイコン」というのは…
↓(カスタマイズ後の例)
↑ こういったものです
ちなみに、同じくACTION AFFINGER6で使える…
↑ こうした…
- マイボックス
- 見出し付きフリーボックス
などの各種「デザインボックス」内に表示されるアイコンは、今回ご紹介するWebアイコンとはまた「別モノ」になるので、混同しないようご注意ください
関連
「マイボックス」におけるアイコンのカスタマイズ方法については、こちらをどうぞ ↓
-
AFFINGER6「マイボックス」の作り方&カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド/第7章/No.11】
続きを見る
「見出し付きフリーボックス」におけるアイコンのカスタマイズ方法は、こちらから ↓
-
AFFINGER6「見出し付きフリーボックス」の作り方&カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド/第7章/No.12】
続きを見る
※そのほかの各種デザインボックスについても、カスタマイズの要領は「上記2種類のボックスと基本的に同じ」です
また、同様に…
↑ こうした各種「箇条書きリスト」として表示されるアイコンについても、今回のWebアイコンとは「別モノ」なので、混同に注意です
関連
「箇条書きリスト」のカスタマイズ方法については、こちらから ↓
-
AFFINGER6「箇条書きリスト」の作り方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.10】
続きを見る
そんなACTION AFFINGER6の「Webアイコン」について、2つのステップで丁寧に解説していきます
- 「Webアイコン」の使い方
- 「Webアイコン」の色設定をカスタマイズする方法

▼ ACTION AFFINGER6の「購入~導入手順」はこちらから ▼
【2023年9月】AFFINGER6の購入&導入手順を1から徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】
-
【2023年9月】AFFINGER6の購入&導入手順を1から徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)
Contents
AFFINGER6「Webアイコン」の入れ方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.13】
注意
ご紹介する内容は、いずれもWordPressの編集エディタが…
クラシックエディタ
の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です
-
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
続きを見る
補足
ご紹介する内容は、WordPressの定番プラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」を導入していることが前提となります ↓
-
【2023年】Advanced Editor Toolsのおすすめな設定方法&使い方を30枚超の画像付きで徹底解説【WordPressのエディタ拡張プラグイン/クラシックエディタ版】
続きを見る
ステップ1:ACTION AFFINGER6における「Webアイコン」の使い方
まずは、今回「Webアイコン」を付けたい任意のテキストを…
↑ このように丸ごと選択した状態で、画面上部の「スタイル」というタブを開きます

関連
「ビジュアルとテキストってなに…?」という場合は、こちらをどうぞ ↓
-
【2022年】WordPress「ビジュアル・テキスト」の違いとは?使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド/第7章/No.2】
続きを見る
「スタイル」タブを開いたら、そのなかの…
↑「アイコン」というタブを開くと、上画像のように「Webアイコン」のデザインタイプが一覧表示されるので、このなかから任意のタイプを選択しましょう

これで…
↑ このような「Webアイコン」付きのテキストに変わりました
ちなみに、上記の「チェック」アイコンを含めた「全てのデザインタイプ」を並べてみると…
↑ この通りです

\ 「なぜ売れないか?」を徹底解析 /
結果が見えるサイト運営に
AffiliateRun~なぜ売れないか?
PDFマニュアル付き!
公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連:WordPressにおける広告リンクの貼り方「3つ」のパターン。アフィリエイト広告の挿入方法
-
WordPressにおける広告リンクの貼り方「3つ」のパターン。アフィリエイト広告の挿入方法
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ステップ2:ACTION AFFINGER6における「Webアイコン」の色設定をカスタマイズする方法
まずは、WordPress管理画面の左側一覧から…
外観 > カスタマイズ
で「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
オプション(その他) > 記事内のWebアイコン(スタイル)
という順に、タブを開きます
すると…
↑ このような色設定の項目が用意されているので、それぞれのデザインタイプで任意のカラーを指定しましょう
今回は例として…
- はてなマーク → #523634(ダークブラウン)
- チェックマーク → #523634(ダークブラウン)
- エクステンションマーク → #f54e6a(ピンク)
- メモマーク → #523634(ダークブラウン)
- 人物マーク → #523634(ダークブラウン)
- 王冠マーク → #dab300(ゴールド)
- 初心者マーク → #4CAF50(グリーン) ※デフォルトのまま
このようなカラーコードにそれぞれ変更してみます

実際の画面上で確認してみると…
↑ このような感じになりました🐥
ちなみに!
こうした各種「Webアイコン」を付けたテキストについては…
↑「中央揃え・右寄せ」などの配置変更や「フォントサイズ・カラー」の変更なども、通常のテキストと同様に行うことができます🐣
人気記事
各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます
あずきのワードプレスブログ「完全初心者」ガイド!
全8章の「総合TOP」ページです