Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

savi savivi

🎯
Focusing
View GitHub Profile
@savivi
savivi / pictspace_kakunin_01
Last active Dec 20, 2020
KB様お問い合わせの分確認用
View pictspace_kakunin_01
<!--見栄え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: #ff445a;">NEW</div>
<!--▼ここから四角-->
<p class="arasuji_txt" style="padding-right: 10px;">テキスト</p>
@savivi
savivi / pictspace_custom_stores_btn1
Created Oct 2, 2020
ピクスクからみてもOK!pictSPACE 店舗の注意事項などの装飾HTMLタグ
View pictspace_custom_stores_btn1
<!--委託先リンク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;">
@savivi
savivi / Square color
Last active Oct 2, 2020
ピクスクからみてもOK!pictSPACE 頒布物の装飾HTMLタグ4
View 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>
<!--▼ここから四角-->
@savivi
savivi / Semicircle color
Last active Oct 2, 2020
ピクスクからみてもOK!pictSPACE 頒布物の装飾HTMLタグ3
View Semicircle color
<!--NEWの半円の色を変える時-->
//NEWの文字直前にある★〜★で囲んでいるところがリボンの色指定部分です。お好きな色コードを入れてください。
<!--▼ここから半円-->
<div class="ribon_2" style="display: inline-block; width: 60px; height: 120px; line-height: 120px; position: absolute; top: -10px; right: 0px; z-index: 1; -webkit-border-radius: 100% 0 0 100% / 50%; -ms-border-radius: 100% 0 0 100% / 50%; border-radius: 100% 0 0 100% / 50%; 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>
<!--▲ここから半円-->
@savivi
savivi / Ribon color
Created Oct 2, 2020
ピクスクからみてもOK!pictSPACE 頒布物の装飾HTMLタグ2
View Ribon color
<!--NEWのリボンの色を変える時-->
//NEWの文字直前にある★〜★で囲んでいるところがリボンの色指定部分です。お好きな色コードを入れてください。
<!--▼ここからリボン-->
<div class="ribon_2" style="display: inline-block; width: 50%; max-width: 150px; float: right; margin-left: 10px; margin-right: -10px; position: relative; padding: 10px 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<span style="position: absolute; top: 100%; right: 0; border: none; border-bottom: solid 7px transparent; border-left: solid 10px #666666;"></span>
</div>
<!--▲ここからリボン-->
@savivi
savivi / Ribon color
Last active Oct 9, 2020
ピクスクからみてもOK!pictSPACE 頒布物の装飾HTMLタグ1
View Ribon color
<!--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>
<!--▲ここからリボン-->
@savivi
savivi / pictspace_custom_03
Created Sep 25, 2020
pictSPACEの「店舗の注意事項など」に横並びの通販委託先ボタンを設置するには。
View pictspace_custom_03
<div style="font-size: 14px; font-weight: bold; width: 100%; margin: 0 auto; text-align: center; font-size: 14px;">
<a href="★ここにURL★" target="_blank" style="width: 32%; display:inline-block; margin-right: 1%; padding: 10px; margin-bottom: 10px 0; background-color: #ffc107; text-decoration: none; color: #d82329; white-space: nowrap;">とらのあな</a>
<a href="★ここにURL★" target="_blank" style="width: 32%; display:inline-block; margin-right: 1%; padding: 10px 0; margin-bottom: 10px; background-color: #2958d4; text-decoration: none; color: #fff; white-space: nowrap;">フロマージュ</a>
<a href="★ここにURL★" target="_blank" style="width: 32%; display:inline-block; padding: 10px 0; margin-bottom: 10px; background-color: #dc4d50; text-decoration: none; color: #fff; white-space: nowrap;">BOOTH</a>
</div>
@savivi
savivi / pictspace_custom_02
Created Sep 25, 2020
pictSPACEに見出しを追加・外部委託先のリンクボタンを挿入する
View pictspace_custom_02
<legend>委託通販★見出しの内容★</legend>
<div style="font-size: 14px; font-weight: bold; width: 80%; max-width: 300px; margin: 0 auto; text-align: center; font-size: 18px;">
<a href="★ここにURL★" target="_blank" style="display: block; padding: 10px; margin-bottom: 10px; background-color: #ffc107; text-decoration: none; color: #d82329;">とらのあな</a>
<a href="★ここにURL★" target="_blank" style="display: block; padding: 10px; margin-bottom: 10px; background-color: #2958d4; text-decoration: none; color: #fff;">フロマージュ</a>
<a href="★ここにURL★" target="_blank" style="display: block; padding: 10px; margin-bottom: 10px; background-color: #dc4d50; text-decoration: none; color: #fff;">BOOTH</a>
</div>
@savivi
savivi / pictspace_custom_01
Last active Sep 25, 2020
pictSPACEの送料説明部分にTABLEタグを追加する
View pictspace_custom_01
<table style="font-size:14px; color: #000; width: 100%;">
<caption>【クリックポストの場合】</caption>
<tr>
<th style="background-color: #e3f2fd; border: 1px solid #ddd; font-weight: normal; padding: 10px; text-align: center;">匿名配送</th>
<td style="text-align: center; border: 1px solid #ddd; padding: 10px;">×</td>
</tr>
<tr>
<th style="background-color: #e3f2fd; border: 1px solid #ddd; font-weight: normal; padding: 10px; text-align: center;">ポスト投函</th>
<td style="text-align: center; border: 1px solid #ddd; padding: 10px;">○</td>
</tr>