ブラックリストのキリンです

延滞、自己破産、債務整理でブラックになった人を応援するブログ

 メニュー

コピペOK!はてなブログで会話形式の吹き出しを作るCSS記事を紹介!

f:id:oshaberiitboy:20180122192151j:plain

 

いろんな方のブログで「会話形式で内容が進んでいく記事」って、よく見ますよね?

 

ブログを書く身としては、

 

こんな感じの吹き出しって、どうやったら作れんの?

 

と、興味津々でした。

 

だって会話でやり取りした方が面白いし、普通の文章よりもゼッタイに内容が頭に入りますもんね。

 

確かに!ジョークを文章で書いても全然面白くないけど、会話だったら笑えるもんね!

いるよね。「笑わせてやるぜ!」って文章を書いてるブロガーさん。だいたい面白くな・・・ゲフンゲフン!

 

調べた結果、割とカンタンに会話風の吹き出しは作れます!

 

 

 

はてなブログに会話形式の吹き出しのCSSを入れる 

 

パクった参考にしたのは、こちらの記事。

 

www.notitle-weblog.com

  

はてブの数が500超え・・・すごい・・・

 

それだけみんなが参考にしてるってことですね!

 

この内容を見るだけで、皆さんのブログにも吹き出しを乗せることができますよ!

 

ちなみに記事内では、

 

Google Chromeの拡張機能をインストール

 

と書かれてますが、safariで記事を書く場合ならインストールはしなくても大丈夫みたいです!

 

ただあくまで管理人のケースなので、一応インストールは試しておいた方がいいかもしれません。

 

IEその他は知らん!すまんな!

 

ちなみに会話の吹き出しを作っても、キャラクターの写真が上手く表示されないこともあるみたいです。

 

その場合は、こちらの記事も参考にしてください。

 

www.uenoyou.net

 

吹き出しキャラクターの画像は「いらすとや」が便利

 

吹き出しに使うキャラクターのイラストですが、何を使えばいいか迷う人もいるはず。

 

私は「いらすとや」さんを使ってます!

 

www.irasutoya.com

 

理由は「他の人も使っている」から。

 

だって見る人にとっては馴染みのあるキャラクターが登場した方が、会話の内容が入りやすいですもん。

 

他のブロガーさんも、自分自身のアイコン以外は「いらすとや」さんのキャラクターを使ってることが多いです。

 

いらすとや、モブキャラ最強説

 

まとめ:会話の吹き出し使うの楽しいよ!

 

結論から言うと、吹き出し使うのめっちゃ楽しいです。

 

会話のやり取りみたいに文章だけじゃ伝わりにくいことも、吹き出しならラクに伝えれるよ!

もっと早く使えばよかった・・。死にたい。

生きろ!

 

吹き出しは使うほど記事の表現が広がるので、ぜひ使って見てください!

 

【2018.07追記】

 

会話の内容をもっとLINE風にするために、コードをアレンジしてみました。

 

こちらの記事に詳しくまとめているので、参考にしてください。

 

oshaberiitboy.hatenablog.com

 

本日は、以上です!