Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ピクスクからみてもOK!pictSPACE 店舗の注意事項などの装飾HTMLタグ
<!--委託先リンク1つ+料金表-->
//横幅を変える時は【flex-basis: 50%;】のパーセンテージを変えます。
<!--▼ここから委託先リンク 1つバージョン-->
<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: 50%;">とらのあな</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;">pictSPACE</th>
<td style="text-align: left; border: 1px solid #ddd; padding: 10px;">1冊+送料計1148円</td>
</tr>
<!--▲1行-->
</tbody>
</table>
<!--▲ここから料金表-->
</div>
<!--▲ここから委託先リンク-->
<!--委託先リンク2つ+料金表-->
//横幅を変える時は【flex-basis: 50%;】のパーセンテージを変えます。
<!--▼ここから委託先リンク 2つバージョン-->
<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: 50%;">とらのあな</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: 50%;">フロマージュ</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;">pictSPACE</th>
<td style="text-align: left; border: 1px solid #ddd; padding: 10px;">1冊+送料計1148円</td>
</tr>
<!--▲1行-->
</tbody>
</table>
<!--▲ここから料金表-->
</div>
<!--▲ここから委託先リンク-->
<!--委託先リンク3つ+料金表-->
//横幅を変える時は【flex-basis: 50%;】のパーセンテージを変えます。
<!--▼ここから委託先リンク-->
<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>
<!--▲ここから委託先リンク-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment