スタイルガイド
もくじ
h2の見出し
h2の見出しです
h3の見出し
h3の見出しです
h4の見出し
h4の見出しです
ボックスデザイン
ボックス1(シンプル
|
1 2 3 |
<div class="b_flame01"> <p>ボックス1(シンプル</p> </div> |
ボックス2(影あり
|
1 2 3 |
<div class="b_flame04"> <p>ボックス2(影あり</p> </div> |
ボックス3(陰のある
|
1 2 3 |
<div class="b_flame13"> <p>ボックス3(陰のある</p> </div> |
ボックス4(ドット線
|
1 2 3 |
<div class="b_flame20"> <p>ボックス4(ドット線</p> </div> |
ボックス5(繊細二重線
|
1 2 3 |
<div class="b_sbox2"> <p>ボックス5(繊細二重線</p> </div> |
ボックス6(左側ライン
|
1 2 3 |
<div class="b_sbox6"> <p>ボックス6(左側ライン</p> </div> |
ボックス7(立体枠
|
1 2 3 |
<div class="b_sbox8"> <p>ボックス7(立体枠</p> </div> |
ボックス8(白抜き
|
1 2 3 |
<div class="b_sbox9"> <p>ボックス8(白抜き</p> </div> |
ボックス9(ビジネス
|
1 2 3 |
<div class="b_sbox10"> <p>ボックス9(ビジネス</p> </div> |
ランキング用テーブル
同名のボタンあり
|
1 2 3 4 5 6 7 8 9 10 |
<div class="goods-ran"> <table class="goods-rank"><tr><th></th><th></th><th></th></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table></div> |
ランキング1～3位
ランキング1位
同名のボタンあり
ランキング１位（ここにパッケージ画像）
- ポイント1
- ポイント2
- ポイント3
- ポイント4
- ポイント5
| 総合評価 |
|
|---|---|
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="ranking01"> <div class="ranking-title01"><img class="ranking-number" src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/rank01.png">ランキング１位</div> <div class="clearfix"> <div class="ranking-img01">（ここにパッケージ画像）</div> <div class="ranking-info01"><div class="box2"> <p><ul><li>ポイント1</li><li>ポイント2</li><li>ポイント3</li><li>ポイント4</li><li>ポイント5</li></ul></p> </div></div> </div> </div> <table class="cps-table03"> <tbody> <tr> <th>総合評価</th> <td class="rankinginfo"><div class="wrap"> <span class="rate rate0"></span> <span class="rate rate1"></span> <span class="rate rate1-5"></span> <span class="rate rate2"></span> <span class="rate rate2-5"></span> <span class="rate rate3"></span> <span class="rate rate3-5"></span> <span class="rate rate4"></span> <span class="rate rate4-5"></span> <span class="rate rate5"></span> </div></td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> </tbody> </table> |
ランキング2位
同名のボタンあり
ランキング２位（ここにパッケージ画像）
- ポイント1
- ポイント2
- ポイント3
- ポイント4
- ポイント5
| 総合評価 |
|
|---|---|
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="ranking02"> <div class="ranking-title02"><img class="ranking-number" src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/rank02.png">ランキング２位</div> <div class="clearfix"> <div class="ranking-img02">（ここにパッケージ画像）</div> <div class="ranking-info02"><div class="box2"> <p><ul><li>ポイント1</li><li>ポイント2</li><li>ポイント3</li><li>ポイント4</li><li>ポイント5</li></ul></p> </div></div> </div> </div> <table class="cps-table03"> <tbody> <tr> <th>総合評価</th> <td class="rankinginfo"><div class="wrap"> <span class="rate rate0"></span> <span class="rate rate1"></span> <span class="rate rate1-5"></span> <span class="rate rate2"></span> <span class="rate rate2-5"></span> <span class="rate rate3"></span> <span class="rate rate3-5"></span> <span class="rate rate4"></span> <span class="rate rate4-5"></span> <span class="rate rate5"></span> </div></td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> </tbody> </table> |
ランキング3位
同名のボタンあり
ランキング３位（ここにパッケージ画像）
- ポイント1
- ポイント2
- ポイント3
- ポイント4
- ポイント5
| 総合評価 |
|
|---|---|
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="ranking03"> <div class="ranking-title03"><img class="ranking-number" src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/rank03.png">ランキング３位</div> <div class="clearfix"> <div class="ranking-img03">（ここにパッケージ画像）</div> <div class="ranking-info03"><div class="box2"> <p><ul><li>ポイント1</li><li>ポイント2</li><li>ポイント3</li><li>ポイント4</li><li>ポイント5</li></ul></p> </div></div> </div> </div> <table class="cps-table03"> <tbody> <tr> <th>総合評価</th> <td class="rankinginfo"><div class="wrap"> <span class="rate rate0"></span> <span class="rate rate1"></span> <span class="rate rate1-5"></span> <span class="rate rate2"></span> <span class="rate rate2-5"></span> <span class="rate rate3"></span> <span class="rate rate3-5"></span> <span class="rate rate4"></span> <span class="rate rate4-5"></span> <span class="rate rate5"></span> </div></td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> <tr> <th>項目名</th> <td class="rankinginfo">ここに説明文を入力してください。</td> </tr> </tbody> </table> |
画像
画像に影をつける
imgのclassに『sdw1』を追加すると画像に影が付きます。
影の大きさや影の色なども変更可能なので変更したい時はご連絡ください。
【CSS】box-shadowで影をつける方法とサンプル集
https://saruwakakun.com/html-css/basic/box-shadow
https://saruwakakun.com/html-css/basic/box-shadow
※影なし
※影あり
ボタン
表用ボタン
同名のボタンあり
|
1 |
<a class="btn btn--blue btn--cubic">公式ページ ></a> |
メイン訴求ボタン（ブルー）
同名のボタンあり
|
1 |
<div class="btn-wrap"><a href="" class="btn btn-cb" target="_blank"><span class="btn-offi">公式ページはコチラ！</span><br><i class="far fa-file-alt"></i>【●●】●●を試してみる</a></div> |
メイン訴求ボタン（オレンジ）
同名のボタンあり
|
1 |
<div class="btn-wrap"><a href="" class="btn btn-c" target="_blank"><span class="btn-offi">公式ページはコチラ！</span><br><i class="far fa-file-alt"></i>【●●】●●を試してみる</a></div> |
メイン訴求ボタン（グリーン）
同名のボタンあり
|
1 |
<div class="btn-wrap"><a href="" class="btn btn-cg" target="_blank"><span class="btn-offi">公式ページはコチラ！</span><br><i class="far fa-file-alt"></i>【●●】●●を試してみる</a></div> |
メイン訴求ボタン（ピンク）
同名のボタンあり
|
1 |
<div class="btn-wrap"><a href="" class="btn btn-cp" target="_blank"><span class="btn-offi">公式ページはコチラ！</span><br><i class="far fa-file-alt"></i>【●●】●●を試してみる</a></div> |
ボタンや画像にアニメーション効果をつける
『【CSS】ぷるぷる動くボタンなど、コピペで使えるアニメーションボタン10種類』
↑こちらの記事内にあるアニメーションは全て追加しました
ぷるぷる動く①
classに『purupuru』を追加するとアニメーションします
ぷるぷる動く②
classに『purupuru2』を追加するとアニメーションします
上下に揺れる
classに『yureru-j』を追加するとアニメーションします
左右に揺れる
classに『yureru-s』を追加するとアニメーションします
上下左右に揺れる
classに『yureru-js』を追加するとアニメーションします
もっちり動く
classに『mocchiri』を追加するとアニメーションします
ぺこぺこ凹む
classに『pekopeko』を追加するとアニメーションします
ぱつんと跳ねる
classに『patsun』を追加するとアニメーションします
ぶるりと震える
classに『bururi』を追加するとアニメーションします
ドキドキしてる
classに『dokidoki』を追加するとアニメーションします
◎○△画像
画像：◎
同名のボタンあり
※ランキング用テーブル内で使用時は50px×50pxに変化する
※それ以外だと300px×300px
|
1 |
<img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/nijyuumaru300.png" alt="" width="300" height="300" class="nijyuumaru alignnone size-full wp-image-237" /> |
画像：○
同名のボタンあり
※ランキング用テーブル内で使用時は50px×50pxに変化する
※それ以外だと300px×300px
|
1 |
<img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/maru300.png" alt="" width="300" height="300" class="maru alignnone size-full wp-image-235" /> |
画像：△
同名のボタンあり
※ランキング用テーブル内で使用時は50px×50pxに変化する
※それ以外だと300px×300px
|
1 |
<img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/sankaku300.png" alt="" width="300" height="300" class="sankaku alignnone size-full wp-image-236" /> |
口コミ
男性の口コミ1～3
同名のボタンあり
●テキスト●
|
1 |
<div class="talk"><figure class="talk-Limg"><img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/man1.png" alt="男性の口コミ1"/><figcaption class="talk-imgname">男性の口コミ</figcaption></figure><div class="talk-Ltxt"><p class="talk-text">●テキスト●</p></div></div> |
●テキスト●
|
1 |
<div class="talk"><figure class="talk-Limg"><img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/man2.png" alt="男性の口コミ2"/><figcaption class="talk-imgname">男性の口コミ</figcaption></figure><div class="talk-Ltxt"><p class="talk-text">●テキスト●</p></div></div> |
●テキスト●
|
1 |
<div class="talk"><figure class="talk-Limg"><img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/man3.png" alt="男性の口コミ3"/><figcaption class="talk-imgname">男性の口コミ</figcaption></figure><div class="talk-Ltxt"><p class="talk-text">●テキスト●</p></div></div> |
女性の口コミ1～3
同名のボタンあり
●テキスト●
|
1 |
<div class="talk"><figure class="talk-Limg"><img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/woman1.png" alt="女性の口コミ1"/><figcaption class="talk-imgname">女性の口コミ</figcaption></figure><div class="talk-Ltxt"><p class="talk-text">●テキスト●</p></div></div> |
●テキスト●
|
1 |
<div class="talk"><figure class="talk-Limg"><img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/woman2.png" alt="女性の口コミ2"/><figcaption class="talk-imgname">女性の口コミ</figcaption></figure><div class="talk-Ltxt"><p class="talk-text">●テキスト●</p></div></div> |
●テキスト●
|
1 |
<div class="talk"><figure class="talk-Limg"><img src="https://p-ec.com/wp-content/uploads/sites/26/2020/10/woman3.png" alt="女性の口コミ3"/><figcaption class="talk-imgname">女性の口コミ</figcaption></figure><div class="talk-Ltxt"><p class="talk-text">●テキスト●</p></div></div> |
中央寄せ
中央寄せ
|
1 |
<div class="mannaka">中央寄せ</div> |
段落余白
1～10まで用意しています
段落余白1 この下
段落余白1 この上
|
1 |
<hr class="mb1" /> |
↓
2・3もあります
↓
段落余白4 この下
段落余白4 この上
|
1 |
<hr class="mb4" /> |
↓
5・6もあります
↓
段落余白7 この下
段落余白7 この上
|
1 |
<hr class="mb7" /> |
↓
8・9もあります
↓
段落余白10 この下
段落余白10 この上
|
1 |
<hr class="mb10" /> |
フォント装飾
[F18px]～[F24px]ボタンあり
フォントサイズ18px
|
1 |
<span class="fontss18">フォントサイズ18px</span> |
フォントサイズ20px
|
1 |
<span class="fontss20">フォントサイズ20px</span> |
フォントサイズ22px
|
1 |
<span class="fontss22">フォントサイズ22px</span> |
フォントサイズ24px
|
1 |
<span class="fontss24">フォントサイズ24px</span> |
マーカー
同名のボタンあり
黄色マーカー
|
1 |
<span class="marker_yellow_zen">黄色マーカー</span> |
下半分黄色マーカー
|
1 |
<span class="marker_yellow">下半分黄色マーカー</span> |
下半分ピンクマーカー
|
1 |
<span class="marker_pink">下半分ピンクマーカー</span> |
色替え：赤
|
1 |
<span class="color_ch_red">色替え：赤</span> |
色替え：赤大
|
1 |
<span class="color_ch_redbb">色替え：赤大</span> |
色替え：青
|
1 |
<span class="color_ch_blue">色替え：青</span> |
色替え：青大
|
1 |
<span class="color_ch_bluebb">色替え：青大</span> |
色替え：緑
|
1 |
<span class="color_ch_green">色替え：緑</span> |
色替え：緑大
|
1 |
<span class="color_ch_greenbb">色替え：緑大</span> |
色替え：紫
|
1 |
<span class="color_ch_puple">色替え：紫</span> |
色替え：紫大
|
1 |
<span class="color_ch_puplebb">色替え：紫大</span> |
色替え：オレンジ
|
1 |
<span class="color_ch_orange">色替え：オレンジ</span> |
色替え：オレンジ大
|
1 |
<span class="color_ch_orangebb">色替え：オレンジ大</span> |