共通テンプレート
コメント
<div class="sold-out">
<p class="sd-01">×こちらの商品は完売しました。</p>
<p class="sd-02">その他のハロウィンティッシュはこちら！</p>
<ul class="sd-03">
<li><a href="https://www.popgallery.jp/shop/g/gXL4-0008/">XL4-0008 ハロウィン ティッシュ（１２０Ｗ）</a></li>
<li><a href="https://www.popgallery.jp/shop/g/gXL4-0009/">XL4-0009 ハロウィン ティッシュ（４０Ｗ）</a></li>
</ul>
</div>
<div class="sold-out"><p class="sd-01">こちらの商品は8月中旬入荷予定です。</p>
<p class="sd-02">お急ぎの方はこちらの類似商品をご覧ください</p>
<ul class="sd-03">
<li><a href="https://www.popgallery.jp/shop/g/gDII0080LB/">３Ｍ伸縮式ポール ライトブルー</a></li>
</ul>
</div>
▼季節 商品用
2015年1月中旬頃入荷
こちらの商品は2015年1月中旬以降の出荷となります。
納品日指定をされる場合はご注意下さい。
<div class="sold-out"><p class="sd-01">2015年1月中旬頃入荷</p>
<p class="sd-02">こちらの商品は2015年1月中旬以降の出荷となります。<br>
納品日指定をされる場合はご注意下さい。</p>
</div>
▼定番・売れ筋 商品用
申し訳ございません。
こちらの商品は欠品しております。
次回の入荷は8月上旬頃の予定です。
<div class="sold-out"><p class="sd-01">申し訳ございません。<br>こちらの商品は欠品しております。<br>
次回の入荷は8月上旬頃の予定です。</p></div>
この商品におすすめの取付器具はこちら
<div class="recom"><p class="rm-01">この商品におすすめの取付器具はこちら</p>
<ul class="rm-02-">
<li><a href="https://www.popgallery.jp/shop/g/gKB8-0210/">KB8-0210 フロアスタンド</a></li>
<li><a href="https://www.popgallery.jp/shop/g/gKB8-0211/">KB8-0211 フロアスタンド（黒）</a></li>
</ul>
</div>
この商品におすすめの取付器具はこちら
<div class="recom"><p class="rm-01">この商品におすすめの取付器具はこちら</p>
<ul class="rm-02">
<li><a href="https://www.popgallery.jp/shop/g/gKB8-0210/" target="_blank">KB8-0210 フロアスタンド</a></li>
<li><a href="https://www.popgallery.jp/shop/g/gKB8-0211/" target="_blank">KB8-0211 フロアスタンド（黒）</a></li>
</ul>
</div>
こちらの商品は在庫限りで販売終了になります。
価格が安くなった新しいモデルはこちら。
<div class="recom"><p class="rm-01">こちらの商品は在庫限りで販売終了になります。<br>価格が安くなった新しいモデルはこちら。</p>
<ul class="rm-02-">
<li><a href="https://www.popgallery.jp/shop/g/gOK-DB00042/">OK-DB00042 マグネットフッククリア 白</a></li>
</ul>
</div>
こちらの商品は「ミニのぼり」のみとなります。
（ミニのぼりスタンド は別売りです）
<div class="heads-up">
<p class="hu-01">こちらの商品は「ミニのぼり」のみとなります。</p>
<p class="hu-02">（<a href="#">ミニのぼりスタンド</a> は別売りです）</p>
</div>
リンク
|
<div class="cmt-link"> <ul> <li><a href="https://www.popgallery.jp/shop/contents3/guide.aspx#guide_04a" target="_blank">納期について</a></li> <li><a href="https://www.popgallery.jp/shop/contents3/guide.aspx#guide_03x" target="_blank">支払方法について</a></li> <li><a href="https://www.popgallery.jp/shop/contents3/guide.aspx#guide_03d" target="_blank">領収書について</a></li><br /> <li><a href="https://www.popgallery.jp/shop/contents3/guide.aspx#guide_04b" target="_blank">送料について</a></li> <li><a href="https://www.popgallery.jp/shop/contents3/guide.aspx#guide_02b" target="_blank">在庫・アイコンについて</a></li> </ul> </div> |
<div class="lst1">
<ul>
<li><a href="#">リスト</a></li>
<li><a href="#">リスト</a></li>
<li><a href="#">リスト</a></li>
</ul>
</div>
<div class="lst1 blank">
<ul>
<li><a href="#1" target="_blank">リスト</a></li>
<li><a href="#2" target="_blank">リスト</a></li>
<li><a href="#3" target="_blank">リスト</a></li>
</ul>
</div>
<div class="lst2">
<ul>
<li><a href="#1">リスト</a></li>
<li><a href="#2">リスト</a></li>
<li><a href="#3">リスト</a></li>
</ul>
</div>
<div><a name="1"></a></div>
<p class="lnk1"><a href="#">●●●</a></p>
<p class="lnk1"><a href="#" target="_blank">●●●</a></p>
<p class="lnk2"><a href="#">検索結果へのリンク</a></p>
<p class="lnk-bl1"><a href="#" target="_blank">別ページで開くリンク</a></p>
動画でチェック！
<p class="move-s">動画でチェック！</p><div class="btn_more1"><a href="#">●●●を もっと見る（00商品）</a></div>
<div class="btn_1"><a href="#">●●●</a></div>
<p class="ptop1"><a href="javascript:scrollToTop()">▲ページトップへ</a></p>
<a href="javascript:history.go(-1)" ><img src="/img/cmn/cart_btn_back_off.gif" alt="前画面へ戻る" name="btn-back" width="225" height="47" border="0"></a>
</div>
関連特集
<div class="bnr-link">
<a href="/shop/e/e-Xmas/"><img src="/img/cp/Xmas/Xmas-bnr.jpg" alt="クリスマス販促特集を見る" /></a>
<div class="lst1">
<ul>
<li><a href="/shop/e/eXmas-tpe/">クリスマスの「タペストリー」カテゴリーはこちら</a></li>
<li><a href="/shop/c/c2WItapes/">その他「冬のタペストリー」はこちら</a></li>
</ul>
</div>
</div>
<p class="ttl2">関連特集</p>
<div class="bnr-link">
<a href="/shop/e/e-Illum/"><img src="/img/cp/Illumination/IL_bnr.jpg" alt="イルミネーション特集を見る" /></a>
</div>
初夏の装飾カテゴリー
タイトル
h3（見出し3）
<h3>●</h3>h4（見出し4）
<h4>●</h4>h5（見出し5）
<h5>●</h5>h6（見出し6）
<h6>●</h6>汎用タイトル1は、 class="ttl1"で設定
汎用のコメントです。class="cmt YE"で設定します。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。
<h3 class="ttl1">●●●</h3><h4 class="cmt YE">●●●</h4>
春用 タイトル class="ev-ttl SPt"で設定
春用のコメントです。class="cmt SP"で設定します。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。
<h3 class="ev-ttl SPt">●●●</h3><h4 class="cmt SP">●●●</h4>
初夏用 タイトル class="ev-ttl ASt"で設定
初夏用のコメントです。class="cmt AS"で設定します。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。
<h3 class="ev-ttl ASt">●●●</h3><h4 class="cmt AS">●●●</h4>
盛夏用 タイトル class="ev-ttl SUt"で設定
盛夏用のコメントです。class="cmt SU"で設定します。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。
<h3 class="ev-ttl SUt">●●●</h3><h4 class="cmt SU">●●●</h4>
秋用 タイトル class="ev-ttl AUt"で設定
秋用のコメントです。class="cmt AU"で設定します。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。
<h3 class="ev-ttl AUt">●●●</h3><h4 class="cmt AU">●●●</h4>
冬用 タイトル class="ev-ttl WIt"で設定
冬用のコメントです。class="cmt WI"で設定します。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。コメントです。
<h3 class="ev-ttl WIt">●●●</h3><h4 class="cmt WI">●●●</h4>
冬用（寒色系） タイトル class="ev-ttl WCI"で設定
<h3 class="ev-ttl WCI">●●●</h3>冬用（暖色系） タイトル class="ev-ttl WWI"で設定
<h3 class="ev-ttl WWI">●●●</h3>クリスマス用 タイトル class="ev-ttl HW"で設定
<h3 class="ev-ttl xmas">●●●</h3>イルミネーション用 タイトル class="ev-ttl HW"で設定
<h3 class="ev-ttl IL">●●●</h3>お正月用 タイトル class="ev-ttl HW"で設定
<h3 class="ev-ttl ny">●●●</h3>ハロウィン用 タイトル class="ev-ttl HW"で設定
<h3 class="ev-ttl HW">●●●</h3>汎用タイトル2は、 class="ttl2"で設定
<p class="ttl2">●●●</p>汎用タイトル3は、 class="ttl3"で設定
<p class="ttl3">●●●</p>テキスト
class="cmt1"（コメント1）というクラスを付けると、このような赤枠のついたボックスができます。強調したい文字は<strong>で囲むと、太字の赤文字になります。この場合はpタグに設定していますが、他の見出しタグ等にも
<h3 class="cmt1">●●●</h3>などとしてで適用できます。
class="cmt2"というクラス。強調青字。画像を入れると右側に余白。
class="cps1"は、注釈などに。フォントサイズ13pxです。【キャプション1】
<p class="cps1">●●●</p>class="cps2"は、注釈などに。フォントサイズ11pxです。【キャプション2】
<p class="cps2">●●●</p>テーブル
| ●●● | ○○○ | ○○○ |
|---|---|---|
| ●●● | ○○○ | ○○○ |
<tr><th>●●●</th><td>○○○</td><td>○○○</td></tr>
<tr><th>●●●</th><td>○○○</td><td>○○○</td></tr>
</table>
| ●●● | ○○○ | ○○○ |
|---|---|---|
| ●●● | ○○○ | ○○○ |
<tr><th>●●●</th><td>○○○</td><td>○○○</td></tr>
<tr><th>●●●</th><td>○○○</td><td>○○○</td></tr>
</table>
CSS
○○○○○○○○○○○○○○○○○○○○○○○○●●●●● ○○○○○○○○○○○○○○○○○○○○○○○○
<div id="pnavi"><a href="https://www.popgallery.jp/">トップ</a> > ●●特集</div>
<h2 style="position: relative;">
<img src="../../../img/cp/ev-ttl/○○○/○○○.jpg" alt="●●特集" width="730" height="200" />
<p style="position: absolute; left:30px; top:120px; z-index:1; width: 348px; height: 75px; font-size: 12px; color: #222222; font-weight: normal;">○○○○○○○○○○○○○<strong><font color="#FF0000">●●●</font></strong>○○○○○○○○○○○○○</p>
</h2>
HTML
| 空 空 |   | 空 空 | | •行頭 | • | 中·中 | · |
|---|
| → | → | ← | ← | ↑ | ↑ | ↓ | ↓ | ⇒ | ⇒ | ⇐ | ⇐ | © | © |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| > | > | < | < | » | » | « | « | & | & | … | … | " | " |
| タイトル | |
| フォントサイズ1 | フォントサイズ2 |
| フォントサイズ3 | フォントサイズ4 |
| フォントサイズ5 | |
HTMLの特殊文字
http://e-words.jp/p/r-htmlentity.html
検索サイトに表示させたくないページは<HEAD>セクションに下記タグを挿入
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">