AFFINGER5

アフィンガー5の会話ふきだしの使い方・カスタマイズ【右側表示】

アフィンガー5で記事を書き始めたのですが、みんながよく使う会話ふきだしの使い方が分からないのですが、どう設定すれば良いのでしょう?出来ればオリジナリティを出したいのでカスタマイズのやり方も教えてください。

といった悩みにお答えします。

 本記事の内容

  • アフィンガー5の会話ふきだしを使うべき理由
  • アフィンガー5の会話ふきだしの設定と使い方
  • アフィンガー5の会話吹き出しを右側(逆向き)にする方法
  • アフィンガー5の会話ふきだしをオシャレにカスタマイズ

 本記事の信頼性


Ryota(@ryotablogger

アフィンガー5の標準機能として備わっている会話ふきだしを使うとオシャレで読みやすく独自性がUPします。

とはいえ、「会話ふきだしを使うといいことがあるの?」「どう設定したらいいの?」と思っている方は多いのではないでしょうか?

今回はアフィンガー5の会話ふきだしの設定と使い方を解説して行きます。

本記事を読むことにより、アフィンガー5の会話ふきだしをマスターすることができます。

そうすることで、読まれるブログになり、滞在時間も上がる、また、独自性もUPするのでどちらにおいても、SEO対策に効果的です。

会話ふきだしを使うことで見た目もオシャレになるので設定して使いこなしてみましょう!また、当ブログで使用している「AFFINGER5」については、以下の記事で詳しく解説しています。
りょーた
【限定特典付き】AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説

続きを見る

アフィンガー5の会話ふきだしを使うべき理由

アフィンガーの会話ふきだしを使うべき理由は以下の通りです。

  • 漫画感覚で読める
  • 滞在時間が上がる
  • SEOで評価される

上記のような感じですね。

アフィンガーの会話ふきだしを使うことにより、漫画感覚で読めるので離脱率が減り、必然的に滞在時間が長くなります。

また、独自性としてもSEO面でも効果的なのでデメリットはありません。

マイナス要素はないので、まだ使っていない方はこの機会に設定しておきましょう!次は設定と使い方を解説していきます!
りょーた

アフィンガー5の会話ふきだしの設定と使い方

アフィンガーで会話ふきだしを使うには、以下の3つの手順だけなのでとても簡単です。

  1. 会話ふきだしのアイコンを準備
  2. 会話ふきだしのアイコンを設定
  3. 会話ふきだしのショートコードを挿入

1つずつ詳しく解説していきます。

ここではとりあえず使えるようにしていきます!
りょーた

手順①:会話ふきだしのアイコンを準備

まずは、会話ふきだしだしで使うためのアイコンを準備していきましょう。

  1. 無料画像を使う
  2. 無料で自作する
  3. 有料で自作する

1つずつ紹介していきます。

 無料画像を使う

その他のフリー画像サイトは、【厳選】ブログ映えするおすすめフリー画像サイト8選+2をご覧ください。

 無料で自作する

 有料で自作する

ココナラについては、ココナラで世界に1つだけのブログアイコンを作ろう!【個性の主張】で詳しく解説しているのでチェックしてみてください。

ブログアイコンは覚えてもらいやすいので自作するのがおすすめですよ!
りょーた

手順②:会話ふきだしのアイコンを設定

アイコンの準備が出来たら、次は、会話ふきだしに表示させるようにアイコンを設定していきます。

まずは、「AFFINGER5 管理」「会話・ファビコン等」をクリックしましょう。

次に、アイコン名を入力し、「画像のURL」または「アップロード」からアイコンにする画像を選択します。

ここに注意

100px以上の正方形の画像が推奨されているのでアップロードする際には注意してください。

長方形や楕円形といった画像の形をアップロードしてしまうと、きれいに画像が表示されません。

アイコン名と画像の設定が終わったら、「会話風アイコンを少し動かす」「会話風アイコンを少し大きく」のどちらか、または両方にチェックを入れ、最後に「保存」をクリックして完了です。

ちなみにアイコンは8個まで設定が可能です!
りょーた

8個じゃ足りないという方は、アフィンガー専用(有料)の「会話ふきだしプラグイン」を導入すればほぼ無限に会話ふきだしを作成できます。

手順③:会話ふきだしのショートコードを挿入

最後に、実際に会話ふきだしを記事中に表示させていきます。

今回は、新規記事に会話ふきだしを表示させていきます。

「投稿ページ」「新規追加」をクリックしましょう。

「タグ」「会話ふきだし」表示したい「会話」の番号をクリックしてください。

以下のコードが表示されれば完了です。

 html
[st-kaiwa1][/st-kaiwa1]

最後に、表示されたコードの間に文章を挿入すれば、会話ふきだしの完成です。

お疲れ様です!これで会話ふきだしの基本的な使い方の解説は以上です!
りょーた

アフィンガー5の会話吹き出しを右側(逆向き)にする方法

アフィンガー5の会話ふきだしを右側(逆向き)にする方法は、公式サイトに書いてありますが、かなり間違えやすいのでやり方を解説します。

「半角スペース」と「r」で右側に表示

会話ふきだしを右側(逆向き)にするには、以下のように「半角スペース」と「r」で逆向きにすることができます。

 shortcode
[st-kaiwa1 r]任意の文字列[/st-kaiwa1]
逆向きも結構使うので、覚えておきましょう!
りょーた

会話吹き出しが右側に表示されない場合

会話吹き出しが右側(逆向き)に表示できない場合には、以下を確認しましょう。

よくありがちなミスとして、以下のことが考えられます。

  • 全角スペースを入れる
  • 半角スペースを入れ忘れる

会話吹き出しが逆向きにならないといった方は上記を確認してみてください。

上手く逆向きにならなかったら見直してみましょう!
りょーた

アフィンガー5の会話ふきだしをオシャレにカスタマイズ

最後に、会話ふきだしをオシャレにカスタマイズしていきましょう。

設定項目は以下の4つです。

  1. 背景色
  2. 枠線の表示・非表示
  3. 吹き出しの角(丸・四角)
  4. 枠線の太さ(ボーダーデザイン)

1つずつ解説していきます。

「外観」→「カスタマイズ」→「[+]オプションカラー」「会話吹き出し」で設定場所に移動できます。

ちなみに僕はシンプルなデザインが良かったので、「背景色」「枠線の表示・非表示」を変更しているよ。
りょーた

その①:背景色

1つ目は、「背景色」です。

背景色を一括・個別に変更することができます。

全ての会話吹き出しに一括で背景色を設定する場合、「全体又は会話1の背景色」で設定すればOKです。

また個別に変更したい場合には「会話2~8の背景色」を設定すれば「手順①:『会話吹き出し』のアイコンを設定」で設定したアイコン番号ごとの背景色を変更することができます。

僕は「全体又は会話1の背景色」のみ設定しているよ!ちなみにカラーコードは「#f4fbff」だから同じにしたい方はコピペして使ってね!
りょーた

その②:枠線の表示・非表示

2つ目は、「枠線の表示・非表示」です。

アイコンの枠線を表示、または非表示にすることができます。

以下はカスタマイズ例です。

 枠線を表示

 枠線を非表示

その③:吹き出しの角(丸・四角)

カスタマイズ3つ目は、「吹き出しの角の形変更」です。

丸くすればやわらかく、四角にすれば固いイメージとなります。

以下はカスタマイズ例です。

 吹き出しの角を丸くする

 吹き出しの角を四角にする

その④:枠線の太さ(ボーダーデザイン)

カスタマイズ4つ目は、「枠線の太さ」です。

 枠線の太さを普通(2px)にする

 吹枠線の太さを太め(3px)にする

 吹枠線の太さをなしにする

以上が会話ふきだしのカスタマイズになります!自分だけのふきだしを作ってみましょう!
りょーた

まとめ:会話ふきだしを導入して独自性をUPさせよう!

今回はアフィンガー5の会話ふきだしの設定と使い方を解説しました。

  1. 会話ふきだしのアイコンを準備
  2. 会話ふきだしのアイコンを設定
  3. 会話ふきだしのショートコードを挿入

SEO対策としてもGoogleは独自のコンテンツを重要視しています。

アフィンガーではデフォルトの機能として使用することができますが、読者の気持ちや自分が話かける時に使うとベストです。

本当に会話しているかのような気持ちになるので読みやすく、記事の滞在時間も上がります。

これからAFFINGER5の導入を検討している方は、AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説もチェックしてみてください。

アフィンガー5について知りたい方は
【限定特典付き】AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説

続きを見る

-AFFINGER5