WORDPRESS

AFFINGER6「Webアイコン」の入れ方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.13】

AFFINGER6「Webアイコン」の入れ方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.13】
 

専業ブロガー5年目のあずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「Webアイコン」の入れ方&カスタマイズ設定方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まず、ACTION AFFINGER6における「Webアイコン」というのは…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 top-01-a

↓(カスタマイズ後の例)

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 top-01-b

↑ こういったものです

 

ちなみに、同じくACTION AFFINGER6で使える…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 top-02-a

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 top-02-b

↑ こうした…

  • マイボックス
  • 見出し付きフリーボックス

などの各種「デザインボックス」内に表示されるアイコンは、今回ご紹介するWebアイコンとはまた「別モノ」になるので、混同しないようご注意ください

 

関連

「マイボックス」におけるアイコンのカスタマイズ方法については、こちらをどうぞ ↓

AFFINGER6「マイボックス」の作り方&カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド/第7章/No.11】
AFFINGER6「マイボックス」の作り方&カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド/第7章/No.11】

続きを見る

 

「見出し付きフリーボックス」におけるアイコンのカスタマイズ方法は、こちらから ↓

AFFINGER6「見出し付きフリーボックス」の作り方&カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド/第7章/No.12】
AFFINGER6「見出し付きフリーボックス」の作り方&カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド/第7章/No.12】

続きを見る

※そのほかの各種デザインボックスについても、カスタマイズの要領は「上記2種類のボックスと基本的に同じ」です

 

また、同様に…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 top-03

↑ こうした各種「箇条書きリスト」として表示されるアイコンについても、今回のWebアイコンとは「別モノ」なので、混同に注意です

 
 

そんなACTION AFFINGER6の「Webアイコン」について、2つのステップで丁寧に解説していきます

  1. 「Webアイコン」の使い方
  2. 「Webアイコン」の色設定をカスタマイズする方法
ということで、さっそく見ていこー!
 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2023年3月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
【2023年3月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

AFFINGER6「Webアイコン」の入れ方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.13】

 

注意

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

続きを見る

 

補足

ご紹介する内容は、WordPressの定番プラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」を導入していることが前提となります ↓

プラグイン「Advanced Editor Tools」のおすすめ設定方法:クラシックエディタ版【ワードプレスブログ完全初心者ガイド/第4章/No.8】
【2023年】プラグイン「Advanced Editor Tools」のおすすめ設定方法:クラシックエディタ版【ワードプレスブログ完全初心者ガイド/第4章/No.8】

続きを見る

 

ステップ1:ACTION AFFINGER6における「Webアイコン」の使い方

WordPress ヘッダー b-01

まずは、今回「Webアイコン」を付けたい任意のテキストを…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 1-1-01-a

↑ このように丸ごと選択した状態で、画面上部の「スタイル」というタブを開きます

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK!
 
 

「スタイル」タブを開いたら、そのなかの…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 1-1-01-b

↑「アイコン」というタブを開くと、上画像のように「Webアイコン」のデザインタイプが一覧表示されるので、このなかから任意のタイプを選択しましょう

ここでは例として、「チェック」を選んでみるよ!
 

これで…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 1-1-01-c

↑ このような「Webアイコン」付きのテキストに変わりました

 

ちなみに、上記の「チェック」アイコンを含めた「全てのデザインタイプ」を並べてみると…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 1-1-02

↑ この通りです

つづいて、Webアイコンの色を【カスタマイズ】するやり方について見ていこう!
 

ステップ2:ACTION AFFINGER6における「Webアイコン」の色設定をカスタマイズする方法

WordPress ヘッダー b-02

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

で「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…

オプション(その他) > 記事内のWebアイコン(スタイル)

という順に、タブを開きます

 

すると…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 1-2-01

↑ このような色設定の項目が用意されているので、それぞれのデザインタイプで任意のカラーを指定しましょう

 

今回は例として…

  • はてなマーク → #523634(ダークブラウン)
  • チェックマーク → #523634(ダークブラウン)
  • エクステンションマーク → #f54e6a(ピンク)
  • メモマーク → #523634(ダークブラウン)
  • 人物マーク → #523634(ダークブラウン)
  • 王冠マーク → #dab300(ゴールド)
  • 初心者マーク → #4CAF50(グリーン) ※デフォルトのまま

このようなカラーコードにそれぞれ変更してみます

一通り設定できたら、左上の「公開」ボタンをクリックしてカスタマイズはもう完了だよ!
 

実際の画面上で確認してみると…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 1-2-02-a

↑ このような感じになりました🐥

 

ちなみに!

こうした各種「Webアイコン」を付けたテキストについては…

AFFINGER6「Webアイコン」の使い方とカスタマイズ方法 1-2-02-b

↑「中央揃え・右寄せ」などの配置変更や「フォントサイズ・カラー」の変更なども、通常のテキストと同様に行うことができます🐣

 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

当サイトでは、このサイト経由で商品やサービスを購入・契約していただくことで当サイトに紹介料が入る【アフィリエイトリンク】を使用しております

これは私(あずき猫)にとってのサイト運営というものが「1つの事業」であり、必要経費はもちろんのこと、それ以上に「膨大な時間やエネルギー」を費やしているためですが、ただ惜しむらくは当該システムを使用していることによる読者様にとってのメリットは特段ないという点です

せめてもの思いとして、こうして得られた紹介料を糧に「読者様のお役に立てる記事作り」「価値のあるコンテンツ制作」に一層努めていく所存ですので、何卒ご理解のほどお願い申し上げます

当サイトでは可能な限り正確な情報を掲載するよう努めておりますが、必ずしもその正確性を保証するものではありません

読者様におかれましては、当サイトをあくまでも主観的な情報の1つとして捉えていただき、「客観的、俯瞰的な視点」をもって活用していただければ幸いです

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS