WordPress でライン風の吹き出しを作るショートコード（プラグインなし）

2017年6月13日

LINE 風の吹き出しを簡単に記事に挿入できるショートコード。

A Gain Sierra の記事 ↓ を書く際に必要になったので作った。

サンプル

とりあえず先にサンプルから（実際の会話から抜粋ｗ）

作り方

ショートコード

以下を functions.php に追加。

/*---------------------------------------------------------------------------
 * ライン風の吹き出しショートコード
 *---------------------------------------------------------------------------*/
// 左からの吹き出し
add_shortcode( 'baloon-line-left', function( $atts, $content = null ) {
	$before = '<div class="balloon"><div class="balloon-img-left">';

	if( isset( $atts['img'] ) ) {
		$before .= '<figure><img src="' . $atts['img'] . '" width="60" height="60" alt="';
		$before .= isset( $atts['caption'] ) ? $atts['caption'] : '';
		$before .= '" /></figure>';
	}
	if( isset( $atts['caption'] ) ) {
		$before .= '<span class="balloon-img-caption">' . $atts['caption'] .'</span>';
	}

	$before .= '</div><div class="balloon-left-line">';

	$after = '</div></div>';

	return $before . $content . $after;
});

// 右からの吹き出し
add_shortcode( 'baloon-line-right', function( $atts, $content = null ) {
	$before = '<div class="balloon"><div class="balloon-img-right">';

	if( isset( $atts['img'] ) ) {
		$before .= '<figure><img src="' . $atts['img'] . '" width="60" height="60" alt="';
		$before .= isset( $atts['caption'] ) ? $atts['caption'] : '';
		$before .= '" /></figure>';
	}
	if( isset( $atts['caption'] ) ) {
		$before .= '<span class="balloon-img-caption">' . $atts['caption'] .'</span>';
	}

	$before .= '</div><div class="balloon-right-line">';

	$after = '</div></div>';

	return $before . $content . $after;
});

CSS

以下を style.css に追加。

/*------------------------------------------------------------
 ライン風の吹き出し
-------------------------------------------------------------*/
.balloon {
	margin-bottom: 40px;
}
.balloon figure {
	width: 60px;
	height: 60px;
}
.balloon-img-left {
	float: left;
}
.balloon-img-right {
	float: right;
}
.balloon-img-left figure {
	margin: 0 auto 0 0;
}
.balloon-img-right figure {
	margin: 0 0 0 auto;
}
.balloon img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.balloon-img-caption {
	padding: 5px 0 0;
	white-space: nowrap;
	font-size: 12px;
}
div[class^="balloon-"] {
	padding: 10px;
	position: relative;
	border-radius: 12px;
}
div[class^="balloon-img"] {
	padding: 0;
	text-align: center;
}
div[class^="balloon-left"] {
	margin-left: 80px;
}
div[class^="balloon-right"] {
	margin-right: 80px;
}
.balloon p {
	margin: 0 0 20px;
}
.balloon p:last-child {
	margin-bottom: 0;
}
div[class^="balloon-left-"]::before,
div[class^="balloon-right-"]::before,
div[class^="balloon-left-"]::after,
div[class^="balloon-right-"]::after {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	top: 12px;
}
div[class^="balloon-left-"]::before,
div[class^="balloon-left-"]::after {
	left: -20px;
}
div[class^="balloon-right-"]::before,
div[class^="balloon-right-"]::after {
	right: -20px;
}
div.balloon::after, div.balloon::before {
	clear: both;
	content: '';
	display: block;
}

/* 吹き出しの背景色 (左) */
div.balloon-left-line {
	background: #e4e8eb;
}
div.balloon-left-line::before,
div.balloon-left-line::after {
	border-right: 12px solid #e4e8eb;
}

/* 吹き出しの背景色 (右) */
div.balloon-right-line {
	background: #bef18c;
}
div.balloon-right-line::before,
div.balloon-right-line::after {
	border-left: 12px solid #bef18c;
}

使い方

WordPress の投稿・編集画面に、以下のショートコードを書く。

↓ こうなる。

画像下のキャプションが不要の場合は ↓ こう。