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

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

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

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

2018年1月21日

はじめに

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

AIUEO Lab2

 

2 Tweets

271 Shares

465 Users

517 Pockets

CSSで会話形式のフキダシデザインを作ってみる - AIUEO Lab2

CSSで対話形式のフキダシデザイン 今日はフキダシデザインの作り方を書きます あ。前にも使っておきながら説明しなかったやつですね？ あ、覚えてたか（笑）前に記事の中で使ったことあるね。 →みんなまだ意外とやってないブログの見せ方。pinterestやinstagramを貼り付ける方法 - AIUEO Lab2 ケチだなーと思いました（笑） 今日説明するから許して…。以下がCSSとHTMLです。

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

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

追記：少しCSSを修正しました。（2/24）

完成系

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

まずは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さんとの最大の違いは、アイコン画像を背景で表示していること。これによって元画像の形に依存しないで円で画像を表示しています。

他にもはてなブログカスタム記事書いてます！

まとめ

おしまい。

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

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

posted with カエレバ

エビスコム ソシム 2014-10-28

Amazonで購入

楽天市場で購入