賢威7 WordPress版「装飾タグ」一覧③備忘録

賢威7にバージョンアップして多彩な装飾タグが増えたので、ホームページ作りやブログ記事の表現方法が増えました。html版のスタイルガイドのソースコードを見ながらでは大変なので、備忘録として作ってみました。まだ載せていない装飾タグもあるのですが、私自身が使いそうにないので省きました。(^^ゞ

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

多段カラム

4カラム

<div class="col4-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
<div class="col4-wrap">
<div class="col col_2of4">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
<div class="col4-wrap">
<div class="col col_3of4">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>

3カラム

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

<div class="col col_2of3">
	テキストが入ります。
</div>
<div class="col">
	テキストが入ります。
</div>
</div>

2カラム

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

画像とテキストの組み合わせ

画像の上にテキストを配置

<div class="col-wrap col3-wrap col-onimage">

<div class="col m20-b border">
<a href="#">
<img class="w100" src="../■■.jpg" alt="■" 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="../□□.jpg" alt="□" 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="../◆◆.jpg" alt="◆" width="242" height="176">
</a>
<p class="text-onimage"><a href="#">テキスト</a></p>
</div>

</div>

背景画像の上にテキストを配置

<div class="col-wrap col3-wrap col-onimage02">

<div class="col m20-b border" style="background-image: url(../▲▲.jpg);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>

<div class="col m20-b border" style="background-image: url(../△△.jpg);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>

<div class="col m20-b border" style="background-image: url(../▼▼.jpg);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>

</div>

Q&A

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

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

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

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

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

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

フロー図

1. 手続きの流れに関する文章が入ります

   流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

2. 手続きの流れに関する文章が入ります

   流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

3. 手続きの流れに関する文章が入ります

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

画像の装飾

<div class="col2-wrap al-c">
	<div class="col">
		<figure>
			<img src="../●●.jpg" alt="●" width="300" height="300">
			<figcaption class="al-c">ノーマル</figcaption>
		</figure>
	</div>
	<div class="col" style="border:0;">
		<figure>
			<img class="shadow" src="../●●.jpg" alt="●" width="300" height="300">
			<figcaption class="al-c">影付き</figcaption>
		</figure>
	</div>
</div>

<div class="col2-wrap al-c">
	<div class="col" style="border:0;">
		<figure>
			<img class="shadow02" src="../●●.jpg" alt="●" width="300" height="300">
			<figcaption class="al-c">影付き2</figcaption>
		</figure>
	</div>
	<div class="col">
		<figure>
			<img class="outline" src="../●●.jpg" alt="●" width="300" height="300">
			<figcaption class="al-c">囲み線（1px）</figcaption>
		</figure>
	</div>
</div>

<div class="col2-wrap al-c">
	<div class="col" style="border:0;">
		<figure>
			<img class="rc12" src="../●●.jpg" alt="●" width="300" height="300">
			<figcaption class="al-c">角丸</figcaption>
		</figure> 
	</div>
	<div class="col">
		<figure>
			<img class="circle" src="../●●.jpg" alt="●" width="300" height="300">
			<figcaption class="al-c">円</figcaption>
		</figure>
	</div>
</div>

<div class="col2-wrap al-c">
	<div class="col" style="border:0;">
		<figure>
			<img class="frame" src="../●●.jpg" alt="●" width="300" height="300">
			<figcaption class="al-c">写真風</figcaption>
		</figure>
	</div>
</div>

文章中の間の表現

本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。

本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。

<p>本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。<br>
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。</p>

<div class="interval">
<img src="../images/common/interval01.png" alt="" width="24" height="24">
<img src="../images/common/interval01.png" alt="" width="24" height="24">
<img src="../images/common/interval01.png" alt="" width="24" height="24">
</div>

<p>本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。<br>
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。</p>

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

画像ズームでの強調

本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です
本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です

<p>本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です<br>
本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です</p>

<p class="al-c m200-t"><img class="resize40" alt="猫" src="../images/sample02.jpg"></p>

<p class="al-c m200-t"><img class="resize70" alt="猫" src="../images/sample02.jpg"></p>

<p class="al-c m200-t"><img alt="猫" src="../images/sample02.jpg"></p>

次回予告

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

動画等の埋め込み

Youtube

<div class="v-wrap al-c m30-b"><iframe width="560" height="315" src="https://www.youtube.com/embed/●●●" frameborder="0" allowfullscreen></iframe></div>

埋め込みGoogleフォーム

<iframe src="https://docs.google.com/a/web-rider.com/forms/d/■■■" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます...</iframe>

お客様の声

写真左

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

写真右

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

吹き出し右向き

<div class="chat-l">
	<div class="talker"><b><img class="circle" alt="▲" src="../images/▲▲.jpg">登場人物3</b></div>
	<div class="bubble-wrap">
		<div class="bubble rc8 m10-b">
		<div class="bubble-in b-arw20">
		<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
		ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
		ここにお客様のご感想が入りますここにお客様のご感想が入ります</p>
		</div>
		</div>
		<p class="al-r fl-c">ご職業：ネットショップ制作　ご購入年：2013年</p>
</div>
</div>

吹き出し左向き

<div class="chat-r">
	<div class="talker"><b><img class="circle" alt="◆" src="../images/◆◆.jpg">登場人物4</b></div>
	<div class="bubble-wrap">
		<div class="bubble rc8 m10-b">
		<div class="bubble-in b-arw20">
		<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
		ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
		ここにお客様のご感想が入りますここにお客様のご感想が入ります</p>
		</div>
		</div>
		<p class="fl-c">ご職業：ネットショップ制作　ご購入年：2013年</p>
</div>
</div>

【めぐり整体所 infomation 】

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

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