はてなブログにLINE風吹き出しをつけてみた。実は2回目。 - 攻めは飛車角銀桂守りは金銀三枚
はてなブログでLINE風吹き出しを再現してみました。 実は２回目の挑戦です。 以前に設定したヤツはブログのテーマをカスタマイズしている時におかしくなって、デザインが吹っ飛んだのであわててテーマを別のものに変更したら設定もなくなってしまいました。 しかもその時に参考にしていたサイトの記事がすでになくなっており、再現できずにおりました。 今日は暇なんで別のサイトでされているのを見つけたので再現。 LINE風吹き出しはCSSで行います LINE風吹き出しはCSSで行います。 はてなブログではダッシュボードの「デザイン設定」→「カスタマイズ」→「デザインCSS」に設定します。 いま使っているテーマはレスポンシブ対応なのでここに設定すればスマホでも同じ表示になっていると思います。 LINE風吹き出しCSS 以下のCSSをデザインCSSの最後に設定します。 CSSはわいひらさんのnelog.jp から
(K)CSSで作った対談（会話）式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus|WEBデザイナーのための技術系メモサイト
以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・) PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。 @akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします（頼まれてもいませんが・・・） CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 以前組んだ奴とほとんど同じレイアウトで対応させた例 以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて％表示に治す必要があります。【HTML】はほとんど変更なしです。＜img＞に直接指定しているサイズ指定を取っ払うのみです。 HTMLマークアップ 【HTML】 <body>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
