専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「Webアイコン」の入れ方＆カスタマイズ設定方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず、ACTION AFFINGER6における「Webアイコン」というのは…
↓（カスタマイズ後の例）
↑ こういったものです
ちなみに、同じくACTION AFFINGER6で使える…
↑ こうした…
- マイボックス
- 見出し付きフリーボックス
などの各種「デザインボックス」内に表示されるアイコンは、今回ご紹介するWebアイコンとはまた「別モノ」になるので、混同しないようご注意ください
関連
「マイボックス」におけるアイコンのカスタマイズ方法については、こちらをどうぞ ↓
-
AFFINGER6「マイボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド／第７章／No.11】
続きを見る
「見出し付きフリーボックス」におけるアイコンのカスタマイズ方法は、こちらから ↓
-
AFFINGER6「見出し付きフリーボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド／第７章／No.12】
続きを見る
※そのほかの各種デザインボックスについても、カスタマイズの要領は「上記２種類のボックスと基本的に同じ」です
また、同様に…
↑ こうした各種「箇条書きリスト」として表示されるアイコンについても、今回のWebアイコンとは「別モノ」なので、混同に注意です
関連
「箇条書きリスト」のカスタマイズ方法については、こちらから ↓
-
AFFINGER6「箇条書きリスト」の作り方＆カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド／第７章／No.10】
続きを見る
そんなACTION AFFINGER6の「Webアイコン」について、２つのステップで丁寧に解説していきます
- 「Webアイコン」の使い方
- 「Webアイコン」の色設定をカスタマイズする方法
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
【2023年3月】AFFINGER6の購入・導入手順を１から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
-
【2023年3月】AFFINGER6の購入・導入手順を１から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
Contents
AFFINGER6「Webアイコン」の入れ方＆カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド／第７章／No.13】
注意
ご紹介する内容は、いずれもWordPressの編集エディタが…
クラシックエディタ
の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「クラシックエディタとグーテンベルグってなに…？」という場合や、「クラシックエディタに切り替える方法（一瞬です！）」はこちらをどうぞ ↓ ※重要です
-
WordPressクラシックエディタとグーテンベルグとは？Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド／第４章／No.6】
続きを見る
補足
ご紹介する内容は、WordPressの定番プラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」を導入していることが前提となります ↓
-
【2023年】プラグイン「Advanced Editor Tools」のおすすめ設定方法：クラシックエディタ版【ワードプレスブログ完全初心者ガイド／第４章／No.8】
続きを見る
ステップ１：ACTION AFFINGER6における「Webアイコン」の使い方
まずは、今回「Webアイコン」を付けたい任意のテキストを…
↑ このように丸ごと選択した状態で、画面上部の「スタイル」というタブを開きます
関連
「ビジュアルとテキストってなに…？」という場合は、こちらをどうぞ ↓
-
【2022年】WordPress「ビジュアル・テキスト」の違いとは？使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド／第７章／No.2】
続きを見る
「スタイル」タブを開いたら、そのなかの…
↑「アイコン」というタブを開くと、上画像のように「Webアイコン」のデザインタイプが一覧表示されるので、このなかから任意のタイプを選択しましょう
これで…
↑ このような「Webアイコン」付きのテキストに変わりました
ちなみに、上記の「チェック」アイコンを含めた「全てのデザインタイプ」を並べてみると…
↑ この通りです
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方「３つ」のパターン。アフィリエイト広告の挿入方法
-
WordPressにおける広告リンクの貼り方「３つ」のパターン。アフィリエイト広告の挿入方法
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ステップ２：ACTION AFFINGER6における「Webアイコン」の色設定をカスタマイズする方法
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
で「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
オプション（その他） ＞ 記事内のWebアイコン（スタイル）
という順に、タブを開きます
すると…
↑ このような色設定の項目が用意されているので、それぞれのデザインタイプで任意のカラーを指定しましょう
今回は例として…
- はてなマーク → #523634（ダークブラウン）
- チェックマーク → #523634（ダークブラウン）
- エクステンションマーク → #f54e6a（ピンク）
- メモマーク → #523634（ダークブラウン）
- 人物マーク → #523634（ダークブラウン）
- 王冠マーク → #dab300（ゴールド）
- 初心者マーク → #4CAF50（グリーン） ※デフォルトのまま
このようなカラーコードにそれぞれ変更してみます
実際の画面上で確認してみると…
↑ このような感じになりました🐥
ちなみに！
こうした各種「Webアイコン」を付けたテキストについては…
↑「中央揃え・右寄せ」などの配置変更や「フォントサイズ・カラー」の変更なども、通常のテキストと同様に行うことができます🐣
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
「全８章」の総合TOPページです
