ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

AFFINGER5

AFFINGER5の吹き出し機能解説!使用方法からアイコンの調達方法など

投稿日:

AFFINGER5の吹き出し機能にアイコンを入れる方法

 

誠太
こんにちは、誠太です!
今回は吹き出し機能について解説するよっ!
アーサー

 

AFFINGER5では、『会話ふきだし機能』という機能がありますが、効果的に使えていますか?

 

吹き出し機能を使用することによって、あなたを覚えてもらいやすくなることはもちろん、読者に伝えたいことをイラストと一緒に伝えることが出来るので、内容をより伝わりやすくすることが可能です。

 

本記事では吹き出しのアイコンの設定方法から使い方までを解説し、伝わりやすい記事を作れるようにお手伝いさせていただきたいと思います。

 

本記事の内容

  • 吹き出し機能の使い方
  • 吹き出し機能の設定方法
  • アイコンを調達する方法

 

AFFINGER5の吹き出し機能にアイコンを入れる方法

AFFINGER5の吹き出し機能にアイコンを入れる方法

 

画像の効果と同じで、吹き出し機能を使用すると読者に休憩ポイントを作ってあげることが出来るので、図や画像を挿入するのが苦手な場合は、どんどん使うようにしましょう。

 

会話・ファビコン等

吹き出し機能のアイコンを入れる方法から先にお伝えします。

アイコンの設定場所は、AFFINGER5管理の『会話・ファビコン等』の項目から設定することが出来るようになっています。

 

AFFINGER5管理

 

アイコンサイズは60px以上の正方形画像

吹き出しのアイコンサイズは60pxの正方形画像が推奨されているため、画像によるサイトの負担を少しでも減らすために大きくても100pxくらいの正方形画像にとどめておきましょう。

 

会話・ファビコン等の画面では、吹き出し機能の設定とファビコンの設定の画面が一緒になっているので、今回はファビコンは無視して吹き出し機能の設定を見ていきましょう。

 

会話風アイコン設定画面

 

吹き出しの主な設定箇所は3つあります。

 

  • 会話風アイコンを少し動かす
  • 名前の入力
  • アップロードで画像をアップロード

 

会話風アイコンを少し動かすにチェックを入れると、アイコン自体に震えるアクションを付け加えることが出来るので、読者の目を引く事ができます。

 

名前の入力は、アイコン下に名前を表示させたいときに入力します。

あなたの名前を覚えてもらいたい場合に使用すると、より効果的に吹き出し機能を使えるでしょう。

 

画像のアップロードは、『アップロード』ボタンから行います。

先ほどお伝えしましたが、画像のサイズは60pxの正方形画像推奨です。

 

ポイント

縦横比が大きく異なる場合はアイコン画像が思ったように表示されない可能性があるため、準備する画像は正方形のものを準備するようにしましょう。

 

吹き出しの色をカスタマイズ

吹き出しの色をカスタマイズするには、『外観』→『カスタマイズ』にて行います。

 

会話吹き出しカスタマイズ

 

会話1~会話8までのカラータイプを選択することができます。

 

  • アイコン枠を消す
  • ふきだしを丸角にしない
  • ボーダーデザインタイプ(2px)に変更
  • ボーダーデザインタイプ(2px)時の背景色一括設定

 

その他設定では上記の4つのチェックボックスがあります。

以前までは、吹き出しに枠線をつけるにはCSSでカスタマイズをしなければいけなかったのですが、アップデートにより枠線が標準で付けられるように実装されました。

 

枠線を使用する場合は、『ボーダーデザインタイプ(2px)に変更』にチェックを入れると枠線が表示されるようになります。

 

『ふきだしを丸角にしない』にチェックを入れると、丸角から4辺が角になるデザインに変更することが可能です。

 

 

また、このときの枠線の色に関しては、各会話アイコンの背景色を選択する部分での色がボーダーの色に反映されるようになります。

 

