2018.01.25sakurabaこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。本記事では、こんな感じの会話・チャット形式の吹き出しをつくるHTMLとCSSを紹介します!!参考にしたのは以下のサイトです。参考画像と吹き出しテキストで会話風にするHTMLとCSS。こちらの記事の内容を少しだけ編集し、オシャレに簡単にぼく好みにわかりやすくまとめました!!スポンサーリンクおしゃれな会話・チャット形式CSSをつくってみた今回コピペでつくるのは、「左からの吹き出し」と「右からの吹き出し」、さらに吹き出しを装飾するCSSの3つです!!かほちゃん、みほちゃんよろしくね!!※たまに登場してもらっています。(毎回名前が違います。笑)かほは〜い、sakurabaよろしく!!みほきちんと教えてあげてくださいね!!はーと。こんな吹き出しを作っていきます!!コピペしていきます。作業の際はかならずバックアップを取ってからおこなってください。利用するコード冒頭でも説明した通りHTMLのコードが2つ、左側の吹き出しと、右側の吹き出し。HTML、左側からの吹き出しかほまずはわたしのコードを紹介するよ〜〜〜それがこちら!!どん!コード内の、「画像のURL」、「名前」、「チャットの内容」を編集することで画像と名前と吹き出しの中身を自由に編集することができます!HTML、右側からの吹き出しみほやほ〜!みんなわかるかな〜??右からがこちら!!この2つのHTMLをエディタに貼り付けて利用します。CSS最後に、これまでのHTMLコードだけではただの画像とテキストになってしまうので装飾を加えていきます!!かなりの量です!!かほsakurabaよくこんなの作ったね!!みほさすがsakuraba氏!できる男は違う!すんません。笑CSSはみなさんが利用しているスタイルシートに貼り付けて利用してください。これが一番大変だった。最後に最近チャット形式が流行っているみたいです!!ぜひ、活用いただけたら嬉しく思います。〜〜かほこの記事がGoodだったらSNSで拡散よろしく!!sakurabaaa_gこの記事を書いた人。とあるネットベンチャーでがんばる働き屋さん、ブロガー。書きたいことを気ままに書いてます!Python、プログラミング、米株、カメラ、野球観戦がすき。スポンサーリンクShareFollow@sakurabaaa_gこちらの記事もどうぞ【コピペでできる!】「simplicity」に行った10のCSSカスタマイズこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。本記事では...記事を読む【ワードプレス】ショートコードを書いてプラグインで実装する方法こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のs...記事を読むコピペでOK!ワードプレス記事ページのみにCSSを適用する方法こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。【備忘録】本記事で...記事を読む【コピペでできる!】simplicity記事カテゴリに背景色をつけてみたこんにちは!!ようこそ、当ブログgcbgardenへ。「コピペでできる!」のシリーズ化を企んでいる管理人のsakurabaaa(@sak...記事を読む【コピペでできる!】simplicityグローバルナビメニューの中央寄せこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。Latex】ワードプレスでLaTeX(数式)を使えるようにするプラグインこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。テーブル背景を透明化する方法こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。返信チャット風CSSを探しているときに、こちらの記事を見つけました。急いでおりましたので、非常に助かりました。あ、記事の内容をそのままコピペするとエラーが出る箇所を見つけましたので、以下のように修正していただいたほうが良いかと思われます。返信ご指摘ありがとうございました。修正しましたので、ご確認いただけましたら幸いです。そんでもってスタイルシートに貼り付ける。返信コメント失礼します。ブログを始めて5ヶ月目のぽんと申します。記事を拝見いたしました。吹き出しの下に名前を書きたいと思っていたので、とても参考になりました。ありがとうございます。そこで一つご教授願いたのですが、はてなブログでこの記事のhtmlコードを使うと、https://cdn-ak.f.st-hatena.com/images/fotolife/h/higehigex/20181102/20181102165624_120.jpgこのように上に空白ができ、htmlのpタグなどをつめるとhttps://cdn-ak.f.st-hatena.com/images/fotolife/h/higehigex/20181102/20181102165621_120.jpg空白は消えるのですが、このように少し上にずれてしまいます。理想としては、チャットが真ん中あたりに来てくれれば助かるのですが、どうすればいいかわかるでしょうか、、。返信ぽんさんコメントありがとうございます。返信ご返信ありがとうございます。https://www.thinking-samurai.net/entry/2018/11/01/153028こちらの記事の途中に、吹き出しが2つ連続しているところがあります。使っているブログははてなブログです。一つ目の吹き出しは、コードをそのままコピーしたものです。上2行が勝手に開いてしまう状態です。二つ目は、その空白をhtmlの一部を詰めて修正したのと、名前の文字が大きかったので小さくしました。二つ目の吹き出しの位置を画像の中心に来るようにしたいのと、名前が現状は「ン」だけが改行されているので、理想としては改行せずにできればと思っています。」の閉じがないのが気になりました。確認してみてください。返信が遅くなり申し訳ございません。返信ぽんさんお問い合わせ時に記入いただいたメールアドレスに返信させていただきました。届いていますでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。@sakurabaaa_g20代。とあるネットベンチャーでがんばる働き屋さん、ブロガー。Python、プログラミング、米株、カメラ、野球観戦。手数料で目減りしていく純金積立より、元本保証の円定期預金プレーオフがおすすめですよ。コメントありがとうございます。10)はわかりません。力添えできず申し訳ございません。