賢威6.1ショートコード文字装飾タグやテーブルタグ一覧まとめ2

賢威6.1で利用できる文字装飾タグやテーブルタグをまとめます。
HTMLタグで使えるものから、賢威のショートコードまで記載しています。

そのままコピペで使える状態でアップしていますので、ブックマークして使用してください。

賢威専用ショートコードは賢威以外のテンプレートでは機能しません。
ショートコードの利用は計画的に使っていきましょう。

文字装飾タグ・ショートコード記事の「その１」もあります。
用途にあわせてご利用ください。

参照：賢威6.1装飾タグ・ショートコード一覧まとめ

段落タグ

以下、各種段落タグの表示と記述を解説していきます。

• h2タグ
目次
1. 段落タグ
1. h2タグで囲む例
   1. h3タグで囲む例
      1. h4タグで囲む例
         1. h5タグで囲む例
   2. チェックリストタグ（賢威専用ショートコード）
   3. 引用文
   4. ランキングタグ（賢威専用ショートコード）
2. テーブルタグで表を作成
   1. テーブルタグで表を作成　その2
   2. テキスト文字に背景色をつけるタグ（賢威ショートコード）
   3. 賢威ショートコードの関連記事

h2タグで囲む例

上記の表示は
<h2>h2タグで囲む例</h2>

• h3タグ

h3タグで囲む例

上記の表示は
<h3>h3タグで囲む例</h3>

• h4タグ

h4タグで囲む例

上記の表示は
<h4>h4タグで囲む例</h4>

• h5タグ

h5タグで囲む例

上記の表示は以下の記述で
<h5>h5タグで囲む例</h5>

チェックリストタグ（賢威専用ショートコード）

• ガッツ1
• ガッツ2
• ガッツ3

上記の記述は以下
<ul class="checklist">
<li>ガッツ1</li>
<li>ガッツ2</li>
<li>ガッツ3</li>
</ul>

引用文

僕は、男として生きていきますよ。先生、見ててくださいね。
（魁！東京信長塾より引用）

上記の記述は以下になります。

<blockquote>
僕は、男として生きていきますよ。
先生、見ててくださいね。
（魁！東京信長塾より引用）
</blockquote>

ランキングタグ（賢威専用ショートコード）

ランキングタグはolタグとliタグを用いて作成します。賢威専用ショートコードです。

1. 最強の男道　ガッツ乱平

   最強漫画の決定版
   あなたは読んだことがありますか？

2. シェイプアップ乱

   元祖最強ギャル漫画
   少年ジャンプ読者は必ず通った道！忘れてないよね？

3. アカテン教師 梨本小鉄

   元祖熱血系？教育漫画！！　これが教師系漫画のある意味はしりだ！

4. 北斗の拳

   ケンシロウの生き様は、僕の目標です。
   あたたたたたたたたたたた！！

5. キン肉マン

   実は牛丼は吉野家がモデルじゃなかったそう。歴史にifはない。

上記の記述は以下になります。

<ol class="ranking">
<li class="no01">
<p class="item-name">最強の男道　ガッツ乱平</p>
最強漫画の決定版
あなたは読んだことがありますか？</li>

<li class="no02">
<p class="item-name">シェイプアップ乱</p>
元祖最強ギャル漫画
少年ジャンプ読者は必ず通った道！忘れてないよね？
</li>

<li class="no03">
<p class="item-name">アカテン教師 梨本小鉄</p>
元祖熱血系？教育漫画！！　これが教師系漫画のある意味はしりだ！</li>

<li class="no04">
<p class="item-name">北斗の拳</p>
ケンシロウの生き様は、僕の目標です。
あたたたたたたたたたたた！！</li>

<li class="no05 end">
<p class="item-name">キン肉マン</p>
実は牛丼は吉野家がモデルじゃなかったそう。歴史にifはない。</li>
</ol>

テーブルタグで表を作成

表や図形を表示させるのにテーブルタグの利用は重要です。

上記のテーブル表の記述は以下になります。

<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タグで画像</td>
<td>★★★★★</td>
<td>テキストはココ。テキストはココ。テキストはココ。テキストはココ。</td>
</tr>
<tr>
<td>imgタグで画像</td>
<td>★★★★☆</td>
<td>テキストはココ。テキストはココ。テキストはココ。テキストはココ。</td>
</tr>
<tr>
<td>imgタグで画像</td>
<td>★★☆☆☆</td>
<td>テキストはココ。テキストはココ。テキストはココ。テキストはココ。</td>
</tr>
</tbody>
</table>
</div>

テーブルタグで表を作成　その2

上記と背景色の位置などが若干違うテーブルタグを紹介します。

上記の表示の記述は以下になります。

<div class="contents">
<table class="table-style01" summary="比較表(2)">
<tbody>
<tr>
<th class="w35 vl-m">画像または商品名</th>
<td class="w25 vl-m">★★★★★</td>
<td class="w40">テキスト・テキスト・テキスト・テキスト</td>
</tr>
<tr>
<th class="vl-m">画像または商品名</th>
<td class="vl-m al-">★★★★☆</td>
<td>テキスト・テキスト・テキスト・テキスト</td>
</tr>
<tr>
<th class="vl-m">画像または商品名</th>
<td class="vl-m">★★☆☆☆</td>
<td>テキスト・テキスト・テキスト・テキスト</td>
</tr>
</tbody>
</table>
</div>

テーブルタグを作成する時にはワードプレスプラグインを利用しても便利です。

参照：table制作簡単プラグインWP-Table Reloaded

テキスト文字に背景色をつけるタグ（賢威ショートコード）

• 黄色マーカー

<span class="box-yellow">黄色マーカー</span>

• 水色マーカー

<span class="box-aqua">水色マーカー</span>

• 灰色マーカー

<span class="box-gray">灰色マーカー</span>

• 赤色マーカー

<span class="box-red">赤色マーカー</span>

賢威ショートコードの関連記事

• 賢威6.1装飾タグ・ショートコード一覧まとめ

テキスト文字から画像の配置方法まで賢威ショートコードをまとめています。

賢威6.1WordPressテンプレート導入から設定方法まとめに戻る