あずきです🐥
このブログでも愛用中のWordPressテーマ、「WING（AFFINGER5）」における…
「会話吹き出し」の
色やデザインをカスタマイズする手順
について、初心者さん向けに1から解説していきます（簡単です♪）
まず「会話吹き出し」とは…
↑ こちらのこと
で、「WING（AFFINGER5）」のこの「会話吹き出し」は…
- 吹き出しの「網掛け」の色を変える！
- アイコンの「丸い枠線」を消す！
- アイコンに動きをつける！
- アイコンを少し大きく表示する！
こういったカスタマイズが可能です
具体的には…
- 「網掛けの色変更」＆「枠線を消す」 → カスタマイズ設定
- 「アイコンに動き」＆「大きく表示」 → AFFINGER5 管理
にて、それぞれ行っていきます
ちなみに、この会話吹き出しの基本的な使い方と「アイコン登録」の手順は ↓ をどうぞ♪
-
AFFINGER5で「会話吹き出し」を使おう。会話アイコンの登録と、記事へ入れる手順【WordPressブログ】
続きを見る
会話吹き出しを「反対向き」にする手順は ↓ から♪
-
AFFINGER5の「会話吹き出し」を反対向きにする方法【 r] ←これの入力方法をわかりやすく解説】
続きを見る
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事にて公開しています
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
目次
【会話吹き出し編】AFFINGER5における「色設定」＆「デザイン設定」のカスタマイズ手順
「網掛けの色変更」＆「丸い枠線を消す」
まずは、「カスタマイズ設定」にて行える…
- 会話吹き出しの「網掛け」の色変更
- アイコンの丸い枠線を消す
この2つのカスタマイズ手順を見ていきます🐥
まずは、カスタマイズ画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ 左側のメニュー一覧から、「オプションカラー」をクリックします
↑ 左側のメニュー一覧から、「会話風ふきだし」をクリックします
「会話吹き出し」の色設定は…
↑ この「会話1」～「会話8」までの背景色で、それぞれカスタマイズしていきます
ただし「会話2」～「会話8」については、デフォルトのままにしておくと、「会話1」の設定がそのまま反映される仕様になってます
初期設定では…
↑ このように、「会話1」～「会話8」まですべて薄目なブルーに設定されてます
今回は参考例として…
↑「会話1」と「会話2」を、それぞれこのように設定してみました
具体的なカラーコードは…
- 薄いオレンジ ＝ #fff8e8
- 薄いブルー ＝ #f4fbff
この通りです
プレビュー画面で見ると…
↑ こんな風になりました
つづいて、同じメニュー一覧のなかの…
↑「アイコンの枠線を消す」にチェックを入れることで…
↑ このように、アイコンを囲う丸い枠線を消すことができます
ちなみにそのほかにも…
- 「ふきだしを角丸にしない」 → 吹き出しの四隅が四角くなる！
- 「ボーダーデザインタイプに変更」 → 吹き出しの「枠線」と「背景全体」で別々にカラーを指定！
こんなカスタマイズも可能です
一通り設定ができたら…
↑ 画面上部の 公開 をクリックして、設定を保存しましょう
これで…
- 会話吹き出しの「網掛け」の色変更
- アイコンの丸い枠線を消す
この2つのカスタマイズはOKです
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
「会話アイコンに動きをつける」＆「アイコンを大きく表示」
今度は、「AFFINGER5 管理」側でできるカスタマイズ手順を見ていきます🐥
具体的には…
- 会話アイコンに動きをつける！
- 会話アイコンを少し大きく表示する！
この2つです
↑ WordPress管理画面 ＞ AFFINGER5 管理 をクリックします
↑ 左側のメニュー一覧から、「会話・ファビコン等」をクリックします
↑ 画面下部の…
- 会話風アイコンを少し動かす
- 会話風アイコンを少し大きく
という項目で、それぞれの設定を選択できます
設定できたら、 保存 を忘れずにクリックしましょう
おしまい♪
あずき🐥
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^