WordPress

affinger(アフィンガー)で会話吹き出しを入れる方法【図解あり】

 

困ってる人
WordPressでよく見るこんな会話吹き出し入れたい↓↓

会話吹き出し導入

吹き出しを入れる手順が知りたい、、
困っている人

こうした悩みを解決します!

 

本記事の内容

  1. affinger5(WordPress)で吹き出しを入れる手順
  2. 会話吹き出しの設定方法

 

本記事を書いた人

webマーケティング会社(上場企業)で働くチーズケーキ好きなサラリーマン

 

それでは本題に入っていきます

 

▽吹き出しを反対(右)に設置したい方はこちら▽

こちらもCHECK

Talking
【簡単】affinger5(アフィンガー)で会話吹き出しを反対にする方法

困ってる人会話吹き出しを反対にする方法が知りたい、、    r ] で反対向きの意味が分からない、、困っている人   こうした悩みを解決します   本記事の内容 affi ...

続きを見る

 

[toc]

 

affinger5(アフィンガー)会話吹き出しを入れる手順

 

結論:「 タグ > 会話吹き出し 」を選択する

 

たったこれだけになります
3秒で終わる手順を解説します

 

手順①:タグ > 会話吹き出しを選択

手順①

 

投稿画面 > タグ > 会話吹き出し > 会話1

 

この手順でクリックします

 

手順②:コードの間に文章入力

吹き出し手順②‘

 

コードとコードの間に表示させたい文章を入力します

 html
▽コピペ可の実際のコード▽
 
[st-kaiwa1]ここに文章を入れる[/st-kaiwa1]

 

完成

完成図

 

たったこれだけでOK!

 

アイコンはNo.設定によって表示が変わります

 

どうやってアイコンの種類かえるの?
残念な人

 

続いてアイコンを設定する方法について解説していきます

 

affinger5(アフィンガー)会話アイコン設定方法

 

アイコン設定は以下の手順でOKです

 

設定方法

  1. 吹き出しの名前を決める
  2. アイコンとなる画像をアップロード

 

アイコンは最大8個まで登録することができます

 

1つずつ解説していきます
焦る人

 

設定方法①:設定画面を表示する

会話アイコン設定①

 

WordPress管理画面 > AFFINGER5管理 > 会話・ファビコン等

 

この手順で設定画面を開きます

 

設定方法②:アイコン名を設定する

会話アイコン設定③

 

アイコン名はそのまま表示名になるので、注意して名前をいれましょう

 

アイコン名=表示される名前

 

※ただし何度でも変更できるので考えすぎる必要はありません

 

設定方法③:画像のアップロード

会話アイコン設定④

 

画像はアップロードをクリックすれば自動でフォルダが開きます

 

設定方法④:画像情報の登録

i)代替えテキスト

会話アイコン設定4

 

その画像が何なのかわかる代替えテキストを設定しましょう

※代替えテキスト=エラー時表示される

 

ii)サイズ

会話アイコン設定⑤

 

サイズを選択し会話風アイコン(100×100)をクリック

※他のサイズでも同様に登録することはできます

 

設定方法④:吹き出し効果の選択

会話アイコン設定⑥

最後に吹き出しの効果として下記二つの選択ができます

 

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

 

i)アイコンを動かす

 

maki
←ちょっと動きます

 

ii)アイコンを少し大きく

小さいアイコン比較2

大きい

アイコン比較

比較すると少しだけ大きくなっているのが分かりますね

 

設定方法⑤:保存して完了

会話アイコン設定③

 

保存を押さないと全部パーです

 

これで会話風アイコンの設定は完了です。

まとめ:affinger5(アフィンガー)で会話吹き出しを使ってみよう

 

いかがでしたでしょうか
会話吹き出しを入れるには以下の手順で行えばOKです

 

アイコン設定
WordPress管理画面 > AFFINGER5管理 > 会話・ファビコン等

吹き出し挿入
投稿画面 > タグ > 会話吹き出し > 会話1

 

やってみよう
焦る人

 

会話吹き出しを使うと記事の読みやすさや親しみやすさが生まれるのでぜひ活用してみてください!

 

ばいばい

-WordPress