ワードプレス

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

AFFINGER5_会話吹き出しのカスタマイズ_アイキャッチ



あずきです🐥

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

「会話吹き出し」の
色やデザインをカスタマイズする手順

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

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

AFFINGER5_会話吹き出しのカスタマイズ_top-01

↑ こちらのこと

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

  • 吹き出しの「網掛け」の色を変える!
  • アイコンの「丸い枠線」を消す!
  • アイコンに動きをつける!
  • アイコンを少し大きく表示する!

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

具体的には…

  • 「網掛けの色変更」&「枠線を消す」 → カスタマイズ設定
  • 「アイコンに動き」&「大きく表示」 → AFFINGER5 管理

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

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

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

続きを見る

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

AFFINGER5_会話吹き出しを反対向きにする手順_アイキャッチ
AFFINGER5の「会話吹き出し」を反対向きにする方法【 r] ←これの入力方法をわかりやすく解説】

続きを見る

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

このブログのWordPress環境

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

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

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

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

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

ブログガイド_見出し_01

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

  • 会話吹き出しの「網掛け」の色変更
  • アイコンの丸い枠線を消す

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

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

AFFINGER5_会話吹き出しのカスタマイズ_1-01

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

AFFINGER5_会話吹き出しのカスタマイズ_1-02

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

AFFINGER5_会話吹き出しのカスタマイズ_1-03

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

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

AFFINGER5_会話吹き出しのカスタマイズ_1-04

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

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

初期設定では…

AFFINGER5_会話吹き出しのカスタマイズ_1-05

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

今回は参考例として…

AFFINGER5_会話吹き出しのカスタマイズ_1-06

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

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

  • 薄いオレンジ = #fff8e8
  • 薄いブルー = #f4fbff

この通りです

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

AFFINGER5_会話吹き出しのカスタマイズ_1-07

↑ こんな風になりました

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

AFFINGER5_会話吹き出しのカスタマイズ_1-08

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

この会話吹き出しはサンプルだよ

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

ちなみにそのほかにも…

  • 「ふきだしを角丸にしない」 → 吹き出しの四隅が四角くなる!
  • 「ボーダーデザインタイプに変更」 → 吹き出しの「枠線」と「背景全体」で別々にカラーを指定!

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

一通り設定ができたら…

AFFINGER5_会話吹き出しのカスタマイズ_1-09

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

これで…

  • 会話吹き出しの「網掛け」の色変更
  • アイコンの丸い枠線を消す

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

次は、会話アイコンを動かしたりしてみるよ!

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

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

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

ブログガイド_見出し_02

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

具体的には…

  • 会話アイコンに動きをつける!
  • 会話アイコンを少し大きく表示する!

この2つです

AFFINGER5_会話吹き出しのカスタマイズ_2-01

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

AFFINGER5_会話吹き出しのカスタマイズ_2-02

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

AFFINGER5_会話吹き出しのカスタマイズ_2-03

↑ 画面下部の…

  • 会話風アイコンを少し動かす
  • 会話風アイコンを少し大きく

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

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

おしまい♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

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

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。