【AFFINGER6】会話吹き出しの設置方法背景色のカスタマイズ方法

2022年3月26日

 

AFFINGERで吹き出し会話ってどうやったらできるの??

 

吹き出し会話機能の作成方法は簡単に作成できるので、この記事を参考にしてみてね

 

 

今回の記事はこんな感じに、AFFFINGERの会話吹き出し機能の作成方法を解説していきます

 

また、吹き出し機能のデザインのカスタマイズ方法なども記載しまうので、ぜひ参考にしてみて下さい。

 

本記事の内容

AFFINGERの会話吹き出し機能の作成方法

会話吹き出し機能のカスタマイズ方法

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

AFFINGER6の会話吹き出し機能の使い方について

 

 

まず初めに、AFFINGERの会話吹き出し機能の使い方について紹介していきます。

 

完成形は冒頭にもあったこんな感じになります。

 

AFFINGERで吹き出し会話ってどうやったらできるの??
吹き出し会話機能の作成方法は簡単に作成できるので、この記事を参考にしてみてね

 

AFFINGERの吹き出し機能の便利なところ

  • 数の画像を使用できる
  • 左右の向きが反転切り替えできる
  • 設定が簡単に行える

 

それでは、各設定方法を順番に解説していきます。

 

AFFINGER6管理画面からアイコン画像を設定する

最初は、会話吹き出しの画像を設定していきましょう。

 

WordPressの管理画面から、「AFFINGER管理」→「会話アイコン」に移動してください。

 

 

会話風アイコン」の項目にて、1〜8までの8種類のアイコン画像の設定を行えます。そちらの項目にアイコン名とアイコン画像を設定しましょう。

 

 

アイコン名は空白にしておいても問題ありません!

 

設定が完了できたら、「Save」を選択して、設定を保存しましょう。

 

 

投稿画面からショートコードで実装する

会話吹き出しの設定が完了したら、次は実際に会話吹き出し機能を使ってみましょう

 

投稿画面より、「タグ」→「会話ふきだし」を選択し、差し込みたい会話番号を選択しましょう。

 

 

 

 

あとは正しく設定が反映されているか、プレビューにて確認してみましょう。

 

ポイント

また、左右反転したい場合には、" r " を加えるだけで、左右反転機能を加わります。

 

 

吹き出しの効果的な使い方

GOOD

吹き出し機能の、効果的な使いかを紹介していきます。

 

吹き出し機能が効果的なポイント

  • 投稿記事冒頭の読者の悩みを代弁する
  • 装飾がなく、メリハリのない記事の箇所
  • 「〇〇してみましょう!」など読者の行動を促すとき

 

投稿記事冒頭の読者の悩みを代弁する

吹き出し機能ってどんなところで使ったらいいの??

 

こんな感じで、記事のテーマとなる疑問を提示する時に使うと効果的に活用できます

 

よくある疑問や悩みを吹き出し機能を使うことで、よりリアルに感じられて、ユーザーにわかりやすいコンテンツになります

 

 

装飾がなく、メリハリのない記事の箇所

投稿する記事が装飾されておらずに、メリハリの無い記事なっている時には、会話吹き出し機能を活用してみましょう

 

表や箇条書きを使っている人はたくさんいるかと思いますが、どうしても無機質なものに…

 

全体のバランスを見ながら吹き出し機能を使ってみて下さい。

 

 

「〇〇してみましょう!」など読者の行動を促すとき

読者のユーザーに何かしらの行動を促したい時には、ぜひ吹き出し機能を活用してみましょう。

 

実際に「やってみてください!」などのアドバイスなどを吹き出しの形で使うのがおすすめです。

 

アフィリエイトののリンクへの行動を促す際にも、相性マルです

 

 

AFFINGER6の会話吹き出し機能のカスタマイズ方法

 

続いて、会話吹き出し機能の各種カスタマイズ方法の紹介をしていきます

 

細かいカスタマイズが行えますので、ぜひ参考にしてみて下さい。

 

アイコンのアニメーションを設定する

アイコンにアニメーション機能を追加する設定を紹介します。アイコン画像の設定した同様のページにて設定することが可能です。

 

AFFINGER管理」→「会話アイコン」のページ下にアニメーション設定項目より、編集可能です。

 

 

設定が完了したら、「保存」にて設定を変更しましょう。

 

背景のカスタマイズ

続いて、吹き出し機能のテキスト背景色のをカスタマイズしていきましょう。

 

WordPress管理画面より「外観」→「カスタマイズ」に移動します。

 

 

オプション(その他)」→「会話ふきだし」より、吹き出しテキストの背景色を変更することができます。

 

 

 

 

 

吹き出し機能のカスタマイズ可能項目

  • 背景色
  • アイコンの枠線
  • ふきだしの角丸
  • ボーダー線の太さ

 

こちらも設定が完了したら、忘れずに「保存」にて設定を変更しましょう。

 

枠線のカスタマイズ

会話ふきだしのデザインをCSSのコードにて編集可能です。

 

CSSにて編集ことで、痒いところにも手が届くように細かくデザインの変更が可能となります。

 

設定項目は「外観」→「カスタマイズ」→「追加CSS」にてコードを貼り付けましょう。

 

 

 

 

基本のベースは以下のコードをコピペでOKですので、配色や枠線等は自分のお好みに変更してみて下さい。

 

 /*吹き出しデザイン*/
.st-kaiwa-hukidashi, .st-kaiwa-hukidashi2 {
background-color: #f9f9f9;
border:solid 2px #cecece;
}
.st-kaiwa-hukidashi:after {
border-color: transparent #f9f9f9 transparent transparent;
}
.st-kaiwa-hukidashi::before {
content: "";
position: absolute;
top: 30px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
margin-top: -13px;
left: -13px;
border-width: 13px 13px 13px 0;
border-color: transparent #cecece transparent transparent;
}
.st-kaiwa-hukidashi2:after {
border-color: transparent transparent transparent #fff;
}
.st-kaiwa-hukidashi2:before {
content: "";
position: absolute;
top: 30px;
right: -13px;
margin-top: -13px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 13px 0 13px 13px;
border-color: transparent transparent transparent #cecece;
}

 

コードの編集が完了したら、「公開」にて設定を保存しましょう。

 

まとめ

 

以上、AFFINGERの会話ふきだし機能の設定方法とカスタマイズの紹介でした。

 

の設定も簡単に行え、活用することで記事の内容にもメリハリがついて、読者のユーザーにも理解しやすいコンテンツになります。

 

文章の流れや全体のバランスを確認しつつ、ぜひ活用してみましょう。

 

最後まで読んでいただきありがとうございます!

 

 

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-,