CSS note

rd-square> content> p

<div class="rd-square" style="width:300px">
<div class="content">
<p>center</p>
</div>
</div>

rd-square> .content .centered Class

<div class="rd-square" style="width:300px">
<div class="content centered">
<h3>title</h3>
<p>center</p>
<a href="http://www.tenman.info">tenman.info</a>
</div>
</div>

centered class required width and height propety.

centered class単独で使用する場合は、width heightの指定が必要

.centered> .trancate

<div style="width:50vw;min-width:296px;height:10em;border:1px solid #ccc;padding:1em;">
<div class="content centered">
<h3 style="margin0;">title</h3>
<p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="http://www.tenman.info">tenman.info</a>
</div>
</div>

centered class required width and height propety.
trancate class needs data-rows attribute.( if not exists attribute , default 3lines )
Elemant p and h* not support div

centered class単独で使用する場合は、width heightの指定が必要
trancate classは、マルチラインclipを行います。data-rowsで指定した行数よりはみ出す場合は、非表示　data-rowsが指定されない場合は、3行
使用できるのは、h*要素と、p要素　div要素など、WordPressが、P要素を補完する要素では、使用できません。

Raindrops Grid Class + .trancate

<div class="line">
<div class="unit size1of3">
 <div class="content centered">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>
</div>

<div class="unit size1of3">
 <div class="content centered">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>
</div>
<div class="unit size1of3">
 <div class="content centered">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>
</div>
</div>

Raindrops Grid Class + equal-height> .trancate

<div class="line equal-height">
<div class="unit size1of3">
 <div class="content centered">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>
</div>

<div class="unit size1of3">
 <div class="content centered">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>
</div>
<div class="unit size1of3">
 <div class="rd-square" style="width:300px">
 <div class="content centered">
<a href="https://tenman.info/labo/css/?attachment_id=5575" class="attachment wp-att-5575"><img src="https://tenman.info/labo/css/files/snow-644x428.jpg" alt="" width="644" height="428" class="alignnone size-full wp-image-5575" /></a>
 </div>
 </div> 
</div>
</div>

display:flex> .trancate

<div style="display:flex;flex-wrap:wrap;">

 <div class="centered" style="width:31%;margin:1%;height:10em;min-width:296px;">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>

 <div class="centered"style="width:31%;margin:1%;height:10em;min-width:296px;">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>

 <div class="centered" style="width:31%;margin:1%;height:10em;min-width:296px;">
 <h3 style="margin0;">title</h3>
 <p class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <a href="http://www.tenman.info">tenman.info</a>
 </div>

</div>

rd-square Class> content> img element

easy clip for external images

外部画像などの簡易クリッピング

<div class="rd-square" style="width:300px">
<div class="content">
<a href="https://tenman.info/labo/css/?attachment_id=5575" class="attachment wp-att-5575"><img src="https://tenman.info/labo/css/files/snow-644x428.jpg" alt="" width="644" height="428" class="alignnone size-full wp-image-5575" /></a>
</div>

required width property.

class名と、幅の指定が必須

rd-round Class> content> img element

<h3>rd-round Class > content > img element</h3>
<div class="rd-round" style="width:300px">
<div class="content">
<a href="https://tenman.info/labo/css/?attachment_id=5575" class="attachment wp-att-5575"><img src="https://tenman.info/labo/css/files/snow-644x428.jpg" alt="" width="644" height="428" class="alignnone size-full wp-image-5575" /></a>
</div>
</div>

required width property.
class名と、幅の指定が必須

元画像

<div style="display:flex">

		<div class="rd-square">
			<div class="centered content">
				<h3>hello</h3>
				<p class="trancate" data-rows="1">グリッドレイアウト</p>
<a href="http://www.tenman.info">link</a>
			</div>
		</div>

		<div class="rd-square">
			<div class="centered content">
 <p class="trancate" data-rows="1">グリッドレイアウト</p>
 <a href="https://tenman.info/labo/css/?p=5574#modal_box_5574_2" class="modal-link" title="hello world">test</a>
</div>
		</div>

		<div class="rd-round">
			<div class="centered content">2列</div>
		</div>

		<div class="rd-square">
			<div class="centered content">3列</div>
		</div>

		<div class="rd-square">
			<div class="centered content">4列</div>
		</div>

</div>

<div class="rd-modal" id="modal_box_5574_2">
	<div class="color4">
		<div class="header color-3 block">
 <h3>hello world</h3>
 </div>
		<div class="body">
			

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
		<div class="footer color5 block">
			<a href="#page" ><span class="lb-close color5 pad-s corner">Close</span></a>
		</div>
	</div>
</div>

.rd-round,.rd-square{
 width:290px;
 margin:1em;
}
.on-trancate + p .modal-link, .on-trancate + p .modal-link, .on-trancate + p a, .on-trancate + a{
 display:block;
}
.off-trancate + p .modal-link, .off-trancate + p .modal-link, .off-trancate + p a, .off-trancate + a{
 display:none;
}
.centered h3{
 margin-top:0;
 margin-bottom:0;
}