【保存版】賢威で最初から使える装飾タグ一覧(AddQuicktagファイルつき)

この記事は約20分で読めます。

  • LINEで送る

賢威装飾タグ一覧

賢威では、最初からある程度の装飾タグが用意されています。
かなり便利ですので、備忘録も含めて賢威装飾タグ一覧を掲載します。

掲載しているタグ全てを「AddQuicktag」プラグインでインポートして利用できる
XMLファイルを用意しましたので、ダウンロードしてご利用ください。

賢威専用AddQuicktagインポートファイル

「AddQuicktag」に関する詳しい説明は、以下の記事をご覧ください。
WordPressでよく利用するタグをすぐに呼び出せるプラグイン(AddQuicktag)

当ブログは賢威6.1の「クール版」を利用しています。
他のテンプレートでは、画像などが若干異なる可能性があります。

文字装飾一覧

文字の大きさ(サイズ)を変更する

文字が小さくなります

<p class="small">文字が小さくなります</p>

文字が大きくなります

<p class="big">文字が大きくなります</p>
特大

文字が特大になります

<p class="big2">文字が特大になります</p>
超特大

文字が超特大になります

<p class="big3">文字が超特大になります</p>
emサイズ刻み(f08em~f24em)

文字が2.4emサイズになります

<p class="f24em">文字が2.4emサイズになります</p>
ptサイズ刻み(f8pt~f24pt)

文字が24ptサイズになります

<p class="f24pt">文字が24ptサイズになります</p>

文字の太さを変更する

太字

文字が太字になります

<p class="b">文字が太字になります</p>
太字解除

特定の部分だけ太字を解除します

<p class="b">特定の部分だけ<span class="normal">太字を解除</span>します</p>

文字の位置を変更する

中央寄せ(横)

文字が中央寄せ(横)になります

<p class="al-c">文字が中央寄せになります</p>
右寄せ(横)

文字が右寄せ(横)になります

<p class="al-r">文字が右寄せになります</p>
左寄せ(横)

文字が左寄せに(横)なります

<p class="al-l">文字が左寄せになります</p>
上寄せ(縦)
文字が上寄せ(縦)になります
<div><span class="f24em">文字が<span class="f10pt vl-t">上寄せ(縦)</span>になります</span></div>
中央寄せ(縦)
文字が中央寄せ(縦)になります
<div><span class="f24em">文字が<span class="f10pt vl-m">中央寄せ(縦)</span>になります</span></div>
下寄せ(縦)
文字が下寄せ(縦)になります
<div><span class="f24em">文字が<span class="f10pt vl-b">下寄せ(縦)</span>になります</span></div>

文字の色を変更する

文字が赤色になります

<p class="red">文字が赤色になります</p>

文字が青色になります

<p class="blue">文字が青色になります</p>

文字が緑色になります

<p class="green">文字が緑色になります</p>

文字が黄色になります

<p class="yellow">文字が黄色になります</p>
<p class="navy">文字が紺色になります</p>
オレンジ

文字がオレンジ色になります

<p class="orange">文字がオレンジ色になります</p>
ピンク

文字がピンク色になります

<p class="pink">文字がピンク色になります</p>

文字が紫色になります

<p class="purple">文字が紫色になります</p>
黄土

文字が黄土色になります

<p class="olive">文字が黄土色になります</p>

文字が水色になります

<p class="aqua">文字が水色になります</p>

文字が黒色になります

<p class="black">文字が黒色になります</p>

文字が灰色になります

<p class="gray">文字が灰色になります</p>

文字が白色になります

<p class="white">文字が白色になります</p>

その他の文字装飾

黄色マーカー

文字が黄色マーカーで装飾されます

<p>文字が<span class="box-yellow">黄色マーカーで装飾</span>されます</p>
水色マーカー

文字が水色マーカーで装飾されます

<p>文字が<span class="box-aqua">水色マーカーで装飾</span>されます</p>
灰色マーカー

文字が灰色マーカーで装飾されます

<p>文字が<span class="box-gray">灰色マーカーで装飾</span>されます</p>
赤色マーカー

文字が赤色マーカーで装飾されます

<p>文字が<span class="box-red">赤色マーカーで装飾</span>されます</p>
下線

文字に下線をつけます

<p class="underline">文字に下線をつけます</p>
ノートのような線

文字にノートのような線をつけます

<p class="noteline">文字にノートのような線をつけます</p>
取り消し線

文字に取り消し線をつけます

<p class="del">文字に下線をつけます</p>

文字装飾は組み合わせも可能

これまで紹介してきた文字装飾は、組み合わせて利用することも可能です。

大きい赤太字

文字が赤太字で大きくなります

<p>文字が<span class="red b big2">赤太字で大きく</span>なります</p>
下線マーカー

文字が下線と黄色マーカーで装飾されます

<p>文字が<span class="underline box-yellow">下線と黄色マーカーで装飾</span>されます</p>

いろいろなタグに利用可能

文字装飾は、いろいろなタグに組み合わせて利用できます。
タグとの組み合わせを変更することで、かなり細かく装飾できます。

リストを青太字
  • 第1項目
  • 第2項目
  • 第3項目
<ul class="blue b">
<li>第1項目</li>
<li>第2項目</li>
<li>第3項目</li>
</ul>

前後にアイコン(画像)を付与する装飾一覧

注意1

注意1アイコンを前につける

<p class="caution1">注意1アイコンを前につける</p>
注意2

注意2アイコンを前につける

<p class="caution2">注意2アイコンを前につける</p>
注意3

注意3アイコンを前につける

<p class="caution3">注意3アイコンを前につける</p>
注意4

