
今回はちょっとメモ。
長年賢威を使ってきていますが、
私の場合、DreamWeaverに予めサイトのCSSを読み込ませているテンプレートを
作っておき、そこで書いてからコピペで記事を作成していたのであまり使った事が
なかったんですが、賢威には便利なCSSが用意されているんですね。
いったん記事を上げた後にちょこっと修正するときに手書きでやっていたので
覚えておくと便利かなと。
■よくあるようなチェックボックスの一覧
<ul class="checklist"> <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li> <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li> <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li> </ul>
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
■文字色
<ul> <li><span class="black">文字色を黒色に変更することができます。</span></li> <li><span class="red">文字色を赤色に変更することができます。</span></li> <li><span class="blue">文字色を青色に変更することができます。</span></li> <li><span class="green">文字色を緑色に変更することができます。</span></li> <li><span class="yellow">文字色を黄色く変更することができます。</span></li> <li><span class="navy">文字色を紺色に変更することができます。</span></li> <li><span class="gray">文字色を灰色に変更することができます。</span></li> <li><span class="orange">文字色をオレンジに変更することができます。</span></li> <li><span class="pink">文字色をピンクに変更することができます。</span></li> <li><span class="purple">文字色を紫色に変更することができます。</span></li> <li><span class="olive">文字色を黄土色に変更することができます。</span></li> <li><span class="lime">文字色を黄緑に変更することができます。</span></li> <li><span class="aqua">文字色を水色に変更することができます。</span></li> </ul>
- 文字色を黒色に変更することができます。
- 文字色を赤色に変更することができます。
- 文字色を青色に変更することができます。
- 文字色を緑色に変更することができます。
- 文字色を黄色く変更することができます。
- 文字色を灰色に変更することができます。
- 文字色をオレンジに変更することができます。
- 文字色をピンクに変更することができます。
- 文字色を紫色に変更することができます。
- 文字色を黄土色に変更することができます。
- 文字色を黄緑に変更することができます。
- 文字色を水色に変更することができます。
■背景色
<ul> <li><span class="box-yellow">文字を黄色いボックスで囲むことができます。</span></li> <li><span class="box-aqua">文字を水色のボックスで囲むことができます。</span></li> <li><span class="box-gray">文字を灰色のボックスで囲むことができます。</span></li> <li><span class="box-red">文字を赤色のボックスで囲むことができます。</span></li> </ul>
- 文字を黄色いボックスで囲むことができます。
- 文字を水色のボックスで囲むことができます。
- 文字を灰色のボックスで囲むことができます。
- 文字を赤色のボックスで囲むことができます。
■文字サイズ
<ol> <li><span class="b">文字を太字にすることができます。</span></li> <li><span class="f12em">文字を「120%」の大きさにすることができます。</span></li> <li><span class="f15em">文字を「150%」の大きさにすることができます。</span></li> <li><span class="f18em">文字を「180%」の大きさにすることができます。</span></li> <li><span class="f08em">文字を「80%」の大きさにすることができます。</span></li> </ol>
- 文字を太字にすることができます。
- 文字を「120%」の大きさにすることができます。
- 文字を「150%」の大きさにすることができます。
- 文字を「180%」の大きさにすることができます。
- 文字を「80%」の大きさにすることができます。
■アイコン付き文字
<p class="caution1">先頭にCHECK!という画像が付いた状態で表示されます。</p> <p class="caution2">先頭にCHECK!という画像が付いた状態で表示されます。</p> <p class="caution3">先頭にPOINT!という画像が付いた状態で表示されます。</p> <p class="caution4">先頭にPOINT!という画像が付いた状態で表示されます。</p> <p class="caution5">先頭にCHECK!という画像が付いた状態で表示されます。</p> <p class="caution6">先頭にPOINT!という画像が付いた状態で表示されます。</p> <p class="caution7">先頭に注意!という画像が付いた状態で表示されます。</p> <p class="caution8">先頭に注意!という画像が付いた状態で表示されます。</p>
先頭にCHECK!という画像が付いた状態で表示されます。
先頭にCHECK!という画像が付いた状態で表示されます。
先頭にPOINT!という画像が付いた状態で表示されます。
先頭にPOINT!という画像が付いた状態で表示されます。
先頭にCHECK!という画像が付いた状態で表示されます。
先頭にPOINT!という画像が付いた状態で表示されます。
先頭に注意!という画像が付いた状態で表示されます。
先頭に注意!という画像が付いた状態で表示されます。
■後アイコン付き文字
<p class="al-r"><span class="mail-back">一行なら文章の終わりにも使えます。</span></p> <p class="al-r"><span class="pdf-back">一行なら文章の終わりにも使えます。</span></p> <p class="al-r"><span class="zip-back">一行なら文章の終わりにも使えます。</span></p> <p class="al-r"><span class="rss-back">一行なら文章の終わりにも使えます。</span></p>
一行なら文章の終わりにも使えます。
一行なら文章の終わりにも使えます。
一行なら文章の終わりにも使えます。
一行なら文章の終わりにも使えます。
■文字線付き
<ul> <li><span class="underline">文字に下線を引くことができます。</span></li> <li><span class="del">文字に取り消し線を引くことができます。</span></li> </ul>
- 文字に下線を引くことができます。
- 文字に取り消し線を引くことができます。
■次ページなど
<p class="link-next"><a href="/">次のページへ</a></p> <p class="link-back"><a href="/">前のページへ</a></p>
■Youtube動画の埋め込み
<div class="v-wrap al-c m30-b"> <iframe width="420" height="315" src="http://www.youtube.com/embed/-ujaHz-RwNs" frameborder="0" allowfullscreen></iframe> </div>
■売れ筋ランキング
<ul class="ranking"> <li class="no01"> <p class="item-name">商品名1</p> <p class="item-img"><img src="http://j-press.info/wp-content/themes/keni6_wp_cool_130218/images/dummy-item01.jpg" width="162" height="162" alt="AAA社画像" /></p> <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> <p class="link-next02"><a href="./item01/">「商品名1」の詳細を見る</a></p> </li> <li class="no02"> <p class="item-name">商品名2</p> <p class="item-img"><img src="http://j-press.info/wp-content/themes/keni6_wp_cool_130218/images/dummy-item02.jpg" width="162" height="162" alt="AAA社画像" /></p> <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> <p class="link-next02"><a href="./item/item02/">「商品名2」の詳細を見る</a></p> </li> <li class="no03"> <p class="item-name">商品名3</p> <p class="item-img"><img src="http://j-press.info/wp-content/themes/keni6_wp_cool_130218/images/dummy-item03.jpg" width="162" height="162" alt="AAA社画像" /></p> <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> <p class="link-next02"><a href="./item/item03/">「商品名3」の詳細を見る</a></p> </li> <li class="no04"> <p class="item-name">商品名4</p> <p>ここにテキストが入ります。ここにテキストが入ります。</p> <p class="link-next02"><a href="#">「商品名4」の詳細を見る</a></p> </li> <li class="no05 end"> <p class="item-name">商品名5</p> <p>ここにテキストが入ります。ここにテキストが入ります。</p> <p class="link-next02"><a href="#">「商品名5」の詳細を見る</a></p> </li> </ul>
-
商品名1
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
-
商品名2
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
-
商品名3
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
-
商品名4
ここにテキストが入ります。ここにテキストが入ります。
-
商品名5
ここにテキストが入ります。ここにテキストが入ります。
ネットビジネス速報メールマガジン
メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。
Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。