res さつき様

response

message

parody01のふきだしに縁取りをつけたい
名前部分とふきだし部分が重なるように調整したい

response

はじめまして、メールありがとうございます。

下記でいかがでしょうか。　なるべく頂いた画像に近づくように調整していますが、気になる部分があれば数値の調整をするか、再度のご連絡をお願いします。

code edit

body

以下の置き換え

<span>名前</span> → <span data-af="名前"></span>

現デザインでいくつか書いている場合は文字置き換えツールを使うと楽です。簡易変換

head

以下それぞれ指定箇所と置き換え

配色部分

css


        
          /* 左寄せ名前 */
          .talk > .left > span::after {
          	background-color: #abd8f4;/*背景色*/
          	color: #343434;/*文字色*/
          }
          
          /* 右寄せ名前 */
          .talk > .right > span::after {
          	background-color: #ffffff;/*背景色*/
          	color: #000000;/*文字色*/
          }
          
          /*　左寄せふきだし　*/
          .talk > .left > .text {
          	background-color: #fefefe;/*背景色*/
          	color: #343434;/*文字色*/
          	border: solid 1px #a6a6a6;/* 枠 */
          }
          
          /*　右寄せふきだし　*/
          .talk > .right > .text {
          	background-color: #baf291;/*背景色*/
          	color: #000000;/*文字色*/
          	border: solid 1px #ffffff;/* 枠 */
          }

/* -- coloring -- */下
/*　左寄せふきだし */-/* --　layout -- */間

レイアウト部分

css


        
          /* 名前 */
          
          .talk > li > span {
          	position: relative;
          	z-index: 1;
          	display: block;
          }
          .talk > li > span[data-af]::after {
          	content: attr(data-af);
          	display: inline-block;
          	box-sizing: border-box;
          	min-width: 100px;/* 最小幅 */
          	margin: 0 15px;/* 左右の位置調整 */
          	padding: 2px 10px;/* 内余白 */
          	text-align: center;
          	border-radius: 10px / 50%;/* 角丸 */
          }
          
          
          
          /* 既読,時刻表記部分 */
          
          .talk > li > div > p:last-child {
          	position: absolute;
          	bottom: 4px;
          	display: inline-block;
          	width: 4em;
          	margin: 0 0.5em;
          	font-size: 0.9em;
          	line-height: 1em;
          }
          
          
          .talk > .left  > div > p:last-child {
          	left: 100%;
          	text-align: left;
          }
          
          .talk > .right > div > p:last-child {
          	right: 100%;
          	text-align: right;
          }
          
          .talk > li > div > p:last-child:before {
          	display: inline-block;
          	width: 100%;
          }
          
          .kdkset + li {
          	margin-top: 0;
          }
          
          .talk > li.kdk > div > p:last-child:before {
          	content: '既読';
          }
          .talk > .kdkset ~ li.kdk > div > p:last-child:before {
          	content: '既読'counter(kdk); 
          }
          
          
          
          /* 内容部分　共通 */
          
          .talk > li > div {
          	position: relative;
          	display: inline-block;
          	margin: 3px 10px 0;
          	text-align: left;
          }
          
          
          /* 内容部分 左寄せ */
          .talk > .left > div {
          	left: 0;
          	margin-right: 0;
          }
          
          /* 内容部分 右寄せ */
          .talk > .right > div {
          	right: 0;
          	margin-left: 0;
          }
          
          
          .talk > li > .text {/* テキスト部分 */
          	max-width: 60%;
          	padding: 3px 6px;/* 内余白 */
          	border-radius: 6px;/* 角丸 */
          }
          
          .talk > li > span[data-af] + .text {/* 名前有版テキスト部分 */
          	margin-top: -14px;/* 名前との間隔 */
          	min-width: 120px;/* 最小幅 */
          	padding-top: 14px !important;/* 内余白(上) */
          }
          
          
          .talk .text:before {/* ふきだしツノ */
          	content: '';
          	position: absolute;
          	top: 6px;/* 縦位置 */
          	display: inline-block;
          	width: 1em; height: 1em;
          	font-size: 12px;/* 基礎サイズ */
          	transform: rotate(45deg) skew(-20deg,-20deg);/* 変形値 */
          	background-color: inherit;
          	border: inherit;
          }
          
          .talk > .left > .text:before {
          	left: -0.5em;
          	border-right: none;
          	border-top: none;
          	clip-path: polygon(0 0,100% 100%,0 100%);
          }
          .talk > .right > .text:before {
          	right: -0.5em;
          	border-left: none;
          	border-bottom: none;
          	clip-path: polygon(0 0,100% 0,100% 100%);
          }

/* -- layout -- */下
/* 名前 */-/* 通話表示 */直前

css edit

配色部分は丸ごとですが、レイアウト部分で実質変更したのは下記二ヶ所です。個別に持ち帰りたい場合はそこのみどうぞ。
- /* 名前 */直下
- /*　内容部分　共通 */から下
;横にコメントアウトがついている部分のみ変更推奨です。
ちょっと指定がややこしい箇所のみ下で説明します。

ふきだしのツノ

▽変形値

ツノ部分の内角を変更できます。

skew(-20deg,-20deg)

上記赤字部分を変更(二ヶ所は同値推奨)

値範囲：-45-45(小=鋭角/大=鈍角)

解説　：90+数値+数値の角度となる(デフォ:90+(-20)+(-20)=50)

▽基礎サイズ

ここの数値がツノ部分の一辺の長さになるようにしています。

拡大倍率のようなものと思って下さい。

▽縦位置

申し訳ない話ここの指定が面倒になるのですが、指定値分の位置にツノが配置される訳ではないです。

cssの仕様上「変形→配置決め」ではなく「配置決め→変形」の順で処理される為、変形値如何でズレが出ます。

気になる場合は細かく調整して丁度いい値を探るか、ご連絡ください(代替案お伝えします)。

おまけ

ツノ部分形成可視化っぽいもの

正方形を用意して
縦位置決めて
回転させて
変形させて
不要な部分を削って
完成