Last active
April 9, 2023 13:16
-
-
Save savivi/65788a7663a8a94000d6eb22b04958e5 to your computer and use it in GitHub Desktop.
ピクスクからみてもOK!pictSPACE 頒布物の装飾HTMLタグ1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--見栄え1--> | |
<div class="box1" style="display: block; position: relative; margin-bottom: 20px; padding: 10px 15px 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 style="position: absolute; top: -6px; right: -6px; width: 89px; height: 91px; overflow: hidden;"> | |
<span style="display: inline-block; position: absolute; padding: 7px 0; left: -23px; top: 22px; width: 160px; text-align: center; font-size: 18px; line-height: 16px; 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); letter-spacing: 0.05em; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); background-color: #2196f3;">NEW</span> | |
</div> | |
<!--▲ここからリボン--> | |
<!--▼ここからタグ--> | |
<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> | |
<!--▲ここまでタグ--> | |
<p class="arasuji_txt">ここには説明文が入ります。いい感じの文章を入れます。ここには説明文が入ります。いい感じの文章を入れます。ここには説明文が入ります。いい感じの文章を入れます。</p> | |
</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> | |
<!--▲ここから委託先リンク--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--NEWのリボンの色を変える時--> | |
//NEWの文字直前にある★〜★で囲んでいるところがリボンの色指定部分です。お好きな色コードを入れてください。 | |
<!--▼ここからリボン--> | |
<div style="position: absolute; top: -6px; right: -6px; width: 89px; height: 91px; overflow: hidden;"> | |
<span style="display: inline-block; position: absolute; padding: 7px 0; left: -23px; top: 22px; width: 160px; text-align: center; font-size: 18px; line-height: 16px; 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); letter-spacing: 0.05em; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); background-color: #★2196f3★;">NEW</span> | |
</div> | |
<!--▲ここからリボン--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment