はてなブログでLINE風吹き出しを再現してみました。
実は２回目の挑戦です。
以前に設定したヤツはブログのテーマをカスタマイズしている時におかしくなって、デザインが吹っ飛んだのであわててテーマを別のものに変更したら設定もなくなってしまいました。
しかもその時に参考にしていたサイトの記事がすでになくなっており、再現できずにおりました。
今日は暇なんで別のサイトでされているのを見つけたので再現。
LINE風吹き出しはCSSで行います
LINE風吹き出しはCSSで行います。
はてなブログではダッシュボードの「デザイン設定」→「カスタマイズ」→「デザインCSS」に設定します。
いま使っているテーマはレスポンシブ対応なのでここに設定すればスマホでも同じ表示になっていると思います。
HTMLで吹き出し表示
これで準備整ったので会話を書いていきましょう。
全体の背景色を変更します。
吹き出し部分の背景色を変えるために会話全体を
<div style="background-color: #7897C5;"> </div>
で囲みます。
左側の会話は
<p class="left_balloon"> </p>
右側の会話は
<p class="right_balloon"> </p>
で囲みましょう。
それでは吹き出し会話スタート
ねぇねぇ吹き出しできるって？
本当に？
ほれ吹き出しになってんじゃん。
あ、本当だ。
前にも同じような記事書いてないかい？
そうかもね。でも大丈夫。誰も覚えてないって。
セーフ。
まとめ
CSSに設定をしておけばあとは「class」を指定して会話かくだけなんで簡単です。
わいひらさん、ありがとう！！！
みなさんもぜひどうぞ。
- 作者: デジタルプラス編集部
- 出版社/メーカー: インプレス
- 発売日: 2015/06/26
- メディア: ムック
- この商品を含むブログを見る
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: ?行本-精装
- この商品を含むブログ (3件) を見る