アフィンガー ワードプレステーマ

【アフィンガー6】会話吹き出しを設定して使ってみよう!

今回は記事に会話吹き出しの設定について、解説します。
会話吹き出しとはまさにこの部分です(笑)
キャラクターアイコンと吹き出しを使って会話調の説明ができます。
設定も難しくないので是非試してみてください。
早速解説を始めてきます!

アフィンガーについて

アフィンガーは洗練されたブログデザインのワードプレステーマです。
色々なテイストのデザインを作成することができます。
また、記事を制作するにあたって豊富な装飾パーツがあり、簡単に実装できます。

SEO(検索エンジン最適化)の設定も豊富で、ブログの収益化のプラスに働きます。

アフィンガーのテーマについて詳しく知りたい方は下記の詳細ページをご覧ください。

アフィンガーテーマについての詳細、販売ページはこちらから>>

会話吹き出しアイコン用の画像を作成しよう

会話吹き出しの際に使う画像を用意する必要があります。

会話吹き出し用のイラストサイズは「100px × 100px」以上の正方形が推奨が推奨されています。

イラストが得意な方は「Photoshop」や「illustrator」、「CLIP STUDIO PAINT」等のソフトを使ってアイコンを作成してみましょう。

イラストなど作成するのが苦手な方は無料で使える顔のイラストサイトがあります。

以下の3つサイトをピックアップしました。
会話吹き出し用のイラストに使えるで活用してみてください。

今回は「いらすとや」のイラスト画像を使って会話吹き出し画像を作成してみましょう。

イラスト画像をダウンロードする場合は、ダウンロードしたい画像にマウスを持っていき、そのまま右クリック、Macでは「別名で画像を保存」、Winでは「名前を付けて画像を保存」を選択して、それぞれ好きな指定の場所に保存してください。

「いらすとや」さんの顔アイコンの画像の大きさは「160px × 160px」になります。
(下記画像は大きさがわかるように仮で周りに枠線をつけています。実際は枠線はついていません。)

アフィンガー6で会話吹き出し用に使用する画像は「100px × 100px」以上の正方形が推奨されているので、このまま使用することが出来ます。

会話吹き出しの設定方法

イラスト画像が出来上がったら、次は会話吹き出しの設定を行いましょう。

「AFFINGER設定」→「AFFINGER設定」をクリックします。

次にAFFINGER設定ページのメニューから「会話アイコン」をクリックしましょう。

「会話アイコン設定」ページにアクセスされます。

アイコン画像1からアイコン画像8まで画像登録フォームがあり、8つのアイコン画像まで登録することができます。

8つ以上のアイコンを使いたいとき

8つ以上のアイコンを使用したい場合は「会話吹き出しプラグイン2」という有料のプラグインをインストールすることで使用することが出来ます。

会話吹き出しプラグイン2の詳細は以下のリンクからアクセス出来ます。

会話吹き出しプラグイン2

「会話アイコン設定」ページの中にある【アイコン画像1(簡易会話A)】のフォームにアイコンにするキャラクターの名前を入力します。

次にアップロードをクリックしましょう。

アップロードした画像を選択します。

今回は若い男性のアイコンを使用しました。

右下にある「投稿に挿入」をクリックします。

すると画像のURLに選択した画像のURLが表示されます。

「Save」ボタンをクリックして保存しましょう。

【アイコン画像1(簡易会話A)】のフォームに登録した画像が表示されます。

今回、会話調にするため、【アイコン画像2(簡易会話B)】のフォームにさきほどと同じように若い女性のアイコンを登録しました。

吹き出し画面を記事へ表示する

アイコンを登録したら、実際に記事に反映してみましょう。

今回は新規で記事を登録して作業を進めます。

ダッシュボードメニューの「投稿」→「新規投稿」を選択し記事の編集画面を表示させます。

段落部分を選択して「+」アイコンをクリックします。

ブロックメニューにSTINGERのブロックグループがあります。
その中にある「STINGER:会話ふきだし」をクリックします。

すると、最初に登録した、若い男性のアイコンが表示されます。

吹き出し部分をクリックすると文字入力ができますので、入力してみましょう。

文字を入力し終わったら、吹き出し以外の部分をクリックして確定します。(周りに青い線が表示されます。)

次に若い女性のアイコンを表示させます。
returnキーを押して、新しく段落を指定します。

右上にある設定(歯車)アイコンをクリックして設定メニューを表示します。

設定メニューの中に「ショートコード設定」というプルダウンメニューがありますので、クリックしてください。
すると、会話ショートコードというセレクトボックスが表示されます。

今回は先ほど、女性アイコンを設定した「会話風アイコン2」を選択します。

登録した若い女性のアイコンでの吹き出しが表示されます。

こちらも同じように、吹き出しに文字を入力してみます。

このような感じで、若い男性と女性のアイコンを使用して吹き出しを作成することができました。

上記の画像の状態だと会話風アイコンという形ではイマイチなので、女性アイコンの吹き出しを反転して右端に移動するよう設定します。
女性アイコンの吹き出しをクリックしてください。(周りに青い枠線が表示されます。)

設定メニューからショートコード設定のプルダウンメニューをクリックします。
その中に「向き」というスライド式のスイッチがあるので、こちらをクリックして「ON」にします。

(ONにすると背景が青くなりスイッチが右側に移動します。)

女性の吹き出しが右側に反転移動されました。
これで会話風な吹き出しをイメージできるかと思います。

その他の設定

アイコンを一回り大きく表示する

会話吹き出しはアイコンを一回り大きくすることが出来ます。

「AFFINGER設定」→「AFFINGER設定」をクリックします。

次にAFFINGER設定ページのメニューから「会話アイコン」をクリックしましょう。

会話アイコン設定ページの下の方に、「会話アイコンを少し大きく」にチェックを入れます。

「Save」ボタンをクリックして保存します。

記事を確認すると、アイコンが一回り大きくなっていることが確認できました。

アイコンに微動の動きを加える

アイコンにプルプルっと微動な動きを加えることもできます。

先ほどのアイコンを大きくする手順と同じく、「AFFINGER設定」→「AFFINGER設定」→「会話アイコン」から会話アイコン設定ページへアクセスします。

会話アイコン設定ページの下の方に、「会話アイコンを少し動かす」にチェックを入れます。

ブログを確認してみましょう。

今回動きを確認してもらえるよう動画を起こしました。
再生してみて動きを確かめてみてください。

先ほどの一回り大きいアイコンの設定を組み合わせて両方にチェックを入れることで、大きいアイコンのまま、動かすことも可能です。

会話吹き出しを設定して使ってみる、まとめ

今回は会話吹き出しの設定について解説しました。

読者の悩みや疑問を会話吹き出しで表示すると、ほのぼのな感じがしますし、ちょっとしたアクセントとなり目を引くので、ワンポイントなところで使用してみることをオススメです。

簡単に設置もできるので、ぜひ利用してみてください。

今回も長文を読んでいただきありがとうございました!

アフィンガーについて

アフィンガーは洗練されたブログデザインのワードプレステーマです。
色々なテイストのデザインを作成することができます。
また、記事を制作するにあたって豊富な装飾パーツがあり、簡単に実装できます。

SEO(検索エンジン最適化)の設定も豊富で、ブログの収益化のプラスに働きます。

アフィンガーのテーマについて詳しく知りたい方は下記の詳細ページをご覧ください。

アフィンガーテーマについての詳細、販売ページはこちらから>>

スポンサーリンク

-アフィンガー, ワードプレステーマ