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

シロクマは冬眠したい

デザインのこと、買ったもののレビューとか書きます

【はてなブログカスタマイズ/Innocent】LINE風の会話を表現する

f:id:hatarakitakunaingo:20170106112938p:plain

タイトルの通り、LINE風の会話をブログ上で表現します。アイコンの表示はありません。

このブログは、はてなブログテーマ『innocent』( http://moonnote.hateblo.jp/entry/innocent-hatenablog-theme ) を使用していますが、このコードは他のテーマでも、ワードプレスで作ったサイトでも使えると思います(多分…)

デモ

こんな感じに表示されます。

ヌッ!

疲れからか、不幸にも黒塗りの高級車に追突してしまう。後輩をかばいすべての責任を負った三浦に対し、 車の主、暴力団員谷岡に言い渡された示談の条件とは・・・。

これもうわかんねぇな

HTML

HTML編集モードでLINE風にしたい会話をdivで囲み、クラス名をline_wrapperにします。

左の吹き出しに入れたい文章のpタグクラス名をline_leftに、 
右の吹き出しのクラス名をline_rightにします。

CSS

はてなブログのダッシュボード>デザイン>カスタマイズ>デザインCSS
に下記のコードをコピペします。

背景色などを変更したい場合は、コードの中にわかりやすくコメントを入れてるのでそこを変更してくださいね。

参考サイト

このサイトを使って吹き出しを作りました。直感的にCSSの吹き出しが作れてとっても便利!

www.cssarrowplease.com

おわりに

アイコンの表示と、吹き出しの細かいディティールはめんどくさいので省略してしまいました。作ってみたはいいけど使いどころがないかもしれません…

ブラウザ別の検証はあんまりしていないので、うまく表示されてないとかあったら教えていただけると助かります。