こんにちは、
氷河期世代クリエイターのYOHEIです。
今回はワードプレスブログの初心者向けに、テーマAFFINGER5の「会話ふきだし」機能の使い方を紹介します。
会話ふきだし機能はどうすれば使えるのかな？
手っ取り早く使い方を知りたいな。
本記事では、こういった悩みの解決に役立つAFFINGER5「会話ふきだし」機能の使い方を紹介します。
本記事の内容
もくじ
1. AFFINGER5の会話ふきだし機能とは？
2. AFFINGER5の「会話ふきだし」使い方【ワードプレスブログ】
3. まとめ：会話ふきだし機能を使うと、記事の表現を高めて読んでもらいやすくなる
本記事の信頼性
この記事を書いている私は、広告・デザイン業界歴20年ほどです。
ワードプレスブログ初心者の方に、本ブログで実際に使っているテーマAFFINGER5の「会話ふきだし」機能をできるだけわかりやすく紹介したいと思います。
（・o・）/
では詳しく見ていきましょう！
1. AFFINGER5（アフィンガーファイブ）の「会話ふきだし」機能とは？
結論：会話ふきだし機能は、記事の表現を高めて読者に読んでもらいやすくする表現方法です
話しているような雰囲気で伝えることができるので、より読者に響きます。さらに任意のアイコン画像を使用できるので、サイトのオリジナルキャラクターとしてブランディングにも活かせ、覚えてもらいやすくなります。
使い方の前に、AFFINGER5の「会話ふきだし」機能のできることを紹介します。
AFFINGER5の会話ふきだし機能のできること
● ふきだしのアイコン（イラスト・写真）を任意に設定できる
● ふきだしとアイコンの設定は8個まで可能（プラグインで追加可能）
● ふきだしの色を任意の色に変えれる
● アイコンに動きをつけれる
など
ざっとこんなところです。
会話ふきだし機能は記事の質を高めたりサイトのブランディングに役立つので、記事に取り入れることをおすすめします。
では実際に使い方をみていきましょう！
2. AFFINGER5の「会話ふきだし」使い方【ワードプレスブログ】
使い方はたったの3ステップです
Step1. アイコンの設定
Step2. 記事に会話ふきだしタグを挿入
Step3. ふきだしの向きを決める
では詳しく見てみましょう。
Step1. アイコンの設定（画像・名称）
では初めに会話ふきだしのアイコン画像とアイコン名を設定します。
ワードプレス管理画面メニュー「AFFINGER5 管理」を開き、AFFINGER5 管理画面メニュー「会話・ファビコン等」をクリックし設定画面を開きます。
アイコン名を入力し、アイコンに使用する画像をアップロードします。
アップロードする画像のサイズは100px以上が推奨です。形は正方形が推奨です。
大きすぎるとページが重くなるので注意が必要ですが、100px以下だと画像や表示の方法により画質がきたなく見える可能性があります。
アイコンの画像がない方は、フリー素材か自作しましょう。
●フリー素材をこちらの記事で紹介しています。ご覧ください。
-
-
無料あり!ブログで使える写真素材の探し方【あなたのサイトを魅力的に】
こんにちは、 氷河期世代クリエイターのYOHEIです。 初めてホームページやブログを作る時に文字要素だけだと、見た目がパッとしない事に気づくと思います。 そこで、サイトをより魅力的で華やかにするために ...
続きを見る
●手書きのアイキャッチの作り方をこちらの記事で紹介しています。ご覧ください。
-
-
ブログの手描きアイキャッチ画像作り方！【無料で簡単にできる】
こんにちは、 氷河期世代クリエイターのYOHEIです。 今回の記事では、このブログで使用している手描きイラストのアイキャッチ・サムネの作り方を紹介したいと思います。 ブログのアイキャッチやサムネを用意 ...
続きを見る
●顔アイコン素材が無料で作れるサイト（サービスを利用する場合は、サイトの利用規約を確認してください）
アイコンを動かして表示する場合は、「会話風アイコンを少し動かす」にチェックを入れます。
アイコンが大きく膨らんだり小さくなったりする動作を繰り返します。動きがあると、より目を引くのでおすすめす。（本サイトもこの設定で使用しています）
※AFFINGER5のバージョンにより「会話風アイコンを少し動かす」チェックボックスのある場所が画面と異なります。最新AFFINGER5のバージョンでは「会話風アイコンを少し大きく」のチェックボックスが追加されています。また有料プラグインで使用できるアイコンの数を増やすことができます。
最後に「保存」をクリック。
次にアイコンの枠線の有無や、ふきだしのカラーを設定します。
ワードプレス管理画面メニュー「外観」→「カスタマイズ」を開きます。
カスタマイズ画面メニューの「オプションカラー」→「会話風ふきだし」をクリック。ふきだしのカラー設定画面が開きます。
●ふきだしの色は、先ほど設定したアイコン画像1～8と会話1～8の背景色が対応しています。任意のカラーを設定します。
●アイコンの枠線を消す：アイコンを囲んでいる円の枠線が非表示になります。
●ふきだしを角丸にしない：ふきだしの四隅が直角になります。
●ボーダーデザインタイプ（2px）：ふきだしが囲み罫になります。会話1～8のボーダー色は共通になります。
設定が完了したら「公開」をクリック。
アイコンの設定は以上で完了です。
Step2. 記事に会話ふきだしタグを挿入
では、設定したアイコンを記事に挿入してみましょう。
※投稿画面の編集モードは、プラグイン「Classic Editor」を使用したものです。
ワードプレス投稿編集ページの「タグ」→「会話ふきだし」→「会話1～8」を挿入します。
［st-kaiwa1］［/st-kaiwa1］のタグが挿入されます。
開始タグ［st-kaiwa1］と終了タグ［/st-kaiwa1］の間にふきだしのコピーを入力します。
例えば、
［st-kaiwa1］会話1アイコンだワン！［/st-kaiwa1］
と入力すると
のように表示されます。
タグの挿入は以上で完了です。
Step3. ふきだしの向きをきめる
最後にふきだしの向きを反対側にする方法を紹介します。
作成した会話1アイコンの下に、会話2アイコンを挿入します。
↓
このままだと会話1アイコンと会話2アイコンが会話しているように見えませんので、会話2アイコンを逆向きにします。
会話2アイコンの開始タグの最後に「半角スペース」と小文字の「 r 」を入力します。
［st-kaiwa2］会話2アイコンです！［/st-kaiwa2］
→［st-kaiwa2 r］会話2アイコンです！［/st-kaiwa2］
「半角スペース」と小文字の「 r 」を入力されたタグは、逆側の向きに表示されます。
以上でタグの記事挿入は完了です。
一度登録したアイコンは記事にタグを挿入するだけなので、とても簡単に使えるようになります。
記事の質を簡単に高めることができるので、おすすめの機能です！
AFFINGER5はこういった役立つ機能が満載のワードプレステーマです。
持っていなくて興味のある方はこちらの記事をご覧ください。
-
-
初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】
こんにちは、 氷河期世代クリエイターのYOHEIです。 前回にひきつづき、 初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】です。 （全9回に分けて解説しています） 今回は、前 ...
続きを見る
3. まとめ：会話ふきだし機能を使うと、記事の表現を高めて読んでもらいやすくなる！
今回はワードプレスブログテーマAFFINGER5の「会話ふきだし」機能を紹介させていただきました。
「会話ふきだし」機能を使うと、読者に記事を読んでもらいやすくなり、記事の表現に変化を持たすことができます。
良質な記事にするためにも、使ったことがない方は試してみることをおすすめします！
今回の記事は以上です。
最後に今回の内容をおさらいしましょう！
Do it! ではでは。
（・o・）/
《人気関連記事》初心者できた!ワードプレスブログ始め方Step9【アフィリエイト始め方編】