当サイト「役立つブログ」は、賢威7のWordPressテーマで、クール版のNavyを利用しています。
今回は、賢威7に標準装備される装飾タグを、クール版で実際に表示しながらまとめてみました。
スタンダード版を利用した装飾タグのまとめサイトは、よく見かけるのですが、クール版については、あまり目にしたことがないので、是非、参考にしてみて下さい。
[blogcard url=”https://yakudatsu-blog.com/affiliate-template/”]
賢威7の文字装飾一覧
文字を装飾することで、文章を強調することに役立ちます。
文字色を変更する方法
文字に色を付けることができます。
ブラウザでの表記 | HTMLの記述方法 |
---|---|
[html] |
|
文字色を水色に変更 |
[html] |
文字色を赤色に変更 |
[html] |
文字色をオレンジ色に変更 |
[html] |
文字色をピンク色に変更 |
[html] |
文字色を紫色に変更 |
[html] |
文字色を緑色に変更 |
[html] |
文字色を青色に変更 |
[html] |
文字色を黄色に変更 |
[html] |
文字色をオリーブ色に変更 |
[html] |
文字色をライム色に変更 |
[html] |
文字色を黒色に変更 |
[html] |
文字色を灰色に変更 |
[html] |
文字色を白色に変更 |
[html] |
文字色を茶色に変更 |
[html] |
背景色を変更する方法
文字に蛍光ペンのような背景色を付けることができます。
ブラウザでの表記 | HTMLの記述方法 |
---|---|
文字にオレンジ色の背景色 |
[html] |
文字にピンク色の背景色 |
[html] |
文字に黄色の背景色 |
[html] |
文字にライム色の背景色 |
[html] |
文字に灰色の背景色 |
[html] |
賢威7のアイコン一覧
アイコンは見出しや文章の先頭に表示することで、文章の内容を視覚的に表現することに役立ちます。
小さいアイコン
ブラウザでの表記 | HTMLの記述方法 |
---|---|
ポイント |
[html] |
注意 |
[html] |
NEW |
[html] |
初心者 |
[html] |
別ウインドウ |
[html] |
矢印上 |
[html] |
矢印右 |
[html] |
矢印下 |
[html] |
矢印左 |
[html] |
ダウンロード |
[html] |
|
[html] |
ZIP |
[html] |
メール |
[html] |
ショッピングカート |
[html] |
虫眼鏡 |
[html] |
ホーム |
[html] |
フォルダ |
[html] |
時計 |
[html] |
カレンダー |
[html] |
ビル |
[html] |
マップ |
[html] |
大きいアイコン
ブラウザでの表記 | HTMLの記述方法 |
---|---|
ポイント |
[html] |
注意 |
[html] |
NEW |
[html] |
初心者 |
[html] |
別ウインドウ |
[html] |
矢印上 |
[html] |
矢印右 |
[html] |
矢印下 |
[html] |
矢印左 |
[html] |
ダウンロード |
[html] |
|
[html] |
ZIP |
[html] |
メール |
[html] |
ショッピングカート |
[html] |
虫眼鏡 |
[html] |
ホーム |
[html] |
フォルダ |
[html] |
時計 |
[html] |
カレンダー |
[html] |
ビル |
[html] |
マップ |
[html] |
賢威7のリストタグ一覧
ul要素
箇条書きのリストです。
- リスト項目です。
- リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。
- リスト項目です。
[html]
<ul>
<li>リスト項目です。</li>
<li>リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。</li>
<li>リスト項目です。</li>
</ul>
[/html]
ol要素
数字のリストです。
- リスト項目です。
- リスト項目です。文章が長いリストはこのように表示されます。リスト項目です。文章が長いリストはこのように表示されます。
- リスト項目です。
[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のランキングタグ一覧
王冠アイコンのランキング
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
[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]
メダルアイコンのランキング
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
[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]
シンプルアイコンのランキング
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
[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の情報比較タグ
王冠アイコンの商品比較
-
商品名が入ります(メーカー名)
価格 5.0 使用感 3.5 効果 4.0 - 価格:
- 3,000円(税込)
- 容量:
- 150ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
-
商品名が入ります(メーカー名)
価格 5.0 使用感 3.5 効果 4.0 - 価格:
- 3,000円(税込)
- 容量:
- 150ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
-
商品名が入ります(メーカー名)
価格 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]
画像に番号を重ねる商品比較
-
商品名が入ります(メーカー名)
価格 5.0 使用感 3.5 効果 4.0 - 価格:
- 3,000円(税込)
- 容量:
- 150ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
-
商品名が入ります(メーカー名)
価格 5.0 使用感 3.5 効果 4.0 - 価格:
- 3,000円(税込)
- 容量:
- 150ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
-
商品名が入ります(メーカー名)
価格 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]
まとめ
今回は、当ブログが利用している賢威7のクール版Navyで装飾タグを表示してみました。
クール版では、アイコンなどはシンプルに表示されるものが多く、もし、カラー色のアイコンを利用したい方は、スタンダード版の利用をおすすめします。
スタンダード版では、下図のようにアイコンが表示されます。
この他にも、カラー表示されるものが多くあります。
私は、スタンダード版もクール版も利用していて、異なるブログで今も運営中ですが、どちらかと言うと、シンプルなクール版の方が好みです。
ただ、ワードプレスでは、殆どのことがプラグインで簡単に対応できますので、特に、賢威7の装飾タグに拘る必要はないと思いますが、知っていて損はないと思いますので、何かの際には、是非、活用してみて下さい。
[blogcard url=”https://yakudatsu-blog.com/keni7-customize/”]