あずきです🐥
当ブログでも愛用中の人気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アイコン」の色設定をカスタマイズする方法
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
Contents
AFFINGER6「Webアイコン」の使い方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
補足
ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「そもそもクラシックエディタとグーテンベルグってなに…？」という場合はこちらをどうぞ ↓（重要です）
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
補足
ご紹介する内容は、WordPressプラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」を導入していることが前提となります ↓
-
【2021年】Advanced Editor Tools（旧：TinyMCE Advanced）の設定方法を初心者向けに解説【WordPressプラグイン／クラシックエディタ版】
続きを見る
ステップ１：ACTION AFFINGER6における「Webアイコン」の使い方
まずは、今回「Webアイコン」を付けたい任意のテキストを…
↑ このように丸ごと選択した状態で、画面上部の「スタイル」というタブを開きます
関連
「ビジュアルとテキストってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPress「ビジュアル・テキスト」エディタの違いとは？使い分けの実践的なポイントを初心者向けに解説【クラシックエディタの記事作り】
続きを見る
「スタイル」タブを開いたら、そのなかの…
↑「アイコン」というタブを開くと、上画像のように「Webアイコン」のデザインタイプが一覧表示されるので、このなかから任意のタイプを選択しましょう
これで…
↑ このような「Webアイコン」付きのテキストに変わりました
ちなみに、上記の「チェック」アイコンを含めた「全てのデザインタイプ」を並べてみると…
↑ この通りです
ステップ２：ACTION AFFINGER6における「Webアイコン」の色設定をカスタマイズする方法
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
で「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
オプション（その他） ＞ 記事内のWebアイコン（スタイル）
という順に、タブを開きます
すると…
↑ このような色設定の項目が用意されているので、それぞれのデザインタイプで任意のカラーを指定しましょう
今回は例として…
- はてなマーク → #523634（ダークブラウン）
- チェックマーク → #523634（ダークブラウン）
- エクステンションマーク → #f54e6a（ピンク）
- メモマーク → #523634（ダークブラウン）
- 人物マーク → #523634（ダークブラウン）
- 王冠マーク → #dab300（ゴールド）
- 初心者マーク → #4CAF50（グリーン） ※デフォルトのまま
このようなカラーコードにそれぞれ変更してみます
実際の画面上で確認してみると…
↑ このような感じになりました🐥
ちなみに！
こうした各種「Webアイコン」を付けたテキストについては…
↑「中央揃え・右寄せ」などの配置変更や「フォントサイズ・カラー」の変更なども、通常のテキストと同様に行うことができます🐣
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020