AFFINGER5

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法

【AFFINGER5】 会話吹き出しの設置方法と カスタマイズ方法今回はAFFINGER5の会話吹き出しの設置方法とカスタマイズ方法を紹介しています!

 

会話吹き出しとはこれのことです。

 

質問者
吹き出し会話の設置方法を教えて
いいよ!
カピパラ
質問者
色とかも変えてみたいな
簡単に出来るから合わせて教えるね!
カピパラ

 

AFFINGER5の他の機能の設定やカスタイマイズ方法はAFFINGER5(WING)のカスタマイズまとめ!スライドショーやヘッダーメニューの設置方法など紹介という記事にまとめてあります。

【AFFINGER5】会話吹き出しの設置方法

会話吹き出しを入れたいところで「タグ」→「会話ふきだし」をクリックします。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法

 

会話1~会話8まであります。

 

この数字は後ほど紹介する画像とリンクします。

 

この様なコードが表示されます。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法2

 

会話1を押すだけだと左側に吹き出しが表示され、st-kaiwa〇の後にrを入れると右側に表示されます。

 




【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法3

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法4


 

 

これで設置は完了です。

 

【AFFINGER5】会話吹き出しのカスタイマイズ方法

大きく分けて3つ紹介していきます。

  • アイコンの設定
  • アイコン名の設定
  • 色の変更
  • 画像の形の変更

順に説明していきます!

 

アイコンの設定

まずは画像の設定方法から紹介していきます。

 

画像とはこれのことです。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法5

 

まず、「AFFINGER5管理」→「会話・ファビコン等」をクリックします。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法6

 

今回はアイコン画像6に新しい物を作っていきます。

 

このアイコン画像〇の数字は会話吹き出しを入れる最の会話〇リンクしています。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法8

 

まず画像をアップロードします。

 

アップロードをクリックするとメディアライブラリが開かれます。

 

アイコンにしたい画像を選択して投稿に挿入をクリック。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法10

もし、新たに画像を入れる際にはファイルをアップロードしてから行います。

 

ポイント

アイコンはイラストやからダウンロードするのもいいですし、オリジナリティを出したいのであればココナラで絵描きさんに書いてもらうのもいいかと思います。

アイコン名の設定

アイコンの設定が終わったら次にアイコン名を入力します。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法11

 

アイコン名とはアイコンの下に表示されるものです。

 

この画像で言うと"質問者"ですね。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法13

 

今回は質問者2にしていきます。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法12

 

ここまで出来たら最後に下の方にある「保存」をクリックして終わりです。

 

色の設定

会話吹き出しでは吹き出しの部分の色を設定できます。

 

「外観」→「カスタイマイズ」をクリックします。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法18

 

「オプションカラー」にある会話風ふきだしをクリックします。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法19

 

ここまで来たらあとは色を決めるだけです。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法20

色の変更の下にあるボーダーデザインタイプ(2px)にチェックを入れると背景の色を変えることが出来ます。

 

アイコンの形の変更

アイコンのカスタイマイズは3つ出来ます。

  • アイコンを動かす
  • サイズの変更
  • アイコンの枠線を消す

 

アイコンを動かすサイズの変更はAFFINGER5管理→会話・ファビコン等から変更できます。

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法22

 

アイコンの枠線は外観→カスタイマイズ→オプションカラー→会話風ふきだしから変更できます。

 

【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法のまとめ

今回はAFFINGER5での会話吹き出しの設置方法とカスタマイズ方法を紹介しました!

 

会話吹き出しは疑問の解決を目的とした記事では冒頭でとても使いやすいと思うので、今までやり方がわからなくて使っていなかった方は是非使ってみてください!

 

では、また次の記事で会いましょう!!

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.