今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「会話吹き出し」の色やデザイン
をカスタマイズする手順
をご紹介していきたいと思います
まず「会話吹き出し」とは…
↑ こちらのこと
で、「WING（AFFINGER5）」のこの「会話吹き出し」は…
- 吹き出しの「網掛け」の色を変える！
- アイコンの「丸い枠線」を消す！
- アイコンに動きをつける！
- アイコンを少し大きく表示する！
こういったカスタマイズが可能です
具体的には…
- 「網掛けの色変更」＆「枠線を消す」 → カスタマイズ設定
- 「アイコンに動き」＆「大きく表示」 → AFFINGER5 管理
にて、それぞれ行っていきます
ちなみに、この会話吹き出しの基本的な使い方と「アイコン登録」の手順は ↓ をどうぞ♪
-
-
AFFINGER5で「会話吹き出し」を使おう。会話アイコンの登録と、記事へ入れる手順【WordPressブログ】
続きを見る
会話吹き出しを「反対向き」にする手順は ↓ から♪
-
-
AFFINGER5の「会話吹き出し」を反対向きにする方法。 r] ←これの意味を優しく解説
続きを見る
それではさっそく見ていきましょー🐥
当ブログのWordPress環境
- 使用してるテーマ：WING（AFFINGER5）
- 使用してるエディタ：旧エディタ（クラシックエディタ）
- 使用してるプラグイン：↓ の記事ですべて公開してます
この記事を書いた人
Contents
【会話吹き出し編】AFFINGER5における「色設定」＆「デザイン設定」のカスタマイズ手順
「網掛けの色変更」＆「丸い枠線を消す」
まずは、「カスタマイズ設定」にて行える…
- 会話吹き出しの「網掛け」の色変更
- アイコンの丸い枠線を消す
この2つのカスタマイズ手順を見ていきます🐥
まずは、カスタマイズ画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ 左側のメニュー一覧から、「オプションカラー」をクリックします
↑ 左側のメニュー一覧から、「会話風ふきだし」をクリックします
「会話吹き出し」の色設定は…
↑ この「会話1」～「会話8」までの背景色で、それぞれカスタマイズしていきます
ただし「会話2」～「会話8」については、デフォルトのままにしておくと、「会話1」の設定がそのまま反映される仕様になってます
初期設定では…
↑ このように、「会話1」～「会話8」まですべて薄目なブルーに設定されてます
今回は参考例として…
↑「会話1」と「会話2」を、それぞれこのように設定してみました
具体的なカラーコードは…
- 薄いオレンジ ＝ #fff8e8
- 薄いブルー ＝ #f4fbff
この通りです
プレビュー画面で見ると…
↑ こんな風になりました
つづいて、同じメニュー一覧のなかの…
↑「アイコンの枠線を消す」にチェックを入れることで…
↑ このように、アイコンを囲う丸い枠線を消すことができます
ちなみにそのほかにも…
- 「ふきだしを角丸にしない」 → 吹き出しの四隅が四角くなる！
- 「ボーダーデザインタイプに変更」 → 吹き出しの「枠線」と「背景全体」で別々にカラーを指定！
こんなカスタマイズも可能です
一通り設定ができたら…
↑ 画面上部の 公開 をクリックして、設定を保存しましょう
これで…
- 会話吹き出しの「網掛け」の色変更
- アイコンの丸い枠線を消す
この2つのカスタマイズはOKです
「会話アイコンに動きをつける」＆「アイコンを大きく表示」
今度は、「AFFINGER5 管理」側でできるカスタマイズ手順を見ていきます🐥
具体的には…
- 会話アイコンに動きをつける！
- 会話アイコンを少し大きく表示する！
この2つです
↑ WordPress管理画面 ＞ AFFINGER5 管理 をクリックします
↑ 左側のメニュー一覧から、「会話・ファビコン等」をクリックします
↑ 画面下部の…
- 会話風アイコンを少し動かす
- 会話風アイコンを少し大きく
という項目で、それぞれの設定を選択できます
設定できたら、 保存 を忘れずにクリックしましょう
これで、「会話吹き出しのカスタマイズ」はOKです
お疲れさまでした♪
あずき🐥
この記事を書いた人