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

賢威

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

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

賢威6.1カスタム

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

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

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

段落タグ

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

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

  • ガッツ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>

テーブルタグで表を作成

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

人気商品 評価(5段階) 詳細
imgタグで画像 ★★★★★ テキストはココ。テキストはココ。テキストはココ。テキストはココ。
imgタグで画像 ★★★★☆ テキストはココ。テキストはココ。テキストはココ。テキストはココ。
imgタグで画像 ★★☆☆☆ テキストはココ。テキストはココ。テキストはココ。テキストはココ。

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

<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.1WordPressテンプレート導入から設定方法まとめに戻る

コメント

  1. サトシ より:

    園山さん

    こんにちは、サトシです。

    賢威私も使ってますので、
    毎回勉強になります。

    ありがとうございます。

    応援していきますね!

    今後ともよろしくお願いいたします。

    サトシ

  2. 動画ハンター より:

    よければ私の運営しているサイト(無料アニメ動画まとめ)にも訪問していただけると嬉しいです(*゚▽゚*)
    また訪問しますので、今後もよろしくお願いいたします(^-^)