賢威7にバージョンアップして多彩な装飾タグが増えたので、ホームページ作りやブログ記事の表現方法が増えました。html版のスタイルガイドのソースコードを見ながらでは大変なので、備忘録として作ってみました。まだ載せていない装飾タグもあるのですが、私自身が使いそうにないので省きました。(^^ゞ
賢威7.0ビューティー版の表示です。タグの記述方法は同じだと思いますが、コーポレート版・プリティ版・クール版ではアイコンおよび表示が変わる可能性があります。
多段カラム
4カラム
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
|
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 |
<div class="col4-wrap"> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> </div> <div class="col4-wrap"> <div class="col col_2of4"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> </div> <div class="col4-wrap"> <div class="col col_3of4"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> </div> |
3カラム
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="col3-wrap"> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> </div> <div class="col3-wrap"> <div class="col col_2of3"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> </div> |
2カラム
テキストが入ります。
テキストが入ります。
|
1 2 3 4 5 6 7 8 |
<div class="col2-wrap"> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> </div> |
画像とテキストの組み合わせ
画像の上にテキストを配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="col-wrap col3-wrap col-onimage"> <div class="col m20-b border"> <a href="#"> <img class="w100" src="../■■.jpg" alt="■" width="242" height="176"> </a> <p class="text-onimage"><a href="#">テキスト</a></p> </div> <div class="col m20-b border"> <a href="#"> <img class="w100" src="../□□.jpg" alt="□" width="242" height="176"> </a> <p class="text-onimage"><a href="#">テキスト</a></p> </div> <div class="col m20-b border"> <a href="#"> <img class="w100" src="../◆◆.jpg" alt="◆" width="242" height="176"> </a> <p class="text-onimage"><a href="#">テキスト</a></p> </div> </div> |
背景画像の上にテキストを配置
テキストが入りますテキストが入りますテキストが入りますテキストが入ります
テキストが入りますテキストが入りますテキストが入りますテキストが入ります
テキストが入りますテキストが入りますテキストが入りますテキストが入ります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="col-wrap col3-wrap col-onimage02"> <div class="col m20-b border" style="background-image: url(../▲▲.jpg);"> <a href="./customer/"> <p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p> </a> </div> <div class="col m20-b border" style="background-image: url(../△△.jpg);"> <a href="./customer/"> <p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p> </a> </div> <div class="col m20-b border" style="background-image: url(../▼▼.jpg);"> <a href="./customer/"> <p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p> </a> </div> </div> |
Q&A
- ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。 - ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl class="qa-list"> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> </dl> |
フロー図
-
手続きの流れに関する文章が入ります
流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。
-
手続きの流れに関する文章が入ります
流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。
-
手続きの流れに関する文章が入ります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ol class="flow-chart"> <li class="odd"> <div class="process-box rc12"> <p class="f12em b m0-b">手続きの流れに関する文章が入ります</p> <p class="m0-b">流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p> </div> </li> <li class="even"> <div class="process-box rc12"> <p class="f12em b m0-b">手続きの流れに関する文章が入ります</p> <p class="m0-b">流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p> </div> </li> <li class="odd"> <div class="process-box rc12 end"> <p class="f12em b m0-b">手続きの流れに関する文章が入ります</p> </div> </li> </ol> |
画像の装飾
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<div class="col2-wrap al-c"> <div class="col"> <figure> <img src="../●●.jpg" alt="●" width="300" height="300"> <figcaption class="al-c">ノーマル</figcaption> </figure> </div> <div class="col" style="border:0;"> <figure> <img class="shadow" src="../●●.jpg" alt="●" width="300" height="300"> <figcaption class="al-c">影付き</figcaption> </figure> </div> </div> <div class="col2-wrap al-c"> <div class="col" style="border:0;"> <figure> <img class="shadow02" src="../●●.jpg" alt="●" width="300" height="300"> <figcaption class="al-c">影付き2</figcaption> </figure> </div> <div class="col"> <figure> <img class="outline" src="../●●.jpg" alt="●" width="300" height="300"> <figcaption class="al-c">囲み線（1px）</figcaption> </figure> </div> </div> <div class="col2-wrap al-c"> <div class="col" style="border:0;"> <figure> <img class="rc12" src="../●●.jpg" alt="●" width="300" height="300"> <figcaption class="al-c">角丸</figcaption> </figure> </div> <div class="col"> <figure> <img class="circle" src="../●●.jpg" alt="●" width="300" height="300"> <figcaption class="al-c">円</figcaption> </figure> </div> </div> <div class="col2-wrap al-c"> <div class="col" style="border:0;"> <figure> <img class="frame" src="../●●.jpg" alt="●" width="300" height="300"> <figcaption class="al-c">写真風</figcaption> </figure> </div> </div> |
文章中の間の表現
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p>本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。<br> 本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。</p> <div class="interval"> <img src="../images/common/interval01.png" alt="" width="24" height="24"> <img src="../images/common/interval01.png" alt="" width="24" height="24"> <img src="../images/common/interval01.png" alt="" width="24" height="24"> </div> <p>本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。<br> 本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。</p> <div class="interval"> <img src="../images/common/interval02.png" alt="" width="26" height="26"> <img src="../images/common/interval02.png" alt="" width="26" height="26"> <img src="../images/common/interval02.png" alt="" width="26" height="26"> </div> |
画像ズームでの強調
本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です
本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です
|
1 2 3 4 5 6 7 8 |
<p>本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です<br> 本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です</p> <p class="al-c m200-t"><img class="resize40" alt="猫" src="../images/sample02.jpg"></p> <p class="al-c m200-t"><img class="resize70" alt="猫" src="../images/sample02.jpg"></p> <p class="al-c m200-t"><img alt="猫" src="../images/sample02.jpg"></p> |
次回予告
次回のキャッチコピーが入ります。
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
次回、サイトタイトル
「次回のタイトルが入ります」
|
1 2 3 4 5 6 7 |
<div class="info-box"> <p class="trailer-text">次回のキャッチコピーが入ります。</p> <p>次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。<br> 次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。</p> <p class="trailer-text-l">次回、サイトタイトル<br> 「次回のタイトルが入ります」</p> </div> |
動画等の埋め込み
Youtube
|
1 |
<div class="v-wrap al-c m30-b"><iframe width="560" height="315" src="https://www.youtube.com/embed/●●●" frameborder="0" allowfullscreen></iframe></div> |
埋め込みGoogleフォーム
|
1 |
<iframe src="https://docs.google.com/a/web-rider.com/forms/d/■■■" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます...</iframe> |
お客様の声
写真左
ご職業：ネットショップ制作 ご購入年：2013年
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="voice-box rc8"> <div class="voice"> <div class="voice-headshot left"><img src="../images/●●.jpg" width="100" height="100" alt="●"></div> <div class="voice-content"> <p class="b">ご職業：ネットショップ制作 ご購入年：2013年</p> <p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br> ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。</p> </div> </div> </div> |
写真右
ご職業：ネットショップ制作 ご購入年：2013年
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="voice-box rc8"> <div class="voice"> <div class="voice-headshot right"><img src="../images/▲▲.jpg" width="100" height="100" alt="▲"></div> <div class="voice-content"> <p class="b">ご職業：ネットショップ制作 ご購入年：2013年</p> <p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br> ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。</p> </div> </div> </div> |
吹き出し右向き
登場人物3ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入ります
ご職業：ネットショップ制作 ご購入年：2013年
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="chat-l"> <div class="talker"><b><img class="circle" alt="▲" src="../images/▲▲.jpg">登場人物3</b></div> <div class="bubble-wrap"> <div class="bubble rc8 m10-b"> <div class="bubble-in b-arw20"> <p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br> ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br> ここにお客様のご感想が入りますここにお客様のご感想が入ります</p> </div> </div> <p class="al-r fl-c">ご職業：ネットショップ制作 ご購入年：2013年</p> </div> </div> |
吹き出し左向き
登場人物4ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入ります
ご職業：ネットショップ制作 ご購入年：2013年
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="chat-r"> <div class="talker"><b><img class="circle" alt="◆" src="../images/◆◆.jpg">登場人物4</b></div> <div class="bubble-wrap"> <div class="bubble rc8 m10-b"> <div class="bubble-in b-arw20"> <p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br> ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br> ここにお客様のご感想が入りますここにお客様のご感想が入ります</p> </div> </div> <p class="fl-c">ご職業：ネットショップ制作 ご購入年：2013年</p> </div> </div> |
当院おすすめインフォメーション！
Ｏ脚矯正モニターを毎月３名限定で募集します！
【Ｏ脚矯正モニターの条件】
- Ｏ脚であること。（Ｘ脚は今回は別）
- 施術前後の写真がOKの方。（顔は撮りません。）
- 視察目的や同業者でないこと。
- アンケートやご感想・クチコミを書いていただける方。
- 毎週１回（10回程度）の通院ができること。
- 5回分の料金（20,000円）を先払いできる方。
6回以降の支払いは、その都度１回4,000円です。
詳しくは、モニター募集のページをご覧ください。
