【賢威6.0/6.1】テンプレート装飾タグ一覧と使い方
賢威6.0/6.1テンプレートの装飾タグの一覧リストです。
テキストエリアにコピー&ペーストするだけで使用できますが、よく使う装飾タグはWordPressプラグイン「Add Quick Tag」に登録しておく方が楽です。
→AddQuickTagで繰り返し使うタグを設定しておくと効率が良く便利
なお、賢威4.0や5.0で使えていたものが、賢威6.0/6.1だと使えないものもありますので注意しましょう。
装飾タグの<p>タグと<span>タグを使い分ける必要があります
文字装飾を行う場合、pタグとspanタグを使い分ける必要があります。
pタグの場合
pタグを使う場合は、1段落全部に装飾をする場合です。
例文:賢威はとてもわかりやすいWordPressテンプレートだなぁ!
上記例文の1段落全てを青文字に変更する場合は、以下のようにpタグを使います。
<p class="blue">賢威はとてもわかりやすいWordPressテンプレートだなぁ!</p>
↓
賢威はとてもわかりやすいWordPressテンプレートだなぁ!
spanタグの場合
では1段落全部ではなく、段落中の一部分だけに装飾をしたい場合。この時にspanタグを使います。
賢威はとてもわかりやすいWordPress<span class="blue">テンプレート</span>だなぁ!
↓
賢威はとてもわかりやすいWordPressテンプレートだなぁ!
文字装飾をするときはこのようにpタグとspanタグの使い分けを行いましょう。
装飾タグの複数使用も可能
例えば、赤字+太字+特大文字にしたい場合があったとします。このような時は、装飾タグを複数使うことで可能です。
<p class="red b big2">賢威6.1WordPressテンプレート</p>
↓
賢威6.1WordPressテンプレート
pかspanで指定して、使いたいタグを半角スペース空けて並べるだけでOKです。
では以下、賢威6.0/6.1で使用出来る装飾リスト一覧です。
装飾タグ一覧
賢威6.0/6.1 文字の色を変更する | |
---|---|
<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="lime">○○○</p> | 文字色黄緑 |
<p class="aqua">○○○</p> | 文字色水色 |
<p class="black">○○○</p> | 文字色黒 |
<p class="gray">○○○</p> | 文字色灰 |
<p class="white">○○○</p> | 文字色白 |
賢威6.0/6.1文字に蛍光色の背景を指定する | |
<p class="box-yellow">○○○</p> | ハイライト黄色 |
<p class="box-aqua">○○○</p> | ハイライト水色 |
<p class="box-gray">○○○</p> | ハイライト灰色 |
<p class="box-red">○○○</p> | ハイライト赤色 |
賢威6.0/6.1文字の大きさを変更する | |
<p class="small">○○○</p> | 小サイズ |
<p class="big">○○○</p> | 大サイズ |
<p class="big2">○○○</p> | 特大サイズ |
<p class="b">○○○</p> | 文字の太字 |
<p class="underline">○○○</p> | 文字の下線 |
<p class="del">○○○</p> | 文字の取り消し線 |
文字の位置を変更する | |
<p class="al-c">○○○</p> | 文字中央寄せ |
<p class="al-r">○○○</p> | 文字右寄せ |
<p class="al-l">○○○</p> | 文字左寄せ |
賢威6.0/6.1 連続改行の設定 | |
<p class=(〇には数字) | 連続改行タグ |
賢威6.0/6.1文字にアイコンを指定する | |
<p class="caution1">○○○</p> | 白チェックアイコン |
<p class="caution2">○○○<p/> | 赤チェックアイコン |
<p class="caution3">○○○<p/> | 白ポイントアイコン |
<p class="caution4">○○○<p/> | 赤ポイントアイコン |
<p class="caution5">○○○<p/> | チェックアイコン |
<p class="caution6">○○○<p/> | ポイントアイコン |
<p class="caution7">○○○<p/> | 白注意アイコン |
<p class="caution8">○○○<p/> | 赤注意アイコン |
<p class="wakaba">○○○<p/> | 初心者アイコン画像 |
<p class="mail">○○○<p/> | メールアイコン |
<p class="pdf">○○○<p/> | PDFアイコン |
<p class="zip">○○○<p/> | ZIPアイコン |
<p class="rss">○○○<p/> | RSSアイコン |
<p class="rss-mini">○○○<p/> | 小さいRSSアイコン |
<p class="mail-back">○○○<p/> | 後ろにメールアイコン |
<p class="pdf-back">○○○<p/> | 後ろにPDFアイコン |
<p class="zip-back">○○○<p/> | 後ろにZIPアイコン |
<p class="rss-back">○○○<p/> | 後ろにRSSアイコン |
装飾を沢山しすぎても文章としては見にくくなってしまうので、使い過ぎに注意すると良いと思います。
More from my site
タグ:AddQuickTag, pタグ, spanタグ, 装飾