ふきだしの中の色に関しては『ボーダーデザインタイプ(2px)時の背景色一括設定』で色の設定を行なうと、枠の中の背景色を選択できるようになりますが、通常は白で良いかと思います。

 

アイコンの枠線がない状態だと、吹き出しの形に色がつく様になるので、個人的には枠線デザインのほうがオススメです。

もし枠線がいらない場合は、薄い色にすると良いと思います。

 

 

ここまで設定ができたら、アイコンの画像とふきだしの設定は終了です。

続いてアイコンの調達先についてもチェックしていきましょう。

 

アイコン画像を調達するオススメサイト

アイコンの調達先

 

アイコンの調達先については無料と有料とで変わってくるので、それぞれ調達先と調達するときのポイントについて解説を行います。

 

アイコン調達時の注意点

先に無料でアイコンの調達をする場合の注意事項についてお伝えしておきます。

 

基本的に無料アイコンに関しては、下記のポイントについて知っておく必要があります。

 

  • 他の人とかぶる可能性がある
  • 気に入ったアイコンを設定できない場合がある
  • 商用可能な素材か確認する必要がある

 

完全にオリジナルなアイコンを調達したい場合は、有料のアイコン素材を入手される事をオススメします。

 

そこまでアイコンに対してのこだわりがない場合は、無料のアイコンでも良いかと思いますが、その際には商用利用可能で有ることを確認してください。

 

また、その際には作者さんにひとこと問い合わせにて使用する旨を伝えたほうが無用なトラブルを避けられるので、間違いなく一報だけは入れておくようにしましょう。

 

フリー画像ならニコニコ静画

フリーアイコンでの有名なサイトでは、『イラストAC』や『いらすとや』などがありますが、アイコンにするにはあまり適していないというのが個人的な感想です。

 

じゃあどこがオススメなの?

 

こんな感じの読者視点のアイコンであれば良いと思うのですが、運営者のアイコンになればフリー素材の場合、上記のサイトからの画像だと割とバレてしまいます。

 

そのため、使えそうなサイトを探してみたのですが、最近のアイコンの系統を考えるとニコニコ静画が利用しやすいかと思います。

 

ニコニコ静画

 

『イラストを検索』の部分に"フリーアイコン"と検索すると、商用利用のアイコンなどが検索結果として表示されるので、各イラストの注意事項を確認して利用するようにしてください。

 

また、イラスト作成者さんにコメントにて使用する事を伝えたほうが良いとお伝えしましたが、コメントを打つには会員登録が必要になるようなので、もしアカウントを持っていなかったら会員登録後、利用するのが良いでしょう。

 

有料ならココナラ

ココナラ

 

有料でアイコンを調達するならココナラが良いかと思います。

ぼくもココナラを使用してアイコンを調達しましたが、とてもスムーズに取引することができたのでオススメです。

 

ココナラの取引の仕方や支払い方法に関しては、こちらの記事で解説をしているので、参考にしてみてください。

ココナラでアイコンを依頼する手順と支払い方法について

続きを見る

 

会話吹き出し機能の使い方

会話吹き出し機能の使い方

 

吹き出しはビジュアルエディターで『タグ』→『会話ふきだし』→『会話1~8』で選択することが出来るようになっています。

 

会話吹き出し機能のある場所

 

吹き出しの中に入れたい文字をドラッグして、それぞれの会話番号を『かいわ吹き出し』の中からクリックしてあげれば、吹き出し機能が反映されるようになります

 

会話吹き出し機能の適応方法

 

また吹き出しを反転させたい場合は、このように『半角スペーズ + r』を入力してあげると、右からアイコンが吹き出しを出すように設定することが可能です。

 

会話吹き出し機能を右から出す方法

 

こんな感じになります!
誠太

 

吹き出しは記事の中の話をまとめるときなどに使用すると、読者の理解が深まるように手助けしてあげることが出来るので、時と状況に応じて使用していくと高い効果が見込めるはずです。

 

会話吹き出し機能を使ってサイトを覚えてもらおう

会話吹き出し機能を使ってサイトを覚えてもらおう

 

