賢威7の装飾タグ一覧をクール版で公開｜標準機能でできる記事の装飾

当サイト「役立つブログ」は、賢威7のWordPressテーマで、クール版のNavyを利用しています。

今回は、賢威7に標準装備される装飾タグを、クール版で実際に表示しながらまとめてみました。

スタンダード版を利用した装飾タグのまとめサイトは、よく見かけるのですが、クール版については、あまり目にしたことがないので、是非、参考にしてみて下さい。

[blogcard url=”https://yakudatsu-blog.com/affiliate-template/”]

賢威7の文字装飾一覧

文字を装飾することで、文章を強調することに役立ちます。

文字色を変更する方法

文字に色を付けることができます。

ブラウザでの表記 HTMLの記述方法

文字色を紺色に変更

[html]
<p class="navy">文字色を紺色に変更</p>
[/html]

文字色を水色に変更

[html]
<p class="aqua">文字色を水色に変更</p>
[/html]

文字色を赤色に変更

[html]
<p class="red">文字色を赤色に変更</p>
[/html]

文字色をオレンジ色に変更

[html]
<p class="orange">文字色をオレンジ色に変更</p>
[/html]

文字色をピンク色に変更

[html]
<p class="pink">文字色をピンク色に変更</p>
[/html]

文字色を紫色に変更

[html]
<p class="purple">文字色を紫色に変更</p>
[/html]

文字色を緑色に変更

[html]
<p class="green">文字色を緑色に変更</p>
[/html]

文字色を青色に変更

[html]
<p class="blue">文字色を青色に変更</p>
[/html]

文字色を黄色に変更

[html]
<p class="yellow">文字色を黄色に変更</p>
[/html]

文字色をオリーブ色に変更

[html]
<p class="olive">文字色をオリーブ色に変更</p>
[/html]

文字色をライム色に変更

[html]
<p class="lime">文字色をライム色に変更</p>
[/html]

文字色を黒色に変更

[html]
<p class="black">文字色を黒色に変更</p>
[/html]

文字色を灰色に変更

[html]
<p class="gray">文字色を灰色に変更</p>
[/html]

文字色を白色に変更

[html]
<p class="white">文字色を白色に変更</p>
[/html]

文字色を茶色に変更

[html]
<p class="brown">文字色を茶色に変更</p>
[/html]

背景色を変更する方法

文字に蛍光ペンのような背景色を付けることができます。

ブラウザでの表記 HTMLの記述方法
文字にオレンジ色の背景色

[html]
文字に<span class="box-orange">オレンジ色の背景色</span>
[/html]
文字にピンク色の背景色

[html]
文字に<span class="box-pink">ピンク色の背景色</span>
[/html]
文字に黄色の背景色

[html]
文字に<span class="box-yellow">黄色の背景色</span>
[/html]
文字にライム色の背景色

[html]
文字に<span class="box-lime">ライム色の背景色</span>
[/html]
文字に灰色の背景色

[html]
文字に<span class="box-gray">灰色の背景色</span>
[/html]

賢威7のアイコン一覧

アイコンは見出しや文章の先頭に表示することで、文章の内容を視覚的に表現することに役立ちます。

小さいアイコン

ブラウザでの表記 HTMLの記述方法

ポイント

[html]
<p class="icon-point">ポイント</p>
[/html]

注意

[html]
<p class="icon-caution">注意</p>
[/html]

NEW

[html]
<p class="icon-new">NEW</p>
[/html]

初心者

[html]
<p class="icon-wakaba">初心者</p>
[/html]

別ウインドウ

[html]
<p class="icon-blank">別ウインドウ</p>
[/html]

矢印上

[html]
<p class="icon-arrow-t">矢印上</p>
[/html]

矢印右

[html]
<p class="icon-arrow-r">矢印右</p>
[/html]

矢印下

[html]
<p class="icon-arrow-b">矢印下</p>
[/html]

矢印左

[html]
<p class="icon-arrow-l">矢印左</p>
[/html]

ダウンロード

[html]
<p class="icon-dl">ダウンロード</p>
[/html]

PDF

[html]
<p class="icon-pdf">PDF</p>
[/html]

ZIP

[html]
<p class="icon-zip">ZIP</p>
[/html]

メール

[html]
<p class="icon-mail">メール</p>
[/html]

ショッピングカート

[html]
<p class="icon-cart">ショッピングカート</p>
[/html]

虫眼鏡

[html]
<p class="icon-search">虫眼鏡</p>
[/html]

ホーム

[html]
<p class="icon-home">ホーム</p>
[/html]

フォルダ

[html]
<p class="icon-folder">フォルダ</p>
[/html]

時計

[html]
<p class="icon-time">時計</p>
[/html]

カレンダー

[html]
<p class="icon-calendar">カレンダー</p>
[/html]

ビル

[html]
<p class="icon-building">ビル</p>
[/html]

マップ

[html]
<p class="icon-map">マップ</p>
[/html]

大きいアイコン

ブラウザでの表記 HTMLの記述方法

ポイント

[html]
<p class="icon-point-l">ポイント</p>
[/html]

注意

[html]
<p class="icon-caution-l">注意</p>
[/html]

NEW

[html]
<p class="icon-new-l">NEW</p>
[/html]

初心者

[html]
<p class="icon-wakaba-l">初心者</p>
[/html]

別ウインドウ

[html]
<p class="icon-blank-l">別ウインドウ</p>
[/html]

矢印上

[html]
<p class="icon-arrow-t-l">矢印上</p>
[/html]

矢印右

[html]
<p class="icon-arrow-r-l">矢印右</p>
[/html]

矢印下

[html]
<p class="icon-arrow-b-l">矢印下</p>
[/html]

矢印左

[html]
<p class="icon-arrow-l-l">矢印左</p>
[/html]

ダウンロード

[html]
<p class="icon-dl-l">ダウンロード</p>
[/html]

PDF

[html]
<p class="icon-pdf-l">PDF</p>
[/html]

ZIP

[html]
<p class="icon-zip-l">ZIP</p>
[/html]

メール

[html]
<p class="icon-mail-l">メール</p>
[/html]

ショッピングカート

[html]
<p class="icon-cart-l">ショッピングカート</p>
[/html]

虫眼鏡

[html]
<p class="icon-search-l">虫眼鏡</p>
[/html]

ホーム

[html]
<p class="icon-home-l">ホーム</p>
[/html]

フォルダ

[html]
<p class="icon-folder-l">フォルダ</p>
[/html]

時計

[html]
<p class="icon-time-l">時計</p>
[/html]

カレンダー

[html]
<p class="icon-calendar-l">カレンダー</p>
[/html]

ビル

[html]
<p class="icon-building-l">ビル</p>
[/html]

マップ

[html]
<p class="icon-map-l">マップ</p>
[/html]

賢威7のリストタグ一覧

ul要素

箇条書きのリストです。

  • リスト項目です。
  • リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。
  • リスト項目です。

[html]
<ul>
<li>リスト項目です。</li>
<li>リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。</li>
<li>リスト項目です。</li>
</ul>
[/html]

ol要素

数字のリストです。

  1. リスト項目です。
  2. リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。
  3. リスト項目です。

[html]
<ol>
<li>リスト項目です。</li>
<li>リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。</li>
<li>リスト項目です。</li>
</ol>
[/html]

リストの横並び

横並びのリストです。先頭の点は非表示になっています。

  • 横並びのリスト項目です。
  • 横並びのリスト項目です。
  • 横並びのリスト項目です。

[html]
<ul class="inline">
<li>横並びのリスト項目です。</li>
<li>横並びのリスト項目です。</li>
<li>横並びのリスト項目です。</li>
</ul>
[/html]

リストの先頭の点を非表示にする

箇条書きリストの先頭の点を非表示にしています。

  • リスト項目です。
  • リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。
  • リスト項目です。

[html]
<ul class="none">
<li>リスト項目です。</li>
<li>リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。</li>
<li>リスト項目です。</li>
</ul>
[/html]

賢威7の記述リスト一覧

記述リスト（標準）

項目
本文の説明が入ります。本文の説明が入ります。
項目
本文の説明が入ります。本文の説明が入ります。本文の説明が入ります。本文の説明が入ります。本文の説明が入ります。

[html]
<dl>
<dt>項目</dt>
<dd>本文の説明が入ります。本文の説明が入ります。</dd>
<dt>項目</dt>
<dd>本文の説明が入ります。本文の説明が入ります。本文の説明が入ります。本文の説明が入ります。本文の説明が入ります。</dd>
</dl>

[/html]

記述リスト（デザイン1）

記述リストのデザイン1
要素が横に並びます。要素が横に並びます。
記述リストのデザイン1
要素が横に並びます。要素が横に並びます。要素が横に並びます。要素が横に並びます。

[html]
<dl class="dl-style01">
<dt>記述リストのデザイン1</dt>
<dd>要素が横に並びます。要素が横に並びます。</dd>
<dt>記述リストのデザイン1</dt>
<dd>要素が横に並びます。要素が横に並びます。要素が横に並びます。要素が横に並びます。</dd>
</dl>
[/html]

記述リスト（デザイン2）

記述リストのデザイン2
要素が縦に並びます。要素が縦に並びます。
記述リストのデザイン2
要素が縦に並びます。要素が縦に並びます。要素が縦に並びます。要素が縦に並びます。

[html]
<dl class="dl-style02">
<dt>記述リストのデザイン2</dt>
<dd>要素が縦に並びます。要素が縦に並びます。</dd>
<dt>記述リストのデザイン2</dt>
<dd>要素が縦に並びます。要素が縦に並びます。要素が縦に並びます。要素が縦に並びます。</dd>
</dl>
[/html]

賢威7のチェックリストタグ一覧

小さいチェックリスト

  • チェックリストの項目です。
  • チェックリストの項目です。文章が長いリストはこのように表示されます。チェックリストの項目です。文章が長いリストはこのように表示されます。
  • チェックリストの項目です。

[html]
<ul class="check-list">
<li>チェックリストの項目です。</li>
<li>チェックリストの項目です。文章が長いリストはこのように表示されます。チェックリストの項目です。文章が長いリストはこのように表示されます。</li>
<li>チェックリストの項目です。</li>
</ul>
[/html]

大きいチェックリスト

  • チェックリストの項目です。
  • チェックリストの項目です。文章が長いリストはこのように表示されます。チェックリストの項目です。文章が長いリストはこのように表示されます。
  • チェックリストの項目です。

[html]
<ul class="check-list-l">
<li>チェックリストの項目です。</li>
<li>チェックリストの項目です。文章が長いリストはこのように表示されます。チェックリストの項目です。文章が長いリストはこのように表示されます。</li>
<li>チェックリストの項目です。</li>
</ul>
[/html]

賢威7の引用エリアタグ

blockquote要素

blockquoteタグは文章が引用文であることを表す装飾タグです。

ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。

引用元: 参照記事のタイトル

[html]
<blockquote>
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
<cite>引用元: <a class="outbound" href="https://www.google.co.jp/" target="_blank">参照記事のタイトル</a></cite>
</blockquote>
[/html]

q要素

qタグは文章の一部が引用文であることを表す装飾タグです。

ここにテキストが入ります。文中に出てくる短文の引用部分への装飾ですここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

[html]
ここにテキストが入ります。<q>文中に出てくる短文の引用部分への装飾です</q>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
[/html]

賢威7のテーブルタグ

標準のテーブル

ヘッダ項目 ヘッダ項目
項目名1 項目内容 項目内容
項目名2 項目内容 項目内容
項目名3 項目内容 項目内容

[html]
<table>
<thead>
<tr>
<th></th>
<th>ヘッダ項目</th>
<th>ヘッダ項目</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名1</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名2</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名3</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>
[/html]

比較用テーブル

商品情報の比較などに利用できる比較用テーブルの例です。

項目内容 項目内容 項目内容
項目名まとめ 項目内容 項目内容 項目内容
項目名1 項目内容 項目内容 項目内容
項目名2 項目内容 項目内容 項目内容
項目名3 項目内容 項目内容 項目内容

[html]
<table class="table-comparison">
<thead>
<tr>
<th class="w25"></th>
<th class="w25">項目内容</th>
<th class="highlight w25"><span class="f12em">項目内容</span></th>
<th class="w25">項目内容</th>
</tr>
</thead>
<tfoot>
<tr>
<th>項目名まとめ</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>項目名1</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名2</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名3</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tbody>
</table>
[/html]

賢威7のコンバージョンボタンのタグ

リンクボタン

送信内容を確認

送信内容を確認

送信内容を確認

送信内容を確認

[html]
<a href="#" class="btn btn-green">送信内容を確認</a>
<a href="#" class="btn btn-blue">送信内容を確認</a>
<a href="#" class="btn btn-orange">送信内容を確認</a>
<a href="#" class="btn btn-red">送信内容を確認</a>
[/html]

各丸のボタンRC12

送信内容を確認

送信内容を確認

送信内容を確認

送信内容を確認

[html]
<a href="#" class="btn btn-green rc12"><span>送信内容を確認</span></a>
<a href="#" class="btn btn-blue rc12"><span>送信内容を確認</span></a>
<a href="#" class="btn btn-orange rc12"><span>送信内容を確認</span></a>
<a href="#" class="btn btn-red rc12"><span>送信内容を確認</span></a>
[/html]

賢威7のQ＆Aタグ

ここには質問文が入ります。
ここには回答文が入ります。ここには回答文が入ります。
ここには回答文が入ります。ここには回答文が入ります。ここには回答文が入ります。
ここには質問文が入ります。
ここには回答文が入ります。ここには回答文が入ります。
ここには回答文が入ります。ここには回答文が入ります。ここには回答文が入ります。

[html]
<dl class="qa-list">
<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入ります。ここには回答文が入ります。
ここには回答文が入ります。ここには回答文が入ります。ここには回答文が入ります。</dd>
<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入ります。ここには回答文が入ります。
ここには回答文が入ります。ここには回答文が入ります。ここには回答文が入ります。</dd>
</dl>
[/html]

賢威7のランキングタグ一覧

王冠アイコンのランキング

  1. 項目名などが入ります

    ranking01

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    ranking02

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    ranking03

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

[html]
<ol class="ranking-list ranking-list01">
<li class="rank01">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking01" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank02">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking02" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank03">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking03" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank04">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank05">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
</ol>
[/html]

メダルアイコンのランキング

  1. 項目名などが入ります

    ranking01

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    ranking02

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    ranking03

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

[html]
<ol class="ranking-list ranking-list02">
<li class="rank01">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking01" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank02">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking02" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank03">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking03" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank04">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank05">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
</ol>
[/html]

シンプルアイコンのランキング

  1. 項目名などが入ります

    ranking01

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    ranking02

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    ranking03

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

[html]
<ol class="ranking-list ranking-list03">
<li class="rank01">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking01" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank02">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking02" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank03">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/7566d13fb5a1181ebf90151b16ba2c70.jpg" alt="ranking03" width="200" height="200" /></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank04">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
<li class="rank05">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
</ol>
[/html]

賢威7の情報比較タグ

王冠アイコンの商品比較

  1. 商品名が入ります（メーカー名）

    ranking001

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    3,000円（税込）
    容量：
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. 商品名が入ります（メーカー名）

    ranking002

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    3,000円（税込）
    容量：
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. 商品名が入ります（メーカー名）

    ranking003

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    3,000円（税込）
    容量：
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

[html]
<ol class="ranking-list comparative-list01">
<li class="rank01">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">

<img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/ceaa77731cdfae55471df10811355b0c.jpg" alt="ranking001" width="330" height="248" />
<table class="review-table">
<tbody>
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格：</dt>
<dd><span class="red f12em">3,000円</span><small>（税込）</small></dd>
</dl>
<dl>
<dt>容量：</dt>
<dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
<p class="al-r"><a class="btn btn-detail" href="#"><span class="">商品詳細を見る</span></a></p>

</div></li>
<li class="rank02">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">

<img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/ceaa77731cdfae55471df10811355b0c.jpg" alt="ranking002" width="330" height="248" />
<table class="review-table">
<tbody>
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格：</dt>
<dd><span class="red f12em">3,000円</span><small>（税込）</small></dd>
</dl>
<dl>
<dt>容量：</dt>
<dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
<p class="al-r"><a class="btn btn-detail" href="#"><span class="">商品詳細を見る</span></a></p>

</div></li>
<li class="rank03">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">

<img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/ceaa77731cdfae55471df10811355b0c.jpg" alt="ranking003" width="330" height="248" />
<table class="review-table">
<tbody>
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格：</dt>
<dd><span class="red f12em">3,000円</span><small>（税込）</small></dd>
</dl>
<dl>
<dt>容量：</dt>
<dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
<p class="al-r"><a class="btn btn-detail" href="#"><span class="">商品詳細を見る</span></a></p>

</div></li>
</ol>
[/html]

画像に番号を重ねる商品比較

  1. 商品名が入ります（メーカー名）

    ranking001

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    3,000円（税込）
    容量：
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. 商品名が入ります（メーカー名）

    ranking002

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    3,000円（税込）
    容量：
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. 商品名が入ります（メーカー名）

    ranking003

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    3,000円（税込）
    容量：
    150ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

[html]
<ol class="ranking-list comparative-list02">
<li class="rank01 on-image">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">

<img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/ceaa77731cdfae55471df10811355b0c.jpg" alt="ranking001" width="330" height="248" />
<table class="review-table">
<tbody>
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格：</dt>
<dd><span class="red f12em">3,000円</span><small>（税込）</small></dd>
</dl>
<dl>
<dt>容量：</dt>
<dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
<p class="al-r"><a class="btn btn-detail" href="#"><span class="">商品詳細を見る</span></a></p>

</div></li>
<li class="rank02 on-image">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">

<img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/ceaa77731cdfae55471df10811355b0c.jpg" alt="ranking002" width="330" height="248" />
<table class="review-table">
<tbody>
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格：</dt>
<dd><span class="red f12em">3,000円</span><small>（税込）</small></dd>
</dl>
<dl>
<dt>容量：</dt>
<dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
<p class="al-r"><a class="btn btn-detail" href="#"><span class="">商品詳細を見る</span></a></p>

</div></li>
<li class="rank03 on-image">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">

<img src="http://yakudatsu-blog.com/wp/wp-content/uploads/2017/09/ceaa77731cdfae55471df10811355b0c.jpg" alt="ranking003" width="330" height="248" />
<table class="review-table">
<tbody>
<tr>
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="item-data">
<dl>
<dt>価格：</dt>
<dd><span class="red f12em">3,000円</span><small>（税込）</small></dd>
</dl>
<dl>
<dt>容量：</dt>
<dd>150ml</dd>
</dl>
</div>
<div class="rank-desc">

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
<p class="al-r"><a class="btn btn-detail" href="#"><span class="">商品詳細を見る</span></a></p>

</div></li>
</ol>
[/html]

 

2万人を超えるユーザーが選んだSEOテンプレート【賢威】

まとめ

今回は、当ブログが利用している賢威7のクール版Navyで装飾タグを表示してみました。

クール版では、アイコンなどはシンプルに表示されるものが多く、もし、カラー色のアイコンを利用したい方は、スタンダード版の利用をおすすめします。

スタンダード版では、下図のようにアイコンが表示されます。

賢威7スタンダード版の装飾アイコン

この他にも、カラー表示されるものが多くあります。

私は、スタンダード版もクール版も利用していて、異なるブログで今も運営中ですが、どちらかと言うと、シンプルなクール版の方が好みです。

ただ、ワードプレスでは、殆どのことがプラグインで簡単に対応できますので、特に、賢威7の装飾タグに拘る必要はないと思いますが、知っていて損はないと思いますので、何かの際には、是非、活用してみて下さい。

[blogcard url=”https://yakudatsu-blog.com/keni7-customize/”]