注意4アイコンを前につける

<p class="caution4">注意4アイコンを前につける</p>
注意5

注意5アイコンを前につける

<p class="caution5">注意5アイコンを前につける</p>
注意6

注意6アイコンを前につける

<p class="caution6">注意6アイコンを前につける</p>
注意7

注意7アイコンを前につける

<p class="caution7">注意7アイコンを前につける</p>
注意8

注意8アイコンを前につける

<p class="caution8">注意8アイコンを前につける</p>
初心者マーク

初心者マークアイコンを前につける

<p class="wakaba">初心者マークアイコンを前につける</p>
メールアイコン

メールアイコンを前につける

<p class="mail">メールアイコンを前につける</p>
後にメールアイコン

メールアイコンを後につける

<span class="mail-back">メールアイコンを後につける</span>
PDFアイコン

PDFアイコンを前につける

<p class="pdf">PDFアイコンを前につける</p>
後にPDFアイコン

PDFアイコンを後につける

<span class="pdf-back">PDFアイコンを後につける</span>
ZIPアイコン

ZIPアイコンを前につける

<p class="zip">ZIPアイコンを前につける</p>
後にZIPアイコン

ZIPアイコンを後につける

<span class="zip-back">ZIPアイコンを後につける</span>
RSSアイコン

RSSアイコンを前につける

<p class="rss">RSSアイコンを前につける</p>
後にRSSアイコン

RSSアイコンを後につける

<span class="rss-back">RSSアイコンを後につける</span>
小さいRSSアイコン

小さいRSSアイコンを前につける

<p class="rss-mini">小さいRSSアイコンを前につける</p>
戻るリンク1

戻るリンク1

<span class="link-back"><a href ="#">戻るリンク1</a></span>
戻るリンク2

戻るリンク2

<span class="link-back02"><a href ="#">戻るリンク2</a></span>
進むリンク1

進むリンク1

<span class="link-next"><a href ="#">進むリンク1</a></span>
進むリンク2

進むリンク2

<span class="link-next02"><a href ="#">進むリンク2</a></span>

チェックリスト

チェックリスト
  • 項目1
  • 項目2
  • 項目3
<ul class="checklist">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>

ランキング

ランキング
  • ランキング1位

    ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。

  • ランキング2位

    ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。

  • ランキング3位

    ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。

  • ランキング4位

    ランキング4位の説明文がここにはいります。

  • ランキング5位

    ランキング5位の説明文がここにはいります。

<ul class="ranking">
<li class="no01">
<p class="item-name">ランキング1位</p>
<p>ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。ランキング1位の説明文がここにはいります。</p>
<p class="link-next02"><a href="#">「ランキング1位」の詳細を見る</a></p>
</li>

<li class="no02">
<p class="item-name">ランキング2位</p>
<p>ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。ランキング2位の説明文がここにはいります。</p>
<p class="link-next02"><a href="#">「ランキング2位」の詳細を見る</a></p>
</li>

<li class="no03">
<p class="item-name">ランキング3位</p>
<p>ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。ランキング3位の説明文がここにはいります。</p>
<p class="link-next02"><a href="#">「ランキング3位」の詳細を見る</a></p>
</li>

<li class="no04">
<p class="item-name">ランキング4位</p>
<p>ランキング4位の説明文がここにはいります。</p>
<p class="link-next02"><a href="#">「ランキング4位」の詳細を見る</a></p>
</li>

<li class="no05 end">
<p class="item-name">ランキング5位</p>
<p>ランキング5位の説明文がここにはいります。</p>
<p class="link-next02"><a href="#">「ランキング5位」の詳細を見る</a></p>
</li>
</ul>

テーブル

テーブル1
テーブルヘッダ1 テーブルヘッダ2 テーブルヘッダ3
テーブルセル1-1 テーブルセル1-2 テーブルセル1-3
テーブルセル2-1 テーブルセル2-2 テーブルセル2-3
テーブルセル3-1 テーブルセル3-2 テーブルセル3-3
<table summary="サンプル">
<thead>
<tr>
<th class="w35">テーブルヘッダ1</th>
<th class="w25">テーブルヘッダ2</th>
<th class="w40">テーブルヘッダ3</th>
</tr>
</thead>
<tbody>
<tr>
<td>テーブルセル1-1</td>
<td>テーブルセル1-2</td>
<td>テーブルセル1-3</td>
</tr>
<tr>
<td>テーブルセル2-1</td>
<td>テーブルセル2-2</td>
<td>テーブルセル2-3</td>
</tr>
<tr>
<td>テーブルセル3-1</td>
<td>テーブルセル3-2</td>
<td>テーブルセル3-3</td>
</tr>
</tbody>
</table>
テーブル2

定義タグ

項目の説明などに使う定義タグにも装飾タグがあります。

定義タグ1
項目1
説明文1が入ります
項目2
説明文2が入ります
項目3
説明文3が入ります
<dl class="dl-style01">
<dt>項目1</dt>
<dd>説明文1が入ります</dd>
<dt>項目2</dt>
<dd>説明文2が入ります</dd>
<dt>項目3</dt>
<dd>説明文3が入ります</dd>
</dl>
定義タグ2
項目1
説明文1が入ります
項目2
説明文2が入ります
項目3
説明文3が入ります
<dl class="dl-style02">
<dt>項目1</dt>
<dd>説明文1が入ります</dd>
<dt>項目2</dt>
<dd>説明文2が入ります</dd>
<dt>項目3</dt>
<dd>説明文3が入ります</dd>
</dl>
  • LINEで送る

コメントを残す

このページの先頭へ