こんにちは！まっきーです。
本記事ではAFFINGER 5での「会話風吹き出し」について解説します。
こんな風に動かしたり、枠線を消したりする設定を解説します！
本記事を読んでわかること
- 会話風ふきだしの設定方法
- 会話風ふきだしの使い方
- カスタマイズ方法
AFFINGER 5の吹き出しは、8つまで登録できてカスタマイズも簡単にできます！
クラシックエディタ、ブロックエディタ両方のバージョンで解説します
会話風ふきだしの設定方法
WordPressの管理画面から、「AFFINGER5管理」→「会話・ファビコン等」へ進む。
アイコン登録画面が出てきます。
アイコンは全部で8つまで登録することができます！
下記の2つを設定するだけです。
- アイコン名
- 画像のアップロード
※100px以上の正方形画像が推奨されています。
この時点では画像はまだ表示されていません。
最後に、ページの下側にある「保存」を押すと画像が表示されます。これで設定完了です！！！
会話風ふきだしの使い方
次は実際に会話風ふきだしを使ってみましょう！
クラシックエディタの場合
「タグ」→「会話ふきだし」→「会話〇」を選択。
クリックすると下記のように[st-kaiwa〇][/st-kaiwa〇]と表示されます。
この間に表示したい文字を打てば完成です。どうなっているか確認するには「プレビュー」をしてみてください。
また、右側にアイコンを表示させたい場合は、下記のようにrを付け加えるだけです！
[st-kaiwa〇 r][/st-kaiwa〇]
ブロックエディタの場合
ブロックを追加する際に「会話ふきだし」を選択すると、アイコン画像1に設定した写真で吹き出しが出てきます。
他のアイコン画像を使用したい場合は、右側の設定で簡単に変更できます。
向きも1クリックで変更可能です！（アイコン画像が右側にきます）
個人的には、こっちの方が簡単で好きです。
AFFINGER 5会話風ふきだしカスタマイズ手順
次に、カスタマイズする方法を解説していきます。AFFINGER 5では、吹き出しに様々な手を加えることができます。今回は以下の3つの方法を解説します。
吹き出しの背景色を変える
アイコンの「丸い枠線」を消す
アイコンに動きをつける
アイコンを少し大きく表示する
吹き出しの背景色を変える、アイコンの「丸い枠線」を消すはオプションで設定。
アイコンに動きをつける、アイコンを大きく表示するはAFFINGER 5管理画面で設定します
吹き出しの背景色を変える、アイコンの「丸い枠線」を消す
こちらはオプションで設定していきます。
WordPressのホーム画面から「外観」→「カスタマイズ」→「オプションカラー＋」→「会話風ふきだし」へ進むと以下のような画面が出てくると思います。
ここでふきだしの背景色や枠線を消すことができます。下のような感じ。
自分の好みのものに設定できたら、忘れずに「公開」を押してくださいね！
アイコンに動きをつける、アイコンを大きく表示する
こちらの設定はAFFINGER 5管理画面からです。はじめに設定した「会話・ファビコン等」をクリックし、画面の一番下に移動してください。
✔を入れ保存をクリックすれば、動きをつけたり、大きくできたりします！
以上が会話風吹き出しの設定方法です。
こんな簡単に設定できてしまうなんてAFFINGER 5最強ですね。
他の基本的な機能等も随時更新していますので参考にしてみてください！