吹き出しを使用すると、ただ文章で伝えるよりも読者に話しかけているような効果があるので、これは間違いなく伝えたいというときに使用すると良いでしょう。

 

また、先ほどもお伝えしましたが、H3の内容が長くなりがちで画像も特に差し込めないような場合は、適度に使用することで読者に休憩タイムを準備してあげることが出来るので、そういった使い方も効果的です。

 

多様のし過ぎは逆効果になってしまうので、話をまとめるとき、内容に入るときの導入部分に使用するといったように、自分の中にルールを設けて使用すると規則的に使用できるので統一感も出せます。

 

吹き出しを効果的に使用して、記事クオリティを上げられるようにしてみてくださいね!

 

\ あわせて読みたい /

2019/6/11

AFFINGER5の評判は?ぼくも含めAFFINGER5ユーザーの評価を紹介

  誠太こんにちは、誠太です!   アフィリエイト初心者からAFFINGER5を使用し始めて3ヶ月が経過したので、ぼくのAFFINGER5への評価と他のユーザーがAFFINGER5をどのように評価しているのかを紹介したいと思います。   結論、ぼくのAFFINGER5への評価は高いです。   アフィリエイト収益を増やす仕組み 初心者でも使いやすい SEO対策のしやすさ 記事装飾の豊富さ 機能面の秀逸さ   ぼくも3ヶ月間AFFINGER5 WINGを使用し ...

ReadMore

2019/5/30

AFFINGER5やWordPressで上部に変な空白ができたときの対処方法

  誠太こんにちは、誠太です!   先日、AFFINGER5のカスタマイズを行っているときに、サイトの上部にこのような変な空白が空いていることに気が付きました。     こんな現象が起きたのは初めてで、すこしググって調べてみたところ3つほど対策方法があるようなので、同じ現象になっている人へ向けて解決方法をシェアしたいと思います。   本記事の内容 WordPressのサイト上部に空白が生まれてしまったときの対処方法 WordPress上部に変な空白ができた ...

ReadMore

2019/5/26

AFFINGER5の吹き出し機能解説!使用方法からアイコンの調達方法など

  誠太こんにちは、誠太です! 今回は吹き出し機能について解説するよっ!アーサー   AFFINGER5では、『会話ふきだし機能』という機能がありますが、効果的に使えていますか?   吹き出し機能を使用することによって、あなたを覚えてもらいやすくなることはもちろん、読者に伝えたいことをイラストと一緒に伝えることが出来るので、内容をより伝わりやすくすることが可能です。   本記事では吹き出しのアイコンの設定方法から使い方までを解説し、伝わりやすい記事を作れるようにお手 ...

ReadMore

2019/5/25

AFFINGER5(アフィンガー)に破線ボックスを導入する方法!

  誠太こんにちは、誠太です。   今回は、タグの中にあるボックスデザインでマイボックスという項目があります。   その中にある、『しかく(枠のみ)』というボックスデザインがあるのですが、そのデザインを破線ボックスになんとかカスタマイズできないかと試行錯誤していたところ、カスタマイズに成功しました。   ぼくと同じように思っている人へ向けて、本記事を執筆します。   本記事の内容 『しかく(枠のみ)』を破線ボックスに変更するカスタマイズ CSSコードの入力 ...

ReadMore

2019/5/19

JINとAFFINGER5を比較検証!初心者にオススメなのは・・・

  誠太こんにちは、誠太です!   JINとAFFINGER5はよく比較されるWordPressテーマです。 そのため、はじめての有料WordPressテーマを購入しようとしているけど迷ってしまう人がほとんどだと思います。   JINとAFFINGER5ってどっちがいいの? 初心者が使いやすいのはどっち? 雰囲気はJINが好きだけど、稼ぎたいならAFFINGER5?   このような悩みを解決するべくJINとAFFINGER5の検証を行い、あなたにはどちらの選択が合っ ...

ReadMore

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-AFFINGER5
-

Copyright© Limitless.net , 2019 All Rights Reserved.