賢威7 Wordpress版の「装飾タグ」一覧①備忘録

賢威8の装飾タグはコチラ

賢威7の方へ

ごめんなさい！m(__)m
当サイトは、テンプレートを賢威7から賢威8へ変更しました。
その影響で、賢威7の装飾タグが一部正しく表示されなくなりました。
タグの表記に間違いないのでご利用いただくには問題ありませんが、
イメージがし難いので賢威7テンプレート使用の装飾タグがある
サイトをご利用頂く方がよろしいかと思います。
ご不便おかけし申し訳ございません。【追記　2018年10月4日】

いつもなら賢威がバージョンアップされるたびに装飾タグ一覧を投稿してくださるブロガーさんがいらっしゃって助かるのですが、（賢威7が変更箇所が多く賢威6.2のままなのか）いつになっても投稿してくださる方がいらっしゃらないので、他力本願じゃダメだと思い作ってみました。

賢威7.0ビューティー版の表示です。タグの記述方法は同じだと思いますが、コーポレート版・プリティ版・クール版ではアイコンおよび表示が変わる可能性があります。

文字色

肯定

HTMLの記述方法	ブラウザでの表示結果
<span class="navy">文字色を紺色</span>	文字色を紺色
<span class="aqua">文字色を水色</span>	文字色を水色

否定・禁止

HTMLの記述方法	ブラウザでの表示結果
<span class="red">文字色を赤色</span>	文字色を赤色

シンプルな強調

HTMLの記述方法	ブラウザでの表示結果
<span class="orange">文字色をオレンジ色</span>	文字色をオレンジ色
<span class="pink">文字色をピンク色</span>	文字色をピンク色
<span class="purple">文字色を紫色</span>	文字色を紫色

用語の解説・例示

HTMLの記述方法	ブラウザでの表示結果
<span class="green">文字色を緑色</span>	文字色を緑色

その他の色

HTMLの記述方法	ブラウザでの表示結果
<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 style="background-color: #ccc;">文字色を白色変更可能</span></span>	文字色を白色変更可能
<span class="brown">文字色を茶色</span>	文字色を茶色

マーカー表示

HTMLの記述方法	ブラウザでの表示結果
<span class="line-orange">オレンジ色の背景色</span>	オレンジ色の背景色
<span class="line-pink">ピンク色の背景色</span>	ピンク色の背景色
<span class="line-yellow">黄色の背景色</span>	黄色の背景色
<span class="line-lime">ライム色の背景色</span>	ライム色の背景色
<span class="line-gray">灰色の背景色</span>	灰色の背景色

テキストの表現

記述リスト（旧定義リスト）

「定義リスト（definition list）」は、html5では「記述リスト（description list）」と改められました。

dt要素: dd要素dd要素dd要素dd要素

定義リストとして使用する場合

dt要素とdfn要素で用語をマークアップ: dd要素に定義を記述します。

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

記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。

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

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

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

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

連続改行

↓５つ連続した改行を入れます。

↑５つ連続した改行をいれました。

↓５つ連続した改行を入れます。






↑５つ連続した改行をいれました。

「br num=”ｘ”」のｘに数字をいれると、数字の数だけ改行が入ります。

注意書き

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

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

傍点

テキスト上に傍点を打ちます。

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

整形済みテキスト

整形済みテキストです。コードなどを記述する場合は以下のようにcode要素でマークアップします。

<code>コード</code>

インラインの装飾

em要素: 強勢する（アクセントを付ける）箇所を表す

<p>em要素: <em>強勢する（アクセントを付ける）箇所を表す</em></p>

strong要素: 強い重要性を表す

<p>strong要素: <strong>強い重要性を表す</strong></p>

small要素: 免責・警告・著作権などの注釈や細目を表す

<p>small要素: <small>免責・警告・著作権などの注釈や細目を表す</small></p>

s要素: ~~すでに正確ではなくなった内容を表す~~テキストが入ります。

<p>s要素: <s>すでに正確ではなくなった内容を表す</s>テキストが入ります。</p>

abbr要素: HTML等の略語

<p>abbr要素: <abbr title="HyperText Markup Language">HTML</abbr>等の略語</p>

透過ボックス

サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。

WordPress版のimageフォルダには画像が入っていないため、html版をDLして”transparent-panel-bg2.jpg”をimageフォルダにアップロードする必要があります。

<div class="transparent-panel-wrap">
	<div class="transparent-panel">
		<p>サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。</p>
	</div>
</div>

テーブルレイアウト

標準のテーブル

	項目名	項目名
項目名が入ります	項目内容	項目内容
項目名が入ります	項目内容	項目内容
項目名が入ります	項目内容	項目内容

<div class="table-scroll">
<table style="width: 500px;">
<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>
</div>

比較用テーブル

	項目内容	項目内容	項目内容
項目名が入ります	項目内容	項目内容	項目内容
項目名が入ります	項目内容	項目内容	項目内容
項目名が入ります	項目内容	項目内容	項目内容
項目名が入ります	項目内容	項目内容	項目内容

<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>

引用エリア

blockquote要素

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

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

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

q要素

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

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

チェックリスト

小さなチェックリスト

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

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

大きなチェックリスト

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

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

アイコンセット

小さなアイコン

HTMLの記述方法	ブラウザでの表示結果
<p class="icon_point">ポイント</p>	ポイント
<p class="icon_caution">注意</p>	注意
<p class="icon-new">NEW</p>	NEW
<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>	PDF
<p class="icon-zip">ZIP</p>	ZIP
<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>	マップ

大きなアイコン

HTMLの記述方法	ブラウザでの表示結果
<p class="icon_point-l">ポイント</p>	ポイント
<p class="icon_caution-l">注意</p>	注意
<p class="icon-new-l">NEW</p>	NEW
<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>	PDF
<p class="icon-zip-l">ZIP</p>	ZIP
<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>	マップ

コンバージョンボタン

送信内容を確認する

<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>

【めぐり整体所 infomation 】

2020年1月31日を持ちまして、大津市杉浦町の「めぐり整体所」は閉業いたしました。
10年間、ありがとうございました。心より感謝申し上げます。

今後は、会員制整体院「めぐりハイパー」として活動させて頂きます。
当面の間、出張整体がメインとなります。

めぐりハイパー

会員制

これまで「めぐり整体所」をご利用くださった方を会員をさせて頂きます。
（新規会員に関しては、当面の間は会員様のご紹介者のみとさせて頂きます。）

会費は0円ですが、限られた時間での営業となるため、定期的にご利用
ご利用下さる方を優先的にさせて頂きます。

毎月利用の方＞3ヶ月毎の方＞症状が出た時のみの方

出張エリア

大津市・草津市（詳細は今後決めていきます。）

仮店舗（5月予定）

どうしても店舗でという方を対象に受け入れていきます。
大津市膳所にて、月2回程度。（日曜日の時間限定）

※詳細が決まり次第にお知らせします。

営業日・営業時間

【営業日】：土曜・日曜
【営業時間】：10:00～16:00

料金

	施術料金	加算
整体施術	5,500円（税込）	駐車料金+出張料
O脚矯正	6,600円（税込）	駐車料金+出張料

※可能な限り「加算」を頂かないようにしますが、駐車場が必要な場合や
　遠方に限り、1000円前後で加算させて頂きます。（要相談）

文字色

肯定