【WordPress】プラグインなし吹き出し会話機能 ( 第2弾 )

f:id:sntkk3:20180121234523p:plain

吹き出し会話機能 ( 第2弾 )

今日は、WordPressに使える吹き出し会話機能の第2弾です。

以前ご紹介した第1弾記事はこちらです ↓
times-diary.hatenablog.com

今回の吹き出し会話機能の特徴

吹き出し背景色を漫画風に白っぽくしました
テキストの文字数に応じて吹き出しのサイズが決まります

使い方：

【左パターン】
[bal_L1]画像URL[bal_L2]会話テキスト[bal_L3]

【右パターン】
[bal_R1]テキスト[bal_R2] 画像URL [bal_R3]

[ php ]

function.php に以下を追記

 /*-------------------------------------------------------------------------
 * 吹き出し機能2
 *-------------------------------------------------------------------------*/

//bal_L1
function sc_bal_L1(){
	return "<div class='bal-l'><div class='avaBox'><img src='";
}
add_shortcode('bal_L1','sc_bal_l1');

//bal_L2
function sc_bal_L2(){
	return "' width='60' height='60' alt='RA'sプロフ画像'></div><div class='txtBox'>";
}
add_shortcode('bal_L2','sc_bal_l2');

//bal_L3
function sc_bal_L3(){
	return "</div></div>";
}
add_shortcode('bal_L3','sc_bal_l3');

//bal_R1
function sc_bal_R1(){
	return "<div class='bal-r'><div class='txtBox'>";
}
add_shortcode('bal_R1','sc_bal_r1');

//bal_R2
function sc_bal_R2(){
	return "</div><div class='avaBox'><img src='";
}
add_shortcode('bal_R2','sc_bal_r2');

//bal_R3
function sc_bal_R3(){
	return "' width='60' height='60' alt='RA'sプロフ画像'></div></div>";
}
add_shortcode('bal_R3','sc_bal_r3');

// パターン2追記
//bal2_L1
function sc_bal2_L1(){
	return "<div class='bal-l2'><div class='avaBox'><img src='";
}
add_shortcode('bal2_L1','sc_bal2_l1');

//bal2_R1
function sc_bal2_R1(){
	return "<div class='bal-r2'><div class='txtBox'>";
}
add_shortcode('bal2_R1','sc_bal2_r1');

//sc_p_fix
function sc_p_fix($content) {
	$array = array (
		'<p>[' => '[',
		']</p>' => ']',
		']<br />' => ']'
	);

	$content = strtr($content, $array);
	return $content;
}
add_filter('the_content', 'sc_p_fix');
  
?>

[ CSS ]

style.cssに以下を追記

/*------------------------------------------------------------
 吹き出し機能2
-------------------------------------------------------------*/

/* 吹き出し */
.bal-l, .bal-r,
.bal-l2, .bal-r2 {
	padding: 0.5em 1em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.bal-l, .bal-l2 {justify-content: flex-start;}
.bal-r, .bal-r2 {justify-content: flex-end;}
.bal-l p,.bal-r p,
.bal-l2 p, .bal-r2 p {margin: 0;}

/* avatarBox */
.bal-l .avaBox,.bal-r .avaBox,
.bal-l2 .avaBox,.bal-r2 .avaBox {
	width: 60px;
	min-width: 60px;
	height: 60px;
}
.bal-l .avaBox {margin-right: 1em;}
.bal-r .avaBox {margin-left: 1em;}
.bal-l2 .avaBox {margin-right: 30px;}
.bal-r2 .avaBox {margin-left: 30px;}
.bal-l .avaBox img,.bal-r .avaBox img,
.bal-l2 .avaBox img,.bal-r2 .avaBox img {
	width      : 60px;
	min-width  : 60px;
	height     : 60px;
	object-fit : cover;
}

/* textBox */
.bal-l .txtBox,.bal-r .txtBox,
.bal-l2 .txtBox,.bal-r2 .txtBox {
	max-width: 70%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	position: relative;
	padding: 0.5em;
	border-radius: 7px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	z-index: 2;
}
.bal-l .txtBox, .bal-l2 .txtBox {
	border: 2px solid #eee;
	background: #fff;
}
.bal-r .txtBox, .bal-r2 .txtBox {
	border: 2px solid #eee;
	background: #fff;
}

/* パターン1_common */
.bal-l .txtBox:before,.bal-l .txtBox:after,
.bal-r .txtBox:before,.bal-r .txtBox:after {
	width: 0;
	height: 0;
	content: "";
	position: absolute;
	top: 13px;
	border-width: 7px;
}
.bal-l .txtBox:before,
.bal-l .txtBox:after {
	border-style: solid solid solid none;
}
.bal-r .txtBox:before,
.bal-r .txtBox:after {
	border-style: solid none solid solid;
}
.bal-l .txtBox:before {
	left: -9px;
	border-color: transparent #eee;
	z-index: 1;
}
.bal-r .txtBox:before {
	right: -9px;
	border-color: transparent #eee;
	z-index: 1;
}
.bal-l .txtBox:after {
	border-color: transparent #f3f9fb;
	z-index: 3;
}
.bal-r .txtBox:after {
	border-color: transparent #fffafa;
	z-index: 3;
}
.bal-l .txtBox:after {left: -7px;}
.bal-r .txtBox:after {right: -7px;}

/* パターン2_common */
.bal-l2 .txtBox:before,.bal-l2 .txtBox:after,
.bal-r2 .txtBox:before,.bal-r2 .txtBox:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
/* before */
.bal-l2 .txtBox:before,
.bal-r2 .txtBox:before {
    width: 12px;
    height: 12px;
    top: 12px;
}
.bal-l2 .txtBox:before {left: -20px;}
.bal-r2 .txtBox:before {right: -20px;}
/* after */
.bal-l2 .txtBox:after,
.bal-r2 .txtBox:after {
    width: 6px;
    height: 6px;
    top: 25px;
}
.bal-l2 .txtBox:after {left: -29px;}
.bal-r2 .txtBox:after {right: -29px;}
/* border,bg */
.bal-l2 .txtBox:before,.bal-l2 .txtBox:after {
	border: 2px solid #eee;
	background: #fff;
}
.bal-r2 .txtBox:before,.bal-r2 .txtBox:after {
    border: 2px solid #eee;
	background: #fff;
}