賢威7の装飾コード一覧!文章を読みやすくするための23の厳選コード!

賢威7には装飾コードという便利な機能があります。

装飾コードというのは決められたコード使って、アイコンやボタンを表示することができるというもの。

ブログを見やすく装飾するためには欠かせない機能です。

装飾コードは言葉で説明するよりも実際に試してみてもらった方が分かりやすいので、今回はじゃんじゃん見本を紹介していきます。

あまり難しく考えずに、まずはコードを自分のブログに貼ってどんな表示になるのを実際に試してみてください。

 

装飾コードの使い方

装飾コードはWordPressの記事投稿画面に貼り付けることで利用できます。

その際は「テキスト」というタブをクリックしてから貼り付けるようにしてください。

今回紹介するのは賢威7のショートコード。

他のテンプレートには適用されないので注意してくださいね。

※画像にはクール版で実際に試したものと、賢威の装飾タグ一覧ページから引用したものがあります。

テキストに傍点を打つ

[code]<p>テキスト上に<span class=”dot”>傍</span><span class=”dot”>点</span>を打ちます。</p>[/code]

横線で区切った記述リスト

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

色をつけて区切った記述リスト

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

商品比較に利用できるテーブル

[code]<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>[/code]

ボタンの表示

[code]<p><a href=”#” class=”btn btn-green”><span>お問い合わせ</span></a></p>
<p><a href=”#” class=”btn btn-blue”><span>お問い合わせ</span></a></p>
<p><a href=”#” class=”btn btn-orange”><span>お問い合わせ</span></a></p>
<p><a href=”#” class=”btn btn-red”><span>お問い合わせ</span></a></p>[/code]

注意書きに使える小さなアイコン

[code]<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-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-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-folder”>フォルダ</p>
<p class=”icon-time”>時計</p>
<p class=”icon-calendar”>カレンダー</p>
<p class=”icon-building”>ビル</p>
<p class=”icon-map”>マップ</p>[/code]

大きなアイコン

[code]<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-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-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-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>[/code]

小さなチェックリスト

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

大きなチェックリスト

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

Q&A

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

<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>[/code]

ランキングの作成

[code]<ol class=”ranking-list ranking-list01″>
<li class=”rank01″>
<h4 class=”rank-title”>項目名などが入ります</h4>
<div class=”rank-thumb”><img src=”./images/sample03.jpg” alt=”猫1″ 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=”./images/sample04.jpg” alt=”猫2″ 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=”./images/sample05.jpg” alt=”猫3″ 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>
<li class=”rank06″>
<p class=”rank-title”>項目名などが入ります</p>
</li>
<li class=”rank07″>
<p class=”rank-title”>項目名などが入ります</p>
</li>
<li class=”rank08″>
<p class=”rank-title”>項目名などが入ります</p>
</li>
<li class=”rank09″>
<p class=”rank-title”>項目名などが入ります</p>
</li>
<li class=”rank10″>
<p class=”rank-title”>項目名などが入ります</p>
</li>
</ol>[/code]

商品比較やレビュー用のランキング

[code]<ol class=”ranking-list comparative-list01″>
<li class=”rank01″>
<h4 class=”rank-title”>商品名が入ります(メーカー名)</h4>
<div class=”rank-thumb”><img src=”./images/sample19.jpg” alt=”商品1″ 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>
<li class=”rank02″>
<h4 class=”rank-title”>商品名が入ります(メーカー名)</h4>
<div class=”rank-thumb”><img src=”./images/sample20.jpg” alt=”商品2″ 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>
<li class=”rank03″>
<h4 class=”rank-title”>商品名が入ります(メーカー名)</h4>
<div class=”rank-thumb”><img src=”./images/sample21.jpg” alt=”商品3″ 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>[/code]

登場人物の紹介

[code]<div class=”cast-box”>
<dl class=”cast”>
<dt class=”cast-name”>登場人物A</dt><dd class=”cast-headshot”><img src=”./images/cast01.jpg” width=”100″ height=”100″ alt=”登場人物A”></dd>
<dd class=”cast-profile”>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
</dl>
<dl class=”cast”>
<dt class=”cast-name”>登場人物B</dt><dd class=”cast-headshot”><img src=”./images/cast02.jpg” width=”100″ height=”100″ alt=”登場人物B”></dd><dd class=”cast-profile”>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
</dl>
<dl class=”cast”>
<dt class=”cast-name”>登場人物C</dt><dd class=”cast-headshot”><img src=”./images/cast03.jpg” width=”100″ height=”100″ alt=”登場人物C”></dd>
<dd class=”cast-profile”>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
</dl>
</div><!–cast-box–>[/code]

白地の吹き出し

[code]<div class=”chat-l”><div class=”talker”><b><img class=”circle” alt=”登場人物A” src=”./images/cast01.jpg”>登場人物A</b></div><div class=”bubble-wrap”><div class=”bubble rc8″><div class=”bubble-in”>
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>

<div class=”chat-r”><div class=”talker”><b><img class=”circle” alt=”登場人物B” src=”./images/cast02.jpg”>登場人物B</b></div><div class=”bubble-wrap”><div class=”bubble rc8″><div class=”bubble-in”>
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>[/code]

背景色が青の吹き出し

[code]<div class=”chat-l”><div class=”talker”><b><img class=”circle” alt=”登場人物A” src=”./images/cast01.jpg”></b></div><div class=”bubble-wrap”><div class=”bubble bubble-blue rc8″><div class=”bubble-in”>
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>

