読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

はてなブログにLINE風吹き出しをつけてみた。実は2回目。

はてな
スポンサーリンク

はてなブログでLINE風吹き出しを再現してみました。
LINE CHARACTER ブラウン  2S

実は2回目の挑戦です。

以前に設定したヤツはブログのテーマをカスタマイズしている時におかしくなって、デザインが吹っ飛んだのであわててテーマを別のものに変更したら設定もなくなってしまいました。

しかもその時に参考にしていたサイトの記事がすでになくなっており、再現できずにおりました。

今日は暇なんで別のサイトでされているのを見つけたので再現。

LINE風吹き出しはCSSで行います

LINE風吹き出しはCSSで行います。

はてなブログではダッシュボードの「デザイン設定」→「カスタマイズ」→「デザインCSS」に設定します。

いま使っているテーマはレスポンシブ対応なのでここに設定すればスマホでも同じ表示になっていると思います。

LINE風吹き出しCSS

以下のCSSをデザインCSSの最後に設定します。

CSSわいひらさんのnelog.jp
からどうぞ。

ちょっと長いですが、がんばってね。

HTMLで吹き出し表示

これで準備整ったので会話を書いていきましょう。

全体の背景色を変更します。

吹き出し部分の背景色を変えるために会話全体を

<div style="background-color: #7897C5;">

</div>

で囲みます。

左側の会話は

<p class="left_balloon">

</p>

右側の会話は

<p class="right_balloon">

</p>

で囲みましょう。

それでは吹き出し会話スタート


ねぇねぇ吹き出しできるって?

本当に?

ほれ吹き出しになってんじゃん。

あ、本当だ。

前にも同じような記事書いてないかい?

そうかもね。でも大丈夫。誰も覚えてないって。

セーフ。



まとめ

CSSに設定をしておけばあとは「class」を指定して会話かくだけなんで簡単です。
わいひらさん、ありがとう!!!

みなさんもぜひどうぞ。

世界一やさしい LINE (インプレスムック)

世界一やさしい LINE (インプレスムック)