専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「Webアイコン」の使い方とカスタマイズ方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず、ACTION AFFINGER6における「Webアイコン」というのは…
↓（カスタマイズ後の例）
↑ こういったものです
ちなみに、同じくACTION AFFINGER6で使える…
↑ こうした…
- マイボックス
- 見出し付きフリーボックス
などの各種「デザインボックス」内に表示されるアイコンは、今回ご紹介するWebアイコンとはまた「別モノ」になるので、混同しないようご注意ください
関連
「マイボックス」におけるアイコンのカスタマイズ方法については、こちらをどうぞ ↓
-
AFFINGER6「マイボックス」の作り方とカスタマイズ方法・カスタマイズ例を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
「見出し付きフリーボックス」におけるアイコンのカスタマイズ方法は、こちらから ↓
-
AFFINGER6「見出し付きフリーボックス」の作り方とカスタマイズ方法・カスタマイズ例を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
※そのほかの各種デザインボックスについても、カスタマイズの要領は「上記２種類のボックスと基本的に同じ」です
また、同様に…
↑ こうした各種「箇条書きリスト」として表示されるアイコンについても、今回のWebアイコンとは「別モノ」なので、混同に注意です
関連
「箇条書きリスト」のカスタマイズ方法については、こちらから ↓
-
AFFINGER6「箇条書きリスト」の作り方と、色＆デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
そんなACTION AFFINGER6の「Webアイコン」について、２つのステップで丁寧に解説していきます
- 「Webアイコン」の使い方
- 「Webアイコン」の色設定をカスタマイズする方法
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
-
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
Contents
AFFINGER6「Webアイコン」の使い方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
補足
ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「そもそもクラシックエディタとグーテンベルグってなに…？」という場合はこちらをどうぞ ↓（重要です）
-
WordPressクラシックエディタとグーテンベルグとは？初心者向けに１から解説【プラグイン「Classic Editor」の導入方法まで】
続きを見る
補足
ご紹介する内容は、WordPressプラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」を導入していることが前提となります ↓
-
【2022年】Advanced Editor Tools（旧：TinyMCE）の設定方法を初心者向けに解説【WordPressプラグイン／クラシックエディタ版】
続きを見る
ステップ１：ACTION AFFINGER6における「Webアイコン」の使い方
まずは、今回「Webアイコン」を付けたい任意のテキストを…
↑ このように丸ごと選択した状態で、画面上部の「スタイル」というタブを開きます
関連
「ビジュアルとテキストってなに…？」という場合は、こちらをどうぞ ↓
-
【2022年】WordPress「ビジュアル・テキスト」エディタの違いとは？使い分けの実践的なポイントを初心者向けに解説【クラシックエディタの記事作り】
続きを見る
「スタイル」タブを開いたら、そのなかの…
↑「アイコン」というタブを開くと、上画像のように「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ページです
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる！
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬！
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測！
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にいるので覗いてもらえると嬉しいです^^