賢威6.2 装飾タグ（ショートコード）一覧
賢威6.2では複雑なＨＴＭＬやＣＳＳコードを入力したり、
画像の登録をしなくても省略されたコードを打ち込むことで、
よく使われるフォーマットやアイコンの表示ができるようにされ
装飾タグ（ショートコード）というものが準備されています。
この装飾タグ（ショートコード）を利用することで
簡単に様々なデザインをサイト上で利用することができます。
今回はこの賢威6.2で使用できる全ての装飾タグ（ショートコード）を
まとめたので紹介していきます。
目次
賢威6.2で使用できる全装飾タグ（ショートコード）一覧
「divタグ（boxクラス）でボックスを並べる」
サイト制作が楽になるソフト一覧
-
テキストエディタ「Crescent Eve」
フリーのテキストエディタ。
「F7」を押せばHTMLのエラーチェックができる他、タグを自動的に予測入力してくれる機能もある。 -
文字列一括置換ソフト「Devas」
全ページのタイトル等を一括で変更したいときにオススメ。
-
FTPソフト「FFFTP」
作成したホームページファイルをサーバへアップ（転送）するFTPソフトです。
-
文字コード変換ソフト
「KanjiTranslator」ドラッグ＆ドロップだけでファイルの文字コードを変換することができます。
ただし、HTMLソース内の文字コード表記も変更するようにしてください。
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<div class="contents box-wrap"> <!--left--> <div class="box-l"> <div class="title"> サイト制作が楽になるソフト一覧 </div> <div class="contents"> <ul> <li> <p class="m0-b">テキストエディタ「Crescent Eve」</p> <p class="small">フリーのテキストエディタ。 「F7」を押せばHTMLのエラーチェックができる他、タグを自動的に予測入力してくれる機能もある。</p> </li> <li> <p class="m0-b">文字列一括置換ソフト「Devas」</p> <p class="small">全ページのタイトル等を一括で変更したいときにオススメ。</p> </li> <li> <p class="m0-b">FTPソフト「FFFTP」</p> <p class="small">作成したホームページファイルをサーバへアップ（転送）するFTPソフトです。</p> </li> <li> <p class="m0-b">文字コード変換ソフト 「KanjiTranslator」</p> <p class="small">ドラッグ＆ドロップだけでファイルの文字コードを変換することができます。 ただし、HTMLソース内の文字コード表記も変更するようにしてください。</p> </li> <li> <p class="m0-b">疑似サーバ環境作成ソフト「XAMPP」</p> <p class="small">お使いのPCにインストールすることで、疑似サーバ環境を作成できます。PHPやMySQLなどのテストが可能になります。</p> </li> </ul> </div> </div> <!--/left--> <!--right--> <div class="box-r"> <div class="title"> 売れ筋ベスト5 </div> <div class="contents"> <ol class="ranking"> <li class="no01"> <p class="item-name"><a href="./item/item01/">商品名1</a></p> ここにテキストが入ります。</li> <li class="no02"> <p class="item-name"><a href="./item/item02/">商品名2</a></p> ここにテキストが入ります。</li> <li class="no03"> <p class="item-name"><a href="./item/item03/">商品名3</a></p> ここにテキストが入ります。</li> <li class="no04"> <p class="item-name">商品名4</p> ここにテキストが入ります。</li> <li class="no05 end"> <p class="item-name">商品名5</p> ここにテキストが入ります。</li> </ol> </div> </div> <!--/right--> </div> <!--/conts--> |
『リストタグ（checklist）』
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
|
1 2 3 4 5 |
<ul class="checklist"> <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li> <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li> <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li> </ul> |
「テーブルタグ」を使った例
| おすすめのサービス | 評価（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 |
<div class="contents"> <table summary="比較表サンプル"> <thead> <tr> <th class="w35">おすすめのサービス</th> <th class="w25">評価（5段階）</th> <th class="w40">詳細</th> </tr> </thead> <tbody> <tr> <td><img src="画像URLを入力" alt="サンプルバナー" /></td> <td>★★★★★</td> <td>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</td> </tr> <tr> <td><img src="画像URLを入力" alt="サンプルバナー" /></td> <td>★★★★☆</td> <td>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</td> </tr> <tr> <td><img src="画像URLを入力" alt="サンプルバナー" /></td> <td>★★☆☆☆</td> <td>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</td> </tr> </tbody> </table> </div> |
「テーブルタグ」を使った例(2)
| 商品名：サンプルA1-001 | ★★★★★ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
|---|---|---|
| 商品名：サンプルA2-001 | ★★★★☆ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
| 商品名：サンプルA3-001 | ★★☆☆☆ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="contents"> <table class="table-style01" summary="比較表サンプル"> <tbody> <tr> <th class="w35 vl-m">商品名：サンプルA1-001</th> <td class="w25 vl-m">★★★★★</td> <td class="w40">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</td> </tr> <tr> <th class="vl-m">商品名：サンプルA2-001</th> <td class="vl-m al-">★★★★☆</td> <td>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</td> </tr> <tr> <th class="vl-m">商品名：サンプルA3-001</th> <td class="vl-m">★★☆☆☆</td> <td>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</td> </tr> </tbody> </table> </div> |
文字色を変える
文字色を赤色に変更。
|
1 |
<span class="red">文字色を赤色に変更。</span> |
|
1 |
<span class="blue">文字色を青色に変更。</span> |
文字色を緑色に変更。
|
1 |
<span class="green">文字色を緑色に変更。</span> |
文字色を黄色に変更。
|
1 |
<span class="yellow">文字色を黄色に変更。</span> |
|
1 |
<span class="navy">文字色を紺色に変更。</span> |
文字色を灰色に変更。
|
1 |
<span class="gray">文字色を灰色に変更。</span> |
文字色をオレンジ色に変更。
|
1 |
<span class="orange">文字色をオレンジ色に変更。</span> |
文字色をピンク色に変更。
|
1 |
<span class="pink">文字色をピンク色に変更。</span> |
文字色を紫色に変更。
|
1 |
<span class="purple">文字色を紫色に変更。</span> |
文字色を黄土色に変更。
|
1 |
<span class="olive">文字色を黄土色に変更。</span> |
文字色を黄緑色に変更。
|
1 |
<span class="lime">文字色を黄緑色に変更。</span> |
文字色を水色に変更。
|
1 |
<span class="aqua">文字色を水色に変更。</span> |
文字の大きさを変える
文字を太字にすることができます。
|
1 |
<span class="b">文字を太字にすることができます。</span> |
文字を「120％」の大きさにすることができます。
|
1 |
<span class="f12em">文字を「120％」の大きさにすることができます。</span> |
文字を「150％」の大きさにすることができます。
|
1 |
<span class="f15em">文字を「150％」の大きさにすることができます。</span> |
文字を「180％」の大きさにできます。
|
1 |
<span class="f18em">文字を「180％」の大きさにすることができます。</span> |
文字を「80％」の大きさにすることができます。
|
1 |
<span class="f08em">文字を「80％」の大きさにすることができます。</span> |
文字列を「蛍光ペンのようなボックス」で囲む
文字を黄色いボックスで囲むことができます。
|
1 |
<span class="box-yellow">文字を黄色いボックスで囲むことができます。</span> |
文字を水色のボックスで囲むことができます。
|
1 |
<span class="box-aqua">文字を水色のボックスで囲むことができます。</span> |
文字を灰色のボックスで囲むことができます。
|
1 |
<span class="box-gray">文字を灰色のボックスで囲むことができます。</span> |
文字を赤色のボックスで囲むことができます。
|
1 |
<span class="box-red">文字を赤色のボックスで囲むことができます。</span> |
文字列の前にアイコンを付ける。
先頭にCHECK！という画像が付きます。
|
1 |
<p class="caution1">先頭にCHECK！という画像が付きます。</p> |
先頭にCHECK！という画像が付きます。
|
1 |
<p class="caution2">先頭にCHECK！という画像が付きます。</p> |
先頭にPOINT！という画像が付きます。
|
1 |
<p class="caution3">先頭にPOINT！という画像が付きます。</p> |
先頭にPOINT！という画像が付きます。
|
1 |
<p class="caution4">先頭にPOINT！という画像が付きます。</p> |
先頭にCHECK！という画像が付きます。
|
1 |
<p class="caution5">先頭にCHECK！という画像が付きます。</p> |
先頭にPOINT！という画像が付きます。
|
1 |
<p class="caution6">先頭にPOINT！という画像が付きます。</p> |
先頭に注意！という画像が付きます。
|
1 |
<p class="caution7">先頭に注意！という画像が付きます。</p> |
先頭に注意！という画像が付きます。
|
1 |
<p class="caution8">先頭に注意！という画像が付きます。</p> |
先頭に初心者マークが付きます。
|
1 |
<p class="wakaba">先頭に初心者マークが付きます。</p> |
先頭にメール画像が付きます。
|
1 |
<p class="mail">先頭にメール画像が付きます。</p> |
先頭にPDF画像が付きます。
|
1 |
<p class="pdf">先頭にPDF画像が付きます。</p> |
先頭にZIP画像が付きます。
|
1 |
<p class="zip">先頭にZIP画像が付きます。</p> |
先頭にRSS画像が付きます。
|
1 |
<p class="rss">先頭にRSS画像が付きます。</p> |
先頭にRSS画像が付きます。
|
1 |
<p class="rss-mini">先頭にRSS画像が付きます。</p> |
文章の終わりにも。
|
1 |
<p class="al-r"><span class="mail-back"></span></p> |
一行なら文章の終わりにも。
|
1 |
<p class="al-r"><span class="pdf-back">一行なら文章の終わりにも。</span></p> |
一行なら文章の終わりにも。
|
1 |
<p class="al-r"><span class="zip-back">一行なら文章の終わりにも。</span></p> |
一行なら文章の終わりにも。
|
1 |
<p class="al-r"><span class="rss-back">一行なら文章の終わりにも。</span></p> |
ランキング
売れ筋ランキング
-
商品名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 |
<ul class="ranking"> <li class="no01"> <p class="item-name">商品名1</p> <p class="item-img"><img src="画像URLを入力" alt="AAA社画像" width="162" height="162" /></p> ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 <p class="link-next02"><a href="./item/item01/">「商品名1」の詳細を見る</a></p> </li> <li class="no02"> <p class="item-name">商品名2</p> <p class="item-img"><img src="画像URLを入力" alt="AAA社画像" width="162" height="162" /></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="画像URLを入力" alt="AAA社画像" width="162" height="162" /></p> ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 <p class="link-next02"><a href="./item/item03/">「商品名3」の詳細を見る</a></p> </li> <li class="no04"> <p class="item-name">商品名4</p> ここにテキストが入ります。ここにテキストが入ります。 <p class="link-next02"><a href="#">「商品名4」の詳細を見る</a></p> </li> <li class="no05 end"> <p class="item-name">商品名5</p> ここにテキストが入ります。ここにテキストが入ります。 <p class="link-next02"><a href="#">「商品名5」の詳細を見る</a></p> </li> </ul> </div> <div class="contents"> |
今回はコーポレート版で紹介しましたが、
各テンプレートでアイコンのデザインも違ってきますので、
ぜひ様々なリストタグのデザインを見てみて下さい。
是非上記リストタグを上手に使って
あなたのサイト作成に役立てて下さいね。
また、
賢威6.2の全パーツカスタマイズ一覧まとめページを作成しましたので、
他の箇所をカスタマイズされたい場合は一度見てみて下さいね。
⇒賢威6.2【全カスタマイズを一覧まとめ】ワードプレステンプレート
