AFFINGER

AFFINGER5の吹き出しの作成とカスタマイズ方法【超簡単】

草原にいるライオン

悩む学生
AFFINGER5の吹き出しのカスタマイズや設定がしたいです。枠線をつけたり、色を変えたりするにはどうすればいいのでしょうか?

 

今回はこんな悩みを解決します。

 

本記事の内容

  • AFFINGER5の吹き出しの作り方
  • AFFINGER5の吹き出しのカスタマイズ方法
  • ブログ内で吹き出しを使うメリットとデメリット

吹き出しを有名なブロガーさんみたいなのにしたい!という人は多いと思います。

 

しかし、AFFINGER5はカスタマイズできるところが多すぎて、どこをいじれば吹き出しがカスタマイズできるのか分かりにくいですよね。

 

今回はそんなあなたに向けて、吹き出しの設定についてのすべてを紹介していきます

 

この記事を読めば、吹き出しのカスタマイズ方法が分かり、ブログがもっとおしゃれになりますよ

 

本記事はさくっと読めますので、参考にしてみてください。

 

AFFINGER5で吹き出しを使う前に設定すること

疑問を感じている男性

AFFINGER5で吹き出しを使う前にまずはアイコンの設定をおこないましょう。

 

でないとこのように誰が喋っているのか分からない状態になってしまいます。

 

アイコンの設定は以下のとおりです。

 

  1. アイコンに使う画像を用意する
  2. AFFINGER5の管理画面から画像を設定

 

アイコンに使う画像を用意する

まずはアイコンに使う画像を用意してください。多くの人が2人または3人分の吹き出しを用意しています。

 

そして、アイコンに使う画像はできればプロの方に頼むのがいいでしょう。ココナラというアプリなら3000円ほどであなたのイラストを作成してくれます。

 

ぼくもこのアイコンを2500円で作ってもらいましたよ!
リットン

 

自分以外のアイコンに関しては、月収が7桁いくようなブロガーさんでも無料のものを使ってますので、ひとまず無料のものでOKです。

 

AFFINGER5の管理画面から画像を設定

 

まずはAFFINGER5管理会話・ファビコン等にいきましょう。

 

アイコン画像1やアイコン画像2の下にあるアップロードをクリックして、先ほどの画像を選択してください。

会話ファビコンの設定画面の図

 

アイコンに名前を付けたい場合は、アイコン名も入力しましょう。

 

ちなみに、下の方にある会話風アイコンを「少し動かす」や「少し大きく」というのはチェックすれば、会話のアイコンが動いたり、アイコンが大きく表示されるようになります。

 

AFFINGER5を使った記事を何十記事も見ましたが、「少し大きく」にチェックマークをつけているのは一度も見たことありません。少し動かしているにチェックしてるのはそれなりに見ます。

 

お好みの設定ができれば、最後は画面下にある保存をクリックして完了です。

 

これで、記事内で吹き出しを使える準備が整いました。

 

AFFINGER5で記事に吹き出しを使う方法

設定をする女性

実際に記事内で吹き出しを使ってみましょう。

 

記事内に吹き出しを使いたいところがあれば、タグ会話風吹き出し会話の番号をクリックすればOKです。

 

会話吹き出しの呼び出し方

 

会話の番号はAFFINGER5管理画面で設定したアイコン画像の番号に対応しています。

 

 html
[st-kaiwa1]ここに文章[/st-kaiwa1]

というようにかっこの間に文章をいれましょう。

 

デフォルトでは吹き出しは左から出てきますが、右から出したい場合は前側のかっこの方だけ

 html
[st-kaiwa1 r]

のように、半角とrを追加してください。

 

ちなみにこちらの設定に関しては多くの人が自分は右から、自分以外のキャラは左からという風に設定していることが多いです。

 

とはいえ、自分の好みに合わせて設定してください。

 

AFFINGER5の吹き出しのカスタマイズ

おしゃれな3人の男性の図

次に吹き出しのカスタマイズについて紹介します。吹き出しは色や枠線のありなしについてカスタマイズ可能です。

 

外観カスタマイズオプションカラー会話風吹き出しへ進みましょう。

 

吹き出し設定

それぞれの設定項目は以下のとおりです。

  • 会話番号の背景色→枠線なしのときの吹き出しの背景色が変わります
  • アイコンの枠線を消す→キャラのアイコン画像の枠線が消えます
  • 吹き出しを角丸にしない→吹き出しの枠が四角に変わります
  • ボーダーデザインタイプに変更→吹き出しに枠線をつけられます
  • ボーダーデザインタイプの背景色→枠線をつけたときの吹き出しの背景色になります

 

