専業ブロガー７年目のあかね猫です
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「Webアイコン」の入れ方＆カスタマイズ設定方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず、ACTION AFFINGER6における「Webアイコン」というのは…
↓（カスタマイズ後の例）
↑ こういったものです
ちなみに、同じくACTION AFFINGER6で使える…
↑ こうした…
- マイボックス
- 見出し付きフリーボックス
などの各種「デザインボックス」内に表示されるアイコンは、今回ご紹介するWebアイコンとはまた「別モノ」になるので、混同しないようご注意ください
関連
「マイボックス」におけるアイコンのカスタマイズ方法については、こちらをどうぞ ↓
-
AFFINGER6「マイボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ完全初心者ガイド】
続きを見る
「見出し付きフリーボックス」におけるアイコンのカスタマイズ方法は、こちらから ↓
-
AFFINGER6「見出し付きフリーボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ完全初心者ガイド】
続きを見る
※そのほかの各種デザインボックスについても、カスタマイズの要領は「上記２種類のボックスと基本的に同じ」です
また、同様に…
↑ こうした各種「箇条書きリスト」として表示されるアイコンについても、今回のWebアイコンとは「別モノ」なので、混同に注意です
関連
「箇条書きリスト」のカスタマイズ方法については、こちらから ↓
-
AFFINGER6「箇条書きリスト」の作り方＆カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】
続きを見る
そんなACTION AFFINGER6の「Webアイコン」について、２つのステップで丁寧に解説していきます
- 「Webアイコン」の使い方
- 「Webアイコン」の色設定をカスタマイズする方法
Contents
AFFINGER6「Webアイコン」の入れ方＆カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】
注意
ご紹介する内容は、いずれもWordPressの編集エディタが…
クラシックエディタ
の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「クラシックエディタとグーテンベルグってなに…？」という場合や、「クラシックエディタに切り替える方法（一瞬です！）」はこちらをどうぞ ↓ ※重要です
補足
ご紹介する内容は、WordPressの定番プラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」を導入していることが前提となります ↓
-
Advanced Editor Toolsのおすすめな設定方法＆使い方を30枚超の画像付きで徹底解説【WordPressのエディタ拡張プラグイン／クラシックエディタ版】
続きを見る
ステップ１：ACTION AFFINGER6における「Webアイコン」の使い方
まずは、今回「Webアイコン」を付けたい任意のテキストを…
↑ このように丸ごと選択した状態で、画面上部の「スタイル」というタブを開きます
関連
「ビジュアルとテキストってなに…？」という場合は、こちらをどうぞ ↓
-
WordPress「ビジュアル・テキスト」の違いとは？使い分けのポイントまとめ【ワードプレスブログ完全初心者ガイド】
続きを見る
「スタイル」タブを開いたら、そのなかの…
↑「アイコン」というタブを開くと、上画像のように「Webアイコン」のデザインタイプが一覧表示されるので、このなかから任意のタイプを選択しましょう
これで…
↑ このような「Webアイコン」付きのテキストに変わりました
ちなみに、上記の「チェック」アイコンを含めた「全てのデザインタイプ」を並べてみると…
↑ この通りです
ステップ２：ACTION AFFINGER6における「Webアイコン」の色設定をカスタマイズする方法
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
で「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
オプション（その他） ＞ 記事内のWebアイコン（スタイル）
という順に、タブを開きます
すると…
↑ このような色設定の項目が用意されているので、それぞれのデザインタイプで任意のカラーを指定しましょう
今回は例として…
- はてなマーク → #523634（ダークブラウン）
- チェックマーク → #523634（ダークブラウン）
- エクステンションマーク → #f54e6a（ピンク）
- メモマーク → #523634（ダークブラウン）
- 人物マーク → #523634（ダークブラウン）
- 王冠マーク → #dab300（ゴールド）
- 初心者マーク → #4CAF50（グリーン） ※デフォルトのまま
このようなカラーコードにそれぞれ変更してみます
実際の画面上で確認してみると…
↑ このような感じになりました🐥
ちなみに！
こうした各種「Webアイコン」を付けたテキストについては…
↑「中央揃え・右寄せ」などの配置変更や「フォントサイズ・カラー」の変更なども、通常のテキストと同様に行うことができます🐣