今回はAFFINGER5に用意されている『吹き出しアイコン』ツールのつかい方について紹介します。
ブログの見た目が変わり、記事のアクセントにも最適なので活用していきましょう。
この記事を読むことで
・アイコンのつくり方
・吹き出しの設定方法
・吹き出しのつかい方
が分かります。
アイコンのつくり方
アイコン用に準備する画像
フリー素材でググるとたくさんのサイトが見つかりますが、商用利用は有料だったり、無料でもサイトのリンクやクレジット表記の条件があったり、会員登録しなければならないなどちょっと面倒な素材サイトもあります。
今回紹介するのは私も利用させていただいている中でも、
・商用利用OK
・会員登録不要
・リンクやクレジットの表記不要
という、とても手軽ですが『有料級』の素材を提供してくれるサイトです。
１．いらすとや
https://www.irasutoya.com
ネットだけでなくテレビの中でもよく見かけるイラストです。
人物から動物、建物ほか、幅広いバリエーションがあり、トレンドにも対応したイラストも掲載されています。
ただ、有名で利用者も多いのでブログで個性を出したいときにはちょっと不向きかもしれません。
ファイル形式：PNG
２．ダ鳥獣ギ画
https://chojugiga.com
歴史の時間にならった『鳥獣戯画』をモチーフにした風情のある渋いタッチの中に、ユーモアやトレンドを入れたイラストがたくさん揃っています。
ファイル形式：PNG、JPGなど
３．人物イラスト館
引用：http://jinbutuillust.businesscatalyst.com/index.html
とにかく人物のイラストが欲しい！という方にはぴったりの人物イラストに特化したサイトです。
同じ人物でポーズや表情のバリエーションがあるので、会話用アイコンとして使いやすいですよ。
ファイル形式：JPG
４．Stock Material
素材の種類は少ないですが、丁寧に作られていてカラフルな、可愛らしい素材がそろっています。
女性的なサイトにおすすめです。
ファイル形式：PNG
５．イラストレイン
色使いが綺麗で多彩なジャンルに対応したイラストがたくさん用意されていて、どれもクオリティが高いです。
ファイル形式：PNG
完全オリジナルを求めるなら『ココナラ』（有料）
個人間でスキルの売り買いができるココナラ
などのスキルマーケットで自分好みのイラストレーターさんを見つけて依頼するという方法もあります。
スキルマーケットは個人同士を仲介する役割があるので、SNSを使って個人取引するよりも安全な取引ができます。
出品者によって価格の設定が違いますが、1カット数千円で、表情やポーズを変えて複数枚数依頼すると割安になってくることが多いです。
ツイッターで『ココナラ アイコン』で検索すると出品者の投稿がたくさんあります。
投稿の中には割り引き情報もあるので会員登録したあとは一度チェックしてみましょう。
今ココナラ1000円割引クーポン出てるので実質2000円！
よければこの機会に気軽にご依頼お待ちしております🙌https://t.co/o9w8VCHXy9— 結花 (@tenchannel_Y) June 30, 2020
アイコン用画像の加工
アイコン画像の適正サイズ
アイコンに適正なサイズは、
・左右ともに100px以上の画像
・高解像度ディスプレイに対応する場合は160px以上推奨
注意ポイント
表示される大きさが60px（大きく表示する設定で80px）なので大きなサイズは不要ですが、逆に100px以下になると画像がボヤける場合があります。
アイコンの設定方法
「AFINGER5管理」⇒「会話・ファビコン」をクリックします。
アイコン・ファビコン設定の画面に会話風アイコンの項目が表示されています。
①表示させる名前を入力して②『アップロード』をクリックします。
メディアを追加する画面になるので、『ファイルをアップロード』または『メディアライブラリ』から画像を選択し、画像を挿入します。
アイコンの画像サイズは『会話風アイコン100×100』を選びます。
画像を挿入しても画像は表示されませんが、『保存』をクリックすると画像が反映されます。
アイコンを動かしたり、大きくしたい時はそれぞれチェックを入れてから『保存』をクリックしてください。
これでアイコンの設定は完了です。
AFFINGER5吹き出しの設定方法
次に吹き出しの設定をおこないましょう。
『外観』⇒『カスタマイズ』⇒『オプションカラー』⇒『会話風吹き出し』を順番にクリックします。
アイコン１から８までの会話吹き出しの色をそれぞれ設定できます。
アイコンの枠線を消したり、線のデザインも変更可能jです。
設定が終われば『公開』をクリックして終了しましょう。
吹き出しのつかい方
アイコンと吹き出しの設定が終わったらいよいよ記事に会話アイコンを入れてみましょう。
基本的なつかい方
会話吹きだしにしたいテキストを選択した状態で『タグ』→『会話吹きだし』→会話1から8を選択します。
『会話1』にだけ（r〕で反対向き）とありますが後ほど解説します。
下記のようなショートコードが表示されますが画像は反映されません。
【st-kaiwa1]ここにテキストが入る[/st-kaiwa1】
画像はプレビューで確認します。
プレビューするとこんな感じで表示されます。
反転方法〜（r〕で反対向き）の意味
先ほど『会話1』にだけ（r〕で反対向き）の表示がありました。
ショートコードに『r』を加えるだけで吹き出しアイコンが右側に表示されるようになります。
これでアイコン同士が会話しているようになりますね。
ただ、はじめてのときはこの（r〕で反対向き）の意味がわからないと思います。
ショートコードを使って説明すると、
ショートコードの先頭のst-kaiwa1 に半角スペースとｒを加えて st-kaiwa1 r とすればOKです。
会話吹き出しを9個以上使いたいときは
AFFINGER5では会話吹き出しを8つまで設定可能です。
9個以上つかいたい時には『会話ふきだしプラグイン2』という有料プラグインを導入することでほぼ無制限につかえます。
会話ふきだしプラグイン2とは
『会話ふきだしプラグイン2』は吹き出しキャラを（ほぼ）無限に作成でき、キャラ別に吹き出しの色やカテゴリを設定できます。
引用：https://on-store.net/kaiwahukidasi/
このプラグインはWordPressテーマWING（AFFINGER5及びSTINGER PRO2）ver20191218以上で利用できます。
価格：2,980円（税込）
会話吹き出しプラグイン２のつかい方
プラグインをインストールするとダッシュボードの左側メニューリストに『吹き出し』が追加されます。
引用：https://on-store.net/kaiwahukidasi/
新規追加からどんどん追加していきましょう。
一覧では作成したキャラのサムネイルとショートコードが確認できます。
メモ
サムネイル表示には「テーマ管理」＞「投稿・固定記事」＞投稿一覧にサムネイル・ID・文字数を表示を有効化して下さい。
会話ふきだしプラグイン2の購入方法
会話ふきだしプラグイン2は『STINGER STORE』から購入できます。
まとめ
AFFINGER5の基本機能には８つまで『会話吹き出し』の登録ができるので、通常はこれで充分と思いますが、複数のサイトを運営する場合は有料プラグインでほぼ無制限に拡張することも可能です。