<div class=”chat-r”>
<div class=”talker”><b><img class=”circle” alt=”登場人物B” src=”./images/cast02.jpg”></b></div><div class=”bubble-wrap”><div class=”bubble bubble-blue rc8″><div class=”bubble-in”>
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>[/code]

複数人同時の吹き出し

[code]<div class=”chat-l together”><div class=”talker”><b><img class=”circle” alt=”登場人物A” src=”./images/cast01.jpg”>登場人物A</b><b><img class=”circle” alt=”登場人物B” src=”./images/cast02.jpg”>登場人物B</b><b><img class=”circle” alt=”登場人物C” src=”./images/cast03.jpg”>登場人物C</b></div><div class=”bubble-wrap”><div class=”bubble rc8″><div class=”bubble-in”>
<p>セリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入ります</p>
</div></div></div></div>

<div class=”chat-r together”><div class=”talker”><b><img class=”circle” alt=”登場人物A” src=”./images/cast01.jpg”>登場人物A</b><b><img class=”circle” alt=”登場人物B” src=”./images/cast02.jpg”>登場人物B</b>
<b><img class=”circle” alt=”登場人物C” src=”./images/cast03.jpg”>登場人物C</b></div><div class=”bubble-wrap”><div class=”bubble rc8″><div class=”bubble-in”>
<p>セリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入ります!!セリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入りますセリフが入ります!!</p>
</div></div></div></div>[/code]

文章の間

[code]<div class=”interval”>
<img src=”./images/common/interval02.png” alt=”” width=”26″ height=”26″>
<img src=”./images/common/interval02.png” alt=”” width=”26″ height=”26″>
<img src=”./images/common/interval02.png” alt=”” width=”26″ height=”26″>
</div>[/code]

次回予告

[code]<div class=”info-box”>
<p class=”trailer-text”>次回のキャッチコピーが入ります。</p>
<p>次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。<br>
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。</p>
<p class=”trailer-text-l”>次回、サイトタイトル<br>
「次回のタイトルが入ります」</p>
</div>[/code]

テキストの3カラム

[code]<div class=”col3-wrap”>
<div class=”col”>
テキストが入ります。
</div>
<div class=”col”>
テキストが入ります。
</div>
<div class=”col”>
テキストが入ります。
</div>
</div>[/code]

テキストの2カラム

[code]<div class=”col2-wrap”>
<div class=”col”>
テキストが入ります。
</div>
<div class=”col”>
テキストが入ります。
</div>
</div>[/code]

3カラムのテキスト&画像

[code]<div class=”col-wrap col3-wrap col-onimage”>

<div class=”col m20-b border”>
<a href=”#”>
<img class=”w100″ src=”./images/cast04-l.jpg” alt=”お客様4″ width=”242″ height=”176″>
</a>
<p class=”text-onimage”><a href=”#”>テキスト</a></p>
</div>

<div class=”col m20-b border”>
<a href=”#”>
<img class=”w100″ src=”./images/cast05-l.jpg” alt=”お客様5″ width=”242″ height=”176″>
</a>
<p class=”text-onimage”><a href=”#”>テキスト</a></p>
</div>

<div class=”col m20-b border”>
<a href=”#”>
<img class=”w100″ src=”./images/cast06-l.jpg” alt=”お客様6″ width=”242″ height=”176″>
</a>
<p class=”text-onimage”><a href=”#”>テキスト</a></p>
</div>

</div>[/code]

フロー図

[code]<ol class=”flow-chart”>
<li>
<div class=”process-box rc12″>
<p class=”f12em b m0-b”>手続きの流れに関する文章が入ります</p>
<p class=”m0-b”>流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p>
</div>
</li>
<li>
<div class=”process-box rc12″>
<p class=”f12em b m0-b”>手続きの流れに関する文章が入ります</p>
<p class=”m0-b”>流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p>
</div>
</li>
<li>
<div class=”process-box rc12 end”>
<p class=”f12em b m0-b”>手続きの流れに関する文章が入ります</p>
</div>
</li>
</ol>[/code]

お客様の声

[code]<div class=”voice-box rc8″>
<div class=”voice”>
<div class=”voice-headshot left”><img src=”./images/cast04.jpg” width=”100″ height=”100″ alt=”お客様1″></div>
<div class=”voice-content”>
<p class=”b”>ご職業:ネットショップ制作 ご購入年:2013年</p>
<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。</p>
</div>
</div>
</div>[/code]

ネットで収益を上げる仕組みを学びたいあなたへ

オンラインビジネスの教科書

有料で販売している動画コンテンツをメルマガ会員限定で無料公開中!

ストライクアップのメルマガ会員限定で、

  • 商品が売れるまでの流れ
  • 自分の商品の作り方
  • 決済サービスの導入方法
  • オンラインビジネスにおけるSNSやブログの役割

などを解説した動画講座(合計15本、約1時間半の動画)を完全無料で公開しています。

  • ネットで収益を上げたい方
  • オンラインで商品が売れるまでの流れ(全体像)を理解したい方
  • オンラインビジネスに必要なモノを知りたい方
  • 自分のデジタルコンテンツを作って販売したい方

はぜひ活用してください。

現在、新規メンバーの受付を停止しています。

近日開催予定のセミナー

ONLINE COURSE

オンライン講座

現在、提供しているオンライン講座です。

>>オンライン講座一覧<<

この記事を書いた人

たかゆき

広島でWEBメディアの運営やオンライン講座の制作&販売を行っている人。
WordPressを使ってホームページを作って運営できるようになるためのセミナーも開催してます。

WEBメディア運営/オンラインスクール運営/WordPress講師/Udemy講師/アフィリエイトスクールのコーチ