Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

吹き出しアイコンの表情を色々作ってみた。

吹き出しのアイコンを表情豊かにする


Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

いろいろなブログを見ていると吹き出しを使っているブログがちらほらあります。

とくに吹き出しの言葉によって違うアイコンを使用しているブログを見ていたときに「感情が伝わりやすい!」と気づきました。

なるほど、これだ!ぼくには感情がなかったんだ!

ということで、さっそく吹き出しに感情を持たせるために作ったアイコンを紹介します。

今までのアイコン

今までのアイコンです。
ただただ、にこやかな表情なだけです。今見ると「なにニヤついとるの?」と少しイラッとしてきました(笑)

そもそも、ニヤついてる(ドヤ顔風)では、吹き出しで話しているイメージが少し弱いし、何回も出てくるとちょっとうざいですね。

なんでコレ1本でやっていたのだろう…

まぁ、今から変えれば問題ないでしょ!ということでいくつか作ってみたのを紹介します!

感情のあるアイコンを作ってみた

【トーク】

口が開いていてしゃべっている感がある様に変更しました。

「では、さっそく本題です」とか特に感情を入れる必要のない会話のときに使います。


【ワォ!】

口を大きく開いて驚いている感がある表情を作ってみました。

「ハッピーターンの星型がはいってた!しかも2個(嬉)」「あっ!今週ジャンプ土曜発売だ!」とかびっくりした感情を表現するときに使います。


【やったー】

ルンルンで喜んでいる感がある表情です。ルンルンを表現するために効果線をいれてみました。

「これで解決!」「尊敬できるうっとうしい上司移転!」とか喜びの感情を表現するときに使います。


【イライラ】

イライラしている感がある表情です。こちらにも効果線をいれてみました。

「なんでこうなったんだ?」「これは許せん!」みたいなときに使おうかと思ってます。

【しゅん…】

落ち込んでる感がある表情です。涙を入れるといい感じですね。

「もう何もかもやる気が出ない、、、」「こんなのもできないオレはクズだ」みたいなときに使います。

【無】

無の表情です。

「…(言葉も無い)」「何も言えません」みたいなときに使います。

今回、表情のイラストで参考にしたサイトはこちらです。
参考 シンプルな表情の書き方KANAのかんたんイラストライフ

追加(2018.8.10)


【あせる】

やってしまった、、、ときの表情。

【ため息】

ため息をついている表情。

【疑問】

疑問をもっている表情。

【キラキラ】

最高にキラキラしているときの表情。

【悩む】

何か考え込んでいるときの表情。

【絶望】

何もかもに絶望しているときの表情。

SANGOで使うときのコツ

SANGOにはショートコードとして「吹き出し」がありますよね。
ショートコード(吹き出し)
[say img="(画像のURL)"]★吹き出しの言葉★[/say]

ただ毎回毎回、画像のURLを貼り付けるのはめんどくさい!

こんな風に解決してみました

これでめんどくさくない!はず(笑)

1.吹き出しとしてアップロードする画像の名前を統一する

ぼくはアップロードする画像の名前をすべて[huki-〇〇]にしました。アイコンで使用する画像はすべてこのhuki-部分をつけるようにします。


2.アイコンの感情に合わせた短い名前にする

吹き出しの感情 画像の名前
【トーク】 huki-talk(デフォルト)
【ワォ!】 huki-wao
【やったー】 huki-happy
【イライラ】 huki-ang
【しゅん…】 huki-syun
【無】 huki-mu

こんな感じに名前をつけてから、画像をアップロードしました。

MEMO
hiki-に続く名前はわかりやすくて短いものがベストです。

3.AddQuicktagで吹き出しのショートコードを変更する

ぼくは【トーク】をよく使うので、これをAddQuicktagのデフォルトにしました。

ショートコード(吹き出し)
[say img="https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png"]★吹き出しの言葉★[/say]

4.あとはビジュアルエディタで挿入した際に変更する

ショートコードで吹き出しを挿入した際に、【ワォ】にするならtalkの部分をwaoに書き換える。【やったー】にするならhappyに書き換えるだけで、吹き出しのアイコンを変更することができます!

これでかんたんにアイコンを変更することができますね!

まとめ

吹き出しのイラストに感情をプラスするだけで、吹き出しの言葉が生きてきますね!

随時、吹き出しのアイコンを追加していきたいと思います!