タイトルの通り、LINE風の会話をブログ上で表現します。アイコンの表示はありません。
このブログは、はてなブログテーマ『innocent』( http://moonnote.hateblo.jp/entry/innocent-hatenablog-theme ) を使用していますが、このコードは他のテーマでも、ワードプレスで作ったサイトでも使えると思います（多分…）
デモ
こんな感じに表示されます。
ヌッ!
疲れからか、不幸にも黒塗りの高級車に追突してしまう。後輩をかばいすべての責任を負った三浦に対し、 車の主、暴力団員谷岡に言い渡された示談の条件とは・・・。
これもうわかんねぇな
HTML
HTML編集モードでLINE風にしたい会話をdivで囲み、クラス名をline_wrapperにします。
左の吹き出しに入れたい文章のpタグクラス名をline_leftに、
右の吹き出しのクラス名をline_rightにします。
CSS
はてなブログのダッシュボード＞デザイン＞カスタマイズ＞デザインCSS
に下記のコードをコピペします。
背景色などを変更したい場合は、コードの中にわかりやすくコメントを入れてるのでそこを変更してくださいね。
参考サイト
このサイトを使って吹き出しを作りました。直感的にCSSの吹き出しが作れてとっても便利！
おわりに
アイコンの表示と、吹き出しの細かいディティールはめんどくさいので省略してしまいました。作ってみたはいいけど使いどころがないかもしれません…
ブラウザ別の検証はあんまりしていないので、うまく表示されてないとかあったら教えていただけると助かります。
コメントを残す