ビジログ

マーケティングを中心としたビジネス関連とブログ術の二本柱

はてなブログで会話形式の吹き出しを実装する方法と効果的な活用法まとめ

f:id:netlifehack:20170910005747p:plain


どうも、むむむです。

最近吹き出しと画像を使ってLINEやFacebookのような、チャット風の会話形式の吹き出しカスタマイズを行っているブログをよく目にします。

こんな感じのやつです。

 

・・・・・。

 

 

なんかしゃべれよ!!

 

 

もちろんはてなブログでもこの会話風の吹き出しは実装できるので、今日はこの会話形式の吹き出しカスタマイズの方法とその効果的な活用方法について書いてみたいと思います。

スポンサードリンク

 

はてなブログで画像付の吹き出しを実装する方法

まず会話形式の吹き出しを実装するCSSをコピペで追加していきます。

はてなブログでCSSを追加するには、レスポンシブデザインに対応したテーマを使っている場合は、「デザイン」→「デザインCSS」にコピペすればOKです。

f:id:netlifehack:20170905010727p:plain

 

レスポンシブデザインではない方は、上記に加え「デザイン」→「スマホ」→「タイトル下」にCSSをコピペしてください。

f:id:netlifehack:20170905010744p:plain

 

スマホのタイトル下にCSSをコピペする際は、以下のコードで挟むことを忘れずに!

CSSの追加方法はこちらで詳しく解説しているので、合わせて読んでみてください。

 

ちなみにこの記事を書くにあたって参考にさせていただいたブログです。合わせて読んでみてください。

シンプルな吹き出し

どんなデザインにもピッタリな、使い勝手のよいシンプルな吹き出しのCSSです。

HTMLはこちら

実際にブログ内で使うとこんな感じです。

 

どうも、犬の肉球ですUo・ェ・oU

 

 

どうも、猫の肉球です(ΦωΦ)

 

 

LINE風の吹き出し

みんな大好きLINE風の吹き出しパターンのCSSのです。

後は記事中の吹き出しを使いたい任意の場所で、以下のHTMLを記入すれば完了です。

ブログ内で使うとこんな感じになります。

f:id:netlifehack:20170710002608p:plain

LINEぽい会話ができるよ

既読スルー

会話形式での吹き出しの効果的な使い方

色んなブログで使われている会話形式での吹き出しですが、今いち使い所がわからない方も多いと思うのでブログでの効果的な活用法をまとめてみたいと思います。

難しい説明を会話形式で説明

文章だけでは説明が難しい場合、会話形式を使うことで読者さんに分かりやすく説明することができます。

 

ピカソの本名って知ってる?Uo・ェ・oU

 

 

パブロ・ディエゴ・ホセ・サンティアゴ・フランシスコ・デ・パウラ・ファン・ネポムセノ・クリシピン・クリスピニャーノ・デ・ロス・レメディオス・シプリアーノ・デ・ラ・サンテシマ・トリニダッド・ルイス・ピカソ(ΦωΦ)

 

 

文章ばかりのブログは読者さんも読む気を失せてしまうので、難しい部分こそ積極的に吹き出しを使った会話形式を導入してみましょう。

ブログにオリジナリティを出す

キャラクターを使ってオリジナリティを出しているブログがあるが、会話形式の吹き出しを使うことでよりキャラを活かすことができるだろう。

キャラ同士の会話のやり取りが面白いなど、使い方次第でブログにオリジナリティを出すのにも使えると思います。

自分のブログに突っ込む

主張の強い記事は内容によっては周りから反感を買ってしまう可能性があるので、そういった記事に吹き出しで突っ込みを入れることで、尖った意見を丸めさせることができるのです。

例えばあなたが好きなタレントについてひどくバッシングした記事を書いていたとして、記事の最後に以下のような吹き出しがあればどうでしょう。

 

お前が言えたことじゃないけどな!Uo・ェ・oU

 

 

吹き出しのキャラがあなたの代わりに突っ込んでくれたことで、なんだか許せちゃう気がしないかい?笑

最後に

文章ばかりのブログってそれだけで読む気が失せるので、こういった吹き出しを使うことでかなり読みやすくなるものです。

はてなブログでも簡単コピペで吹き出しを実装できるので、気になる方は是非試してみてください。

 

以上、最後まで読んでいただき感謝!感謝!

良ければ読者登録もぜひぜひお願いします(^ν^)

ではでは、See you!!