吹き出し アイキャッチ画像

AFFINGER ブログ

【AFFINGER6 会話吹き出しの設定と使い方】記事を飽きさせない工夫として必須!

2021年7月31日

ひで

石川県のローカルブロガー 主にグルメを中心として活動中。 活動拠点は金沢市、白山市、野々市になります。 インスタグラムフォロワー1万人越

ひで
AFFINGER6で会話吹き出しを入れたいけど、設定はどうすれば・・・?

 

ブログを使っていく上で会話風の吹き出しを使うというのは定番ともいえる設定になっています

 

会話風に文章をくみたてることが出来る為、飽きさせない記事を作ることが出来るのが最大のメリットです

 

デメリットとしてはアイコンの用意をする必要があるため手間がかかることです

 

AFFINGER6にも会話吹き出しを設定する箇所がございますので使えるようになる解説をしていきたいと思います

 

ひで
会話吹き出しを使えるようになると記事内のクオリティもあがるので本当におすすめ!

 

AFFINGER6 会話吹き出しの設定と使い方について

ひで
吹き出しは左側と
右側に簡単に配置がすることができるよ
ひで

会話吹き出しの設定方法

 

step
1
【AFFINGER 管理】

Affinger6 管理画面

 

step
2
【会話アイコン】から名前の入力と画像をアップロード

吹き出し1

ココがポイント

アイコンのサイズは100×100以上が推奨です

 

基本的な設定は以上になります。次は表示させる方法について解説していきます

 

会話吹き出しの使い方

グーテンベルクのやり方で説明していきます

 

step
1
【ブロック挿入ツールを切り替え】⇒ 【STINGER:会話ふきだし】

吹き出し2

ひで
これだけです

 

会話のショートコードは1~8までありますが、これは設定したアイコンの番号と一致しています

吹き出し3

 

向きを反転させたい場合は【向き】のボタンをONするだけで反対側に表示されます

吹き出し4

 

AFFINGER6 会話吹き出しのカスタマイズについて

ひで
吹き出しの色やアイコンを大きくしたりできますので解説していきます

 

吹き出しの背景色について

 

step
1
【外観】⇒ 【カスタマイズ】

カスタマイズ

 

step
2
【オプション(その他)】⇒ 【会話ふきだし】 ⇒ 色の設定

吹き出し5

ココがポイント

各吹き出し1~8の背景色を設定することができます

 

吹き出しのデザインについて

 

step
1
【外観】⇒ 【カスタマイズ】

カスタマイズ

 

step
2
【オプション(その他)】⇒ 【会話ふきだし】から細かい設定ができます 

 

アイコンに枠線、吹き出しを四角にしたい場合

吹き出し6

 

枠線を付けたい場合

吹き出し7

 

枠線をつけつつも、吹き出しに背景色を入れたい場合

吹き出し8

 

ひで
AFFINGER管理画面よりアイコンのサイズを変えることも可能です

 

step
1
【AFFINGER 管理】

Affinger6 管理画面

 

step
2
【会話アイコン】 ⇒ 【会話アイコンを少し大きく】

吹き出し9

※【会話アイコンを少し動かす】にチェックを入れるとアイコンが動くようになります

 

吹き出しの文字色について

ひで
吹き出しの背景を濃いめの色にした場合、文字が黒色だと見えにくいので色を変える方法を解説していきます

 

step
1
【外観】⇒ 【カスタマイズ】

カスタマイズ

 

step
2
【外観】⇒ 【CSSの追加】 ⇒ CSSのコピペ

 

吹き出し10

 CSS
/*会話吹き出し*/
.st-kaiwa-box p {
color:#fff!important;
}

 

吹き出し内の余白について

吹き出し11

会話吹き出しを作ると余白がでてしまっていたのでこれを削除していきます

 

step
1
【外観】⇒ 【CSSの追加】 ⇒ CSSのコピペ

吹き出し12

 

 CSS
/*会話吹き出し*/
.st-kaiwa-box p {
color:#fff!important;
margin-bottom:0px; /*余白の削除*/
}

余白が綺麗に削除されました

吹き出し13

 

AFFINGER6 会話吹き出しのアイコンの入手方法

ひで
アイコンは無料、有償どちらかを利用してくださいね

ココナラ(有料)

coconala

公式ページより引用

気軽にアイコン制作を注文することができるサイト【coconala

 

ブログで使うアイコンはできるだけオリジナリティを出したいですよね

 

coconalaではアイコン制作をしている方に有償で簡単にお願いをすることができます

 

coconala2

公式ページより引用

 

ジャンルごとに分かれているのも嬉しい点ですね

 

coconala3

公式ページより引用

 

価格は1000円~5000円程と幅広い価格帯で販売されていますので価格とアイコンの雰囲気を見て作成依頼してみてくださいね

 

支払方法はカードやコンビニ払いなど様々な決済方法がありますので安心して決済ができますよ

 

無料会員登録してさっそく注文してみよう!

イラストや(無料)

いらすとや

無料のフリー素材のアイコンとして定番中の定番の【いらすとや】

 

豊富な種類のイラストが用意されており、吹き出しのアイコンで使う方も多くいらっしゃるのではないでしょうか

 

使い勝手の良いイラストが多いのでいざという時に活躍してくれること間違い無いでしょう!

 

会員登録もなくすぐにダウンロードができるのも嬉しい点です

 

いらすとやはこちら

AFFINGER6 会話吹き出しで記事内を充実させよう!

AFFINGER6の会話吹き出し設定について解説していきました

 

設定の難易度は難しくありませんが、アイコンを用意する必要があります

 

細かい設定は自分好みにカスタマイズしていただき使っていただければと思います

 

今回の作業はこれでおわり! お疲れさまでした!

 

この記事も読まれています

  • この記事を書いた人
  • 最新記事

ひで

石川県のローカルブロガー 主にグルメを中心として活動中。 活動拠点は金沢市、白山市、野々市になります。 インスタグラムフォロワー1万人越

-AFFINGER, ブログ