賢威7の装飾タグ・コード一覧【WordPress版】

WordPressテーマ賢威7の装飾タグを紹介。

賢威7でも各デザインテンプレート「スタンダード・コーポレート・プリティ・クール」版で、装飾タグのデザインが少し違いがあります。

当サイトは賢威7のスタンダード版ですが、カスタマイズして利用している為、さらに少し変更されいます。

文字装飾

文字色変更タグ

<span class="navy">文字色を紺色</span>

<span class="aqua">文字色を水色</span>

<span class="red">文字色を赤色</span>

<span class="orange">文字色をオレンジ色</span>

<span class="pink">文字色をピンク色</span>

<span class="purple">文字色を紫色</span>

<span class="green">文字色を緑色</span>

<span class="blue">文字色を青色</span>

<span class="yellow">文字色を黄色</span>

<span class="olive">文字色をオリーブ色</span

<span class="lime">文字色をライム色</span>

<span class="black">文字色を黒色</span>

<span class="gray">文字色を灰色</span>

<span class="white">文字色を白色</span>

<span class="brown">文字色を茶色</span>

背景マーカー色

<span class="box-orange">オレンジ色の背景色</span>

<span class="box-pink">ピンク色の背景色</span>

<span class="box-yellow">黄色の背景色</span>

<span class="box-lime">ライム色の背景色</span>

<span class="box-gray">灰色の背景色</span>

注意書き

※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。

<p class="note"><small>※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。</small></p>

アイコンセット

小さいアイコン

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

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

<p class="icon-new">NEW</p>

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

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

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

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

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

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

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

<p class="icon-pdf">PDF</p>

<p class="icon-zip">ZIP</p>

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

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

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

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

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

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

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

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

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

大きなアイコン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

引用エリア

blockquote要素

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

q要素

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

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

※q要素は、段落が必要のない短い引用に用いる。

記述リスト

記述リストその1

記述リストのデザインその1

要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の行数の方が少なくなるとデザインが崩れます。

記述リストのデザインその1

要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の行数の方が少なくなるとデザインが崩れます。

<dl class="dl-style01">
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の行数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の行数の方が少なくなるとデザインが崩れます。</dd>
</dl>

記述リストその2

記述リストのデザインその2

要素が縦に並びます。

記述リストのデザインその2

要素が縦に並びます。

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

チェックリスト

小さなチェックリスト

• チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。

<ul class="check-list">
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

大きなチェックリスト

• チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。

<ul class="check-list-l">
<li class="odd">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

Q&Aタグ

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

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

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

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

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

テーブルの装飾

標準用テーブル

<table>
<thead>
<tr>
<th></th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>

比較用テーブル

<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>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tbody>
</table>

ボタンのタグ

<div class="al-c m20">
<a href="#" class="btn btn-green"><span class="">送信する</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-blue"><span class="">申し込む</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-orange"><span class="">お問合せ</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-red"><span class="">購入する</span></a>
</div>

ランキング

ランキングその1

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

   

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

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

   

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

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

   

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

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

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

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

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

<ol class="ranking-list ranking-list01">
<li class="rank01">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="https://sidejob-recipe.net/wp-content/uploads/2016/11/ha16111902-200x200.jpg" alt="" 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="https://sidejob-recipe.net/wp-content/uploads/2016/11/ha16111902-200x200.jpg" alt="" 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="https://sidejob-recipe.net/wp-content/uploads/2016/11/ha16111902-200x200.jpg" alt="" 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>

ランキングその2

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

   

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

<ol class="ranking-list ranking-list02">
<li class="rank01">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="https://sidejob-recipe.net/wp-content/uploads/2016/11/ha16111902-200x200.jpg" alt="" width="200" height="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
</ol>

ランキングその3

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

   

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

<ol class="ranking-list ranking-list03">
<li class="rank01">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="https://sidejob-recipe.net/wp-content/uploads/2016/11/ha16111902-200x200.jpg" alt="" width="200" height="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
</ol>

ランキングその4

1. 

   項目名などが入ります

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

ランキングその5

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

   

   価格	5.0
   使用感	3.5
   効果	4.0

   価格：

   2,000円（税込）

   容量：

   100ml

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

   管理人のレビュー

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

   商品詳細を見る

<ol class="ranking-list comparative-list01">
<li class="rank01">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb"><img src="https://sidejob-recipe.net/wp-content/uploads/2016/11/tabu16111901-350x252.jpg" alt="" width="330" height="248"><table class="review-table">
<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>
</table></div>
<div class="item-data">
<dl>
    <dt>価格：</dt><dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
    <dt>容量：</dt><dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
</ol>

ランキングその6

1. 

   項目名などが入ります

   価格	5.0
   使用感	3.5
   効果	4.0

   価格：

   2,000円（税込）

   容量：

   100ml

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

   管理人のレビュー

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

   商品詳細を見る

<ol class="ranking-list comparative-list02">
<li class="rank01 on-image">
<div class="rank-thumb"><img src="https://sidejob-recipe.net/wp-content/uploads/2016/11/tabu16111901-350x252.jpg" alt="" width="330" height="248"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<table class="review-table">
<tr>
<th class="w40">価格</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>
</table>
<div class="item-data">
<dl>
<dt>価格：</dt><dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
<dt>容量：</dt><dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</li>
</ol>