参考までに多くの人がしている設定を載せておきます。

 

  • 枠線をつけない人はうすい色を背景色に
  • 枠線ありの人は背景色を白にして枠線がモノトーン(黒や灰色)
  • アイコンの枠線は消さない
  • 吹き出しは角丸

 

自分で手を動かしつつ、お気に入りのデザインにしてあげてください。

 

ブログ記事内で会話吹き出しを使う意味

OKの合図をだす女性の図

せっかく設定までしましたから、ブログ記事内で吹き出しを使うとどんな効果があるのか確認しておきましょう。

 

ブログ記事内で吹き出しを使うことによる特徴は以下のとおりです。

 

ブログで吹き出しを使う意味

  • 会話を混ぜることで記事の堅さを和らげる
  • 読者の視線を止められる
  • うまく使えば内容が入りやすくなる
  • 人間味が出る

 

文章ばかりだと記事がお堅くなりがちですが、会話を入れることで人間ぽさも出たりするので少し和らげられます。

 

また、基本的にwebの読者は流し読みをしていますから、注目してほしい箇所の前後などで吹き出しを使うことで読者の視線を止めることができるのでおすすめです。

 

ただし、ブログにおいて吹き出しは絶対必要かといわれるとそうでもなく、実際にマナブさんという月にブログで7桁を稼いでいる方は吹き出しを一切使っていません。それでも、ブログは非常に見やすく内容も頭に入ってきやすいです。

 

ブログに吹き出しをつけないことでちょっぴり大人っぽさを演出できますよ。
リットン

 

もし、吹き出しを使いたくないぜという方がいたらマナブさんのブログを参考にしてみましょう。

 

 

吹き出しを使うときの注意点

注意を促す人の図

吹き出しをうまく使えば、ブログを読みやすくできます。

 

しかし誤った使い方をすると、かえって記事を読みにくくしたり内容が薄く見えてしまったりもするので注意が必要です。

 

注意点としては以下のとおりです。

 

記事内で吹き出しを使うときの注意点

  • 吹き出しを使いすぎない
  • 吹き出しの中身が長すぎる
  • せっかく吹き出しを使っているのに堅いまま

 

吹き出しを使いすぎない

吹き出しの使い過ぎには注意しましょう。人の目線は文章よりもイラストにいくのが普通です。

 

そのため、対話形式(右からと左からの吹き出しに分けている)の場合だと、読者の目線がキャラのアイコンに行ったり来たりしてしまい、読み疲れの原因にもなります。
しかも、会話調が続きすぎると深くまで書けないことも多く中身が薄っぺらい印象を与えます。

 

吹き出しはあくまで補助として使うのだと認識しましょう。

 

転職nendoというサイトは吹き出しの使い方がうまく参考になりますよ。
リットン

 

吹き出しの中身が長すぎる

吹き出しの中身が長すぎても見にくくなります。

 

あくまで吹き出しは理解を促したりリズムを整えるための補助なので、100を説明するみたいな場合に吹き出しは不必要です。

 

せっかく吹き出しを使っているのに堅いまま

せっかく吹き出しを使っているのですから、会話口調で書くのがよいでしょう。

 

この会話文章の中でもきっちり正しい日本語を書こうとする人がいますが、それではあまり恩恵がありません。

 

ビックリマークや話し言葉を入れるといいですよ!
リットン

 

文章を和らげるためにも吹き出しを使うときくらいは柔らかい感じで書くのがおすすめです。

 

吹き出しをカスタマイズしてさらにブログをおしゃれにしよう

公式サイトのアフィンガー

今回はAFFINGER5の吹き出しのカスタマイズに関して紹介しました。

 

AFFINGER5はカスタマイズできるところが多すぎて、初めのうちは心が折れそうになることもあると思います。

 

しかし、1つずつ細かく設定していけば、いつかは自分だけのオリジナルのサイトができあがります。

 

一緒にAFFINGERのカスタマイズを頑張りましょう。今回は以上です。ありがとうございました。

関連記事AFFINGER5でSNSボタンをカスタマイズする方法【完全版】

関連記事【AFFNGER5のレビュー】メリットとデメリットを使用者が解説

-AFFINGER

Copyright © Lytton Blog