ピクスクからみてもOK！pictSPACE 頒布物の装飾HTMLタグ4

pictspace_custom_07

<!--見栄え4-->
<div class="box4" style="display: block; position: relative; margin-bottom: 20px; padding: 10px 60px 20px 10px; background: #f9f9f9; -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14); -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14); -webkit- box-sizing: border-box; -ms- box-sizing: border-box; box-sizing: border-box;">
	<!--▼ここから四角-->
	<div class="ribon_2" style="display: inline-block; width: 60px; height: 80px; line-height: 80px; position: absolute; top: -10px; right: -10px; z-index: 1; padding: 0; font-size: 1.3rem; font-weight: bold; color: #fff; -webkit-text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -ms-text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); text-align: center; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); background-color: #2196f3;">NEW</div>
	<!--▼ここから四角-->
	<p class="arasuji_txt" style="padding-right: 10px;">ここには説明文が入ります。いい感じの文章を入れます。ここには説明文が入ります。いい感じの文章を入れます。ここには説明文が入ります。いい感じの文章を入れます。</p>
	<!--▼ここからタグ-->
	<div class="tag" style="margin-bottom: 10px; font-size: 1.2rem;">
		<span style="display: inline-block; padding: 5px; background-color: #e3f2fd; border-radius: .25em; margin: 10px 10px 0 0; border: 1px solid #ddd;">CP名</span>
		<span style="display: inline-block; padding: 5px; background-color: #e3f2fd; border-radius: .25em; margin: 10px 10px 0 0; border: 1px solid #ddd;">全年齢</span>
		<span style="display: inline-block; padding: 5px; background-color: #e3f2fd; border-radius: .25em; margin: 10px 10px 0 0; border: 1px solid #ddd;">漫画</span>
		<span style="display: inline-block; padding: 5px; background-color: #e3f2fd; border-radius: .25em; margin: 10px 10px 0 0; border: 1px solid #ddd;">A5/52P</span>
		<span style="display: inline-block; padding: 5px; background-color: #e3f2fd; border-radius: .25em; margin: 10px 10px 0 0; border: 1px solid #ddd;">既刊</span>
	</div>
	<!--▲ここまでタグ-->
</div>
<!--▼ここから委託先リンク-->
<div class="itaku_box" style="clear: both;">
	<div style="font-size: 1.2rem; font-weight: bold; width: 100%; margin: 0 auto; text-align: center; -webkit-box-sizing: border-box; -ms-box-sizing: box-sizing: border-box; border-box; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-line-pack: justify; align-content: space-between;">
		<a href="★ここにとらURL★" target="_blank" style="padding: 10px 0; margin-right: 1%; margin-bottom: 10px; background-color: #ffc107; text-decoration: none; color: #d82329; white-space: nowrap; -ms-flex-preferred-size: auto; flex-basis: 33%;">とらのあな</a>
		<a href="★ここにメロンURL★" target="_blank" style="padding: 10px 0; margin-right: 1%; margin-bottom: 10px; background-color: #2958d4; text-decoration: none; color: #fff; white-space: nowrap; -ms-flex-preferred-size: auto; flex-basis: 33%;">フロマージュ</a>
		<a href="★ここにBOOTHURL★" target="_blank" style="padding: 10px 0; margin-bottom: 10px; background-color: #dc4d50; text-decoration: none; color: #fff; white-space: nowrap; -ms-flex-preferred-size: auto; flex-basis: 33%;">BOOTH</a>
	</div>
	<!--▼ここから料金表-->
	<table style="font-size: 1.2rem; color: #000; width: 100%; margin-top: 10px; background-color: #fff;">
		<tbody>
			<!--▼1行-->
			<tr>
				<th style="background-color: #e3f2fd; border: 1px solid #ddd; font-weight: normal; padding: 10px;">とらのあな</th>
				<td style="text-align: left; border: 1px solid #ddd; padding: 10px;">税込986円+送料</td>
			</tr>
			<!--▲1行-->
			<!--▼1行-->
			<tr>
				<th style="background-color: #e3f2fd; border: 1px solid #ddd; font-weight: normal; padding: 10px;">フロマージュ</th>
				<td style="text-align: left; border: 1px solid #ddd; padding: 10px;">税込880円+送料</td>
			</tr>
			<!--▲1行-->
			<!--▼1行-->
			<tr>
				<th style="background-color: #e3f2fd; border: 1px solid #ddd; font-weight: normal; padding: 10px;">BOOTH</th>
				<td style="text-align: left; border: 1px solid #ddd; padding: 10px;">税込880円+送料</td>
			</tr>
			<!--▲1行-->
			<!--▼1行-->
			<tr>
				<th style="background-color: #e3f2fd; border: 1px solid #ddd; font-weight: normal; padding: 10px;">pictSPACE</th>
				<td style="text-align: left; border: 1px solid #ddd; padding: 10px;">1冊+送料計1148円</td>
			</tr>
			<!--▲1行-->
		</tbody>
	</table>
	<!--▲ここから料金表-->
</div>
<!--▲ここから委託先リンク-->

Square color

<!--NEWの四角の色を変える時-->
//NEWの文字直前にある★〜★で囲んでいるところがリボンの色指定部分です。お好きな色コードを入れてください。
	<!--▼ここから四角-->
	<div class="ribon_2" style="display: inline-block; width: 60px; height: 80px; line-height: 80px; position: absolute; top: -10px; right: -10px; z-index: 1; padding: 0; font-size: 1.3rem; font-weight: bold; color: #fff; -webkit-text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -ms-text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); text-align: center; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); background-color: #★2196f3★;">NEW</div>
	<!--▼ここから四角-->