Block Lab で「アナデン 会話ウィンドウ」を作ろう

<?php
	// =====================================
	// ウィンドウスタイル
	// =====================================
	// 位置
	$style_align = '';
	$al_wnd = block_value( 'window-align' );
	switch ( $al_wnd ) {
		case 'left':
			$style_align = 'margin-right: auto;';
			break;
		case 'center':
			$style_align = 'margin-left: auto; margin-right: auto;';
			break;
		case 'right':
			$style_align = 'margin-left: auto;';
			break;
		default:
			;	// do nothing
			break;
	}

	// 最小高さ
	// 画像あり：表示する画像の高さ
	// 画像なし：テキスト5行（名前1行+台詞3行+α）分
	$style_minh = '';
	$style_imgw = '';	// ついでに画像スタイルも設定
	if ( block_value( 'chara-image' ) ) {
		// 選択画像のサイズ取得
		$url_img = wp_get_attachment_image_url( block_value( 'chara-image' ), 'post-thumbnail' );
		$size_img = get_image_width_and_height( $url_img );
		
		if ( $size_img ) {
			// 表示幅（最大値200）
			//	指定がなければオリジナルサイズ
			$w_disp_img = $size_img['width'];
			if ( block_value( 'image-width' ) ) {
				$w_disp_img = block_value( 'image-width' );
			}
			$w_disp_img = min( 200, $w_disp_img );
		
			$style_minh = sprintf(
				'min-height: %dpx;',
				( $w_disp_img / $size_img['width'] ) * $size_img['height']
			);
			$style_imgw = sprintf( 'style="width: %dpx;"', $w_disp_img );
		}
	}
	else{
		if ( $entry_content_line_hight = get_entry_content_line_hight() ) {
			$style_minh = sprintf(
				'min-height: %1fem;',
				( $entry_content_line_hight * 5 )	// 5行
			);
		}
	}
	
	$style_wnd = '';
	if ( $style_align || $style_minh ) {
		$style_wnd = sprintf(
			"style=\"%s %s\"",
			$style_minh, $style_align
		);
	}

	// =====================================
	// 台詞欄スタイル
	// =====================================
	// 台詞欄は最低3行確保
	$style_speech = '';
	if ( $entry_content_line_hight = get_entry_content_line_hight() ) {
		$style_speech = sprintf(
			"style=\"min-height: %1fem;\"",
			( $entry_content_line_hight * 3 )
		);
	}
	
	// =====================================
	// ミニサイズ
	// =====================================
	$class_mini = '';
	if ( block_value( 'minisize' ) ) {
		$class_mini = 'mini';
	}
?>

<div class="block-anaden-talkwnd <?php echo $class_mini; ?>" <?php echo $style_wnd; ?>>
	<div class="speech" <?php echo $style_speech; ?>>
		<?php if ( block_value( 'chara-name' ) ) : ?>
			<div class="chara-name-border">
				<div class="chara-name"><?php block_field( 'chara-name' ); ?></div>
			</div>
		<?php endif; ?>
		
		<?php if ( block_value( 'speech' ) ) : ?>
			<?php block_field( 'speech' ); ?>
		<?php else : ?>
			<p>&nbsp;</p>
		<?php endif; ?>
		
		<?php if ( block_value( 'chara-image' ) ) : ?>
			<img src="<?php block_field( 'chara-image' ); ?>" <?php echo $style_imgw; ?>>
		<?php endif; ?>
	</div>
</div>

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

上記↑コードの後に、下記↓コードを挿入してください。

.block-anaden-talkwnd {
	width: 660px;
	position: relative;
	padding: 0;
	margin: 0;
	box-sizing: content-box;
}
.block-anaden-talkwnd.mini {
	width: 520px;
}

.block-anaden-talkwnd .speech {
	position: absolute;
	left: 0px;
	bottom: 0px;
	box-sizing: content-box;
	width: 360px;
	padding: 1.2em 200px 0 100px;
	background-color: rgba(0, 0, 22, 0.75);
	border-top: 4px #dc6 ridge;
	background-blend-mode: multiply;
}
.block-anaden-talkwnd.mini .speech {
	width: 280px;
	padding-left: 40px;
}

.block-anaden-talkwnd .speech p {
	margin: 0;
	padding: 0;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,1);
}
.block-anaden-talkwnd.mini .speech p {
	font-size: smaller;
}

.block-anaden-talkwnd .chara-name-border {
	width: 160px;
	padding: 2px;
	position: absolute;
	top: -0.9em;
	left: 50px;
	background-color: #dc6;
	box-shadow: 0 -1px 1px #873 inset, 0 1px 1px #873 inset;
	clip-path: polygon( 0px 50%, 7px 0%, 153px 0%, 100% 50%, 153px 100%, 7px 100%, 0% 50% );
}
.block-anaden-talkwnd .chara-name {
	padding: 0 0.5em;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.6em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: #431;
	color: #dc6;
	text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1);
	clip-path: polygon( 0px 50%, 6px 0%, 150px 0%, 100% 50%, 150px 100%, 6px 100%, 0% 50% );
}

.block-anaden-talkwnd img {
	position: absolute;
	bottom: 0px;
	right: 0px;
}