誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS

2017.5月更新
こんにちは!いつの間にか14回目のカスタム記事!今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました!ぜひご覧あれ!

当ブログははてなブログからWordpressに移行しました。移行はしたけれど当サイトのはてなブログカスタム記事にて紹介しているCSSカスタムは基本的にははてなブログで使用することができます。
カスタムはすべて自己責任でお願います。
はてなブログからWordpressに引っ越し

2年間続けたはてなブログから、ワードプレスに引っ越した理由

2018年1月21日

はじめに

参考記事としてこちらの記事を参考にいたしました。

akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。

上記の記事内に「どなたか改良版をお願いします。」と書かれているので正々堂々と改良いたします!

追記:少しCSSを修正しました。(2/24)

完成系

こんにちはー!ジョージでーす!今回は会話形式のCSSを作ったよー!

あら、こんにちは、ジョージさん。

私はまったくHTMLとかCSSを理解してないけど使えるかしら?

うん!大丈夫!極限まで簡単に作ったぜ!(僕のできる範囲で)

コピペで簡単に使えるから是非使ってね!

という茶番劇を繰り広げることができますぞ!

まずはCSSをコピペしよう!

はてなブロガーの方はいつも通り「デザイン」「カスタムCSS」にペロっと貼り付けてくださいな。その他のブログサービスやホームページの方は各自のスタイルシートに貼り付けてください。

スマホ版のデザインを分けて設定している方は、しっかりスマホ用のカスタムページにもCSS全文を貼り付けてくださいね!

/*****ここから会話のCSS*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 }
.talk-wrap p{
 margin:0;
 }
 .left-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:left;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
 border: 3px solid #fff; /*左のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff; /*左の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #666;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -16px;
 top: 25%;
 margin-top: -8px;
}
 .right-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius:50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:right;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
 border: 3px solid #FFF; /*右のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff; /*右の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 position: absolute;
 right: -16px;
 top: 25%;
 margin-top: -8px;
}
.talk-end{
 clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 80px;
 height: 80px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 80px;
 height: 80px;
 }
 .talk-right{
 width: 65%; 
 }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px;
 height: 60px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%; 
 }
 }

ブログでの使い方

<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('ここに左側の人の画像のURLを貼って下さい!');"></div>
<div class="talk-left">
<p>会話内容をここに記述してください!</p>
</div>
</div>
<!--左はここまで-->
<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('ここに右側の人の画像のURLを貼ってください!');"></div>
<div class="talk-right">
<p>会話内容をここに記述してください!</p>
</div>
</div>
<!--右はここまで-->
<!--↓会話部分の最後にこれを必ず付け加えて↓-->
<div class="talk-end"></div>
  • まずこれをブログのHTML編集での会話を挿入したい箇所に貼り付けてください。
  • 左の会話に画像URLを貼り付けてください。画像のURLの取得方法はこちらの記事で。
  • 会話の内容を書いてください。普段通りに太字や文字色なんかも使えます。
  • 右の会話にも同じことをやって下さい。
  • 会話をさらに伸ばすときは、最後の行の『↓会話部分の~』の上まで、つまり左と右の会話部分のみをコピペで増やして下さい。
  • 最後には必ず↓会話部分の~』を付け加えてください!

簡単解説(飛ばして良し!)

akiueoさんとの最大の違いは、アイコン画像を背景で表示していること。これによって元画像の形に依存しないで円で画像を表示しています。

まとめ

ね?簡単でしょ?パッと見でコードが長いと感じるけどさ、CSSは一回貼り付けちゃえば終わりだし、HTMLも画像リンク張って文字を書くだけよん。

ほんとね!このコードをメモ帳かなんかに保存しておけばいつでも使えるね!

そうそう、その通りだよあおいちゃん

でもどうして僕は話し相手に君を選んだのかね。いや、可愛いんだけどさ。なんか僕キモいよね?

おしまい。

▼もしも勉強するならこの本がマジでおすすめ。学校で使ってました。

 

16 件のコメント

  • 素晴らしい情報をありがとうございます!使わせていただきます!
    質問なんですけど、喋っている人の丸いアイコンと吹き出し部分の間隔を狭くするにはCSSのどの部分をいじればいいのでしょうか。もしよろしければ教えて下さい。

  • スマホでカスタマイズする場合は、デザインのスマホの部分のどこにCSSを貼ればよろしいでしょうか?教えていただけると幸いです

  • icchihankaiさん
    スマホのデザインのヘッダを開いて、タイトル下の「スマートフォンようにHTMLを設定する」という箇所で、スタイルタグで会話CSSを挟んで記述すると反映されると思いますよ☆

  • 娘に「ラインみたいな会話っぽいブログやりたい」って言われ、つくり方を検索してみたらここに来ました!CSSってなんぞや?からでしたが、無事に会話形式ブログがはじめたれたので感謝です♡♡ありがとうございました。

  • ky7777さん、そうそう、私も最初は絵がドアップで表示されたので、まわりに白いフチをつけて調整しました。白フチ入れて250pxです。
    そのあと、絵と吹き出しが2行に分かれてしまったので、コピペしたデザインのカスタムCSSの中の以下
    .left-icon{
    width: 100px;
    height: 100px;
    を、縦横ともに80px;にした(右アイコンも左アイコンも)ら1行で表示されました。
    参考になるかな??

  • ちょうど欲しかったコードがここにありました!ありがとうございます^^
    質問なんですが、吹き出しの拝見部分に出す画像の推奨サイズはいくつなんしょうか?
    試してみたんですがうまく画像がでなくて^^;
    よろしくお願いします。

  • こんばんは。利用させていただいております!
    UIの部分貼った記事なのですが、PCではしっかりとアイコンの中に画像が入るのですの、スマホで開くとなぜかアイコン内の写真が表示されなくなります(T ^ T)
    使っているのはワードプレスでテーマはstiner5cheaterです。
    テーマでのスマホの設定はレスポンシブになっておりますので、打てる手がわからなくなってしまいました。
    もし、何か解決方法がありましたら是非教えて頂きたいです。
    よろしくお願いします!

  • こんにちは。
    最近ブログを始めたばかりなのですが、いつもカスタマイズの参考にさせていただいております!
    非常に分かりやすく解説してくださって大変助かっています!
    今回フキダシ形式に挑戦してみたのですが、PC画面ではキレイに表示できていますが、iPhoneではアイコン画像とフキダシが表示されません。
    テーマは”Contents”を使用していてレスポンシブ設定をしているのですが、何か特別な設定をしないといけないのでしょうか?
    CSS自体に/*レスポシブ設定*/と書いてあったのでスマホ向けでは特に何もしていません。
    どうすればいいか教えていただけますと嬉しいです。
    よろしくお願いいたします!

  • こんにちは
    素晴らしいコードをありがとうございます。
    私も自分のブログに活用させて頂きます。
    ですが一つ分からないことがありまして
    何故か左のアイコンのサイズだけ大きくなったりして安定しません。
    radiusをいじった影響かもしれないと思っているのですが、自分にはよく分かりません。
    もし良ければお手数ですが原因をお教え頂けないでしょうか?

  • yossy0626 へ返信する コメントをキャンセル

    メールアドレスが公開されることはありません。