affinger-customize-speech-balloon-20200317_ec

WordPress

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



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

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

をご紹介していきたいと思います

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

affinger-customize-speech-balloon-20200316_1-07

↑ こちらのこと

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

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

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

具体的には…

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

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

やり方も超簡単!

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

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

続きを見る

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

affinger-speech-balloon-right-20200316_ec
AFFINGER5の「会話吹き出し」を反対向きにする方法。 r] ←これの意味を優しく解説

続きを見る

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

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

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

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

pc-work-202001_01

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

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

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

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

affinger-customize-speech-balloon-20200316_1-01

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

affinger-customize-speech-balloon-20200316_1-02

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

affinger-customize-speech-balloon-20200316_1-03

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

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

affinger-customize-speech-balloon-20200316_1-04

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

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

初期設定では…

affinger-customize-speech-balloon-20200316_1-05

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

今回は参考例として…

affinger-customize-speech-balloon-20200316_1-06

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

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

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

この通りです

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

affinger-customize-speech-balloon-20200316_1-07

↑ こんな風になりました

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

affinger-customize-speech-balloon-20200316_1-08

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

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

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

ちなみにそのほかにも…

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

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

一通り設定ができたら…

affinger-customize-speech-balloon-20200316_1-09

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

これで…

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

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

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

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

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

pc-work-202001_02

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

具体的には…

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

この2つです

affinger-customize-speech-balloon-20200317_2-01

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

affinger-customize-speech-balloon-20200317_2-02

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

affinger-customize-speech-balloon-20200317_2-03

↑ 画面下部の…

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

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

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

これで、「会話吹き出しのカスタマイズ」はOKです

お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.