賢威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> |
当院おすすめインフォメーション！
日本人女性の9割がＯ脚と言われていますが、
確実に矯正できる治療院がなかったり、
すぐにリバウンドしているのが現状です。
これまで、そんなＯ脚でにお悩みだった女性には朗報です！
『確実に矯正されてつつ、リバウンドがしない方法があるんだよ！』
ということを知って頂きたくて、期間限定で料金半額のモニターを募集しています。
詳しくは、『滋賀大津Ｏ脚矯正サロン めぐり整体所』のホームページをご覧ください。
