AFFINGER5で「会話吹き出し」の色＆デザイン設定をカスタマイズする手順【WordPressブログ】

あずきです🐥

このブログでも愛用中のWordPressテーマ、「WING（AFFINGER5）」における…

について、初心者さん向けに1から解説していきます（簡単です♪）

まず「会話吹き出し」とは…

↑ こちらのこと

で、「WING（AFFINGER5）」のこの「会話吹き出し」は…

こういったカスタマイズが可能です

具体的には…

にて、それぞれ行っていきます

ちなみに、この会話吹き出しの基本的な使い方と「アイコン登録」の手順は ↓ をどうぞ♪

AFFINGER5で「会話吹き出し」を使おう。会話アイコンの登録と、記事へ入れる手順【WordPressブログ】

続きを見る

会話吹き出しを「反対向き」にする手順は ↓ から♪

AFFINGER5の「会話吹き出し」を反対向きにする方法【　r]　←これの入力方法をわかりやすく解説】

続きを見る

それではさっそく見ていきましょー🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

【会話吹き出し編】AFFINGER5における「色設定」＆「デザイン設定」のカスタマイズ手順

「網掛けの色変更」＆「丸い枠線を消す」

まずは、「カスタマイズ設定」にて行える…

この2つのカスタマイズ手順を見ていきます🐥

まずは、カスタマイズ画面を開きましょう（下記手順です）

↑ WordPress管理画面　＞　外観　＞　カスタマイズ　をクリックします

↑ 左側のメニュー一覧から、「オプションカラー」をクリックします

↑ 左側のメニュー一覧から、「会話風ふきだし」をクリックします

「会話吹き出し」の色設定は…

↑ この「会話1」～「会話8」までの背景色で、それぞれカスタマイズしていきます

ただし「会話2」～「会話8」については、デフォルトのままにしておくと、「会話1」の設定がそのまま反映される仕様になってます

初期設定では…

↑ このように、「会話1」～「会話8」まですべて薄目なブルーに設定されてます

今回は参考例として…

↑「会話1」と「会話2」を、それぞれこのように設定してみました

具体的なカラーコードは…

この通りです

プレビュー画面で見ると…

↑ こんな風になりました

つづいて、同じメニュー一覧のなかの…

↑「アイコンの枠線を消す」にチェックを入れることで…

↑ このように、アイコンを囲う丸い枠線を消すことができます

ちなみにそのほかにも…

こんなカスタマイズも可能です

一通り設定ができたら…

↑ 画面上部の　公開　をクリックして、設定を保存しましょう

これで…

この2つのカスタマイズはOKです

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

「会話アイコンに動きをつける」＆「アイコンを大きく表示」

今度は、「AFFINGER5 管理」側でできるカスタマイズ手順を見ていきます🐥

具体的には…

この2つです

↑ WordPress管理画面　＞　AFFINGER5 管理　をクリックします

↑ 左側のメニュー一覧から、「会話・ファビコン等」をクリックします

↑ 画面下部の…

という項目で、それぞれの設定を選択できます

設定できたら、　保存　を忘れずにクリックしましょう

おしまい♪

あずき🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