シンプルでスタイリッシュな会話形式の吹き出し機能をついに手に入れた。

シンプルでスタイリッシュな会話形式の吹き出し機能をついに手に入れた。

ずっと欲しかった「会話形式の吹き出し」

 

いま巷で流行り(?)の会話形式の吹き出し

こんな感じにやつ。

ずっと欲しかったんですよ。

だって、

見やすいし、分かりやすいし、おもしろいし、柔らかさも出る。

最強でしょ。

個人的に、これはかなり有効なツールだと思ってます。

とっても伝えやすくなるだろうなと。

 

そしてついに、「スタイリッシュな吹き出し」を手に入れた

 

「いつかやろう!」

とは思いながらも、いままでずるずると先延ばしに。

「いつかやろうは、バカ野郎!」とはよく言ったものです。

HTMLやCSSの知識が皆無なのも、やるのが億劫になってた原因の1つ。

(ずっと言ってんなコイツ)

しかし昨日、重い腰を上げました。

 

「会話形式 吹き出し css」でググり、好みのデザインの吹き出しを探索。

「シンプルで落ち着いたデザインのものがいいなぁ」と、いろんなサイトをサーフィン。

そして、見つけました。

実装した様子がこちら。

Talk-1
Moony

ついに会話形式の吹き出しを手に入れたぞぉぉぉ!

Talk-2
Sunny

やったやん。ええ感じやん。

Talk-1
Moony

せやろ?シンプルで落ち着いていてスタイリッシュやろ?
このブログには持ってこいなデザインや。

Talk-2
Sunny

デザインはええけど、月と太陽が喋ってるってのはちょっとヤバない?

Talk-1
Moony

…………。

 

てな感じです。

会話内容はさておき、非常にシンプルで見やすいデザインです。

会話形式なので、フランクな感じも存分に出すことができ、今後のブログ制作が捗りそう!

最高のツールを手に入れました。

 

参考にしたサイト

 

こんな素敵なデザインを提供してくれたのは、こちらのサイト!

画像と吹き出しテキストで会話風にするHTMLとCSS

こちらのサイトでは、

こんな素晴らしい吹き出しを提供してくれているだけではなく、

やり方についても詳しく解説してくれています。

Talk-1
Moony

MORIAWASEさん、最高かよ。

 

また、HTMLを毎回入力することでもできますが、

こちらの記事で紹介されているように、

WordPressで会話風の画像とテキストをコピペで簡単表示!

プラグイン「TinyMCE Templates」を使ってテンプレート化することで、

吹き出しをすぐに使うことができます。

 

まとめ

 

Talk-1
Moony

ついに、念願だった会話形式の吹き出し機能を実装したぞ。
これでおれは最強だぁぁぁ!

Talk-2
Sunny

別に実装したからって最強なわけじゃないからね。
そんなことより、記事数と記事の質をもっと上げろ。 

 

会話形式の吹き出し機能は、

最強ではまったくありませんが、

ブログを書きやすくする方法の1つであることは間違いないです。

まだ取り入れていない人は、ぜひいますぐやってみましょう!

Talk-1
Moony

…………キャラどうしよう。

 

ブログカテゴリの最新記事