Raindrops1.457で改修予定のCSSクラス

Display example of CSS class to be maintained in raindrops 1.457

これは、Raindrops1.457でメンテナンスされる予定の、CSSクラスの表示例です。

rd-square> content> p

center

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

rd-square> .content .centered Class

title

center

tenman.info

<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

title

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.

tenman.info

<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

title

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.

tenman.info

title

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.

tenman.info

title

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.

tenman.info

<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

title

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.

tenman.info

title

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.

tenman.info

<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="http://tenman.info/labo/css/?attachment_id=5575" class="attachment wp-att-5575"><img src="http://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

title

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.

tenman.info

title

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.

tenman.info

title

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.

tenman.info

<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="http://tenman.info/labo/css/?attachment_id=5575" class="attachment wp-att-5575"><img src="http://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="http://tenman.info/labo/css/?attachment_id=5575" class="attachment wp-att-5575"><img src="http://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名と、幅の指定が必須

元画像

Suggest

Text-overflow: ellipsis simply omits the string. What is the merit of this to the user

Using the built-in layout function of the Raindrops theme, you can display links and show mode rubs when characters are omitted.

Please narrow the width of the browser( with reload ) and check that the link is displayed

Text-overflow: ellipsis は、単に文字列を省略するだけですが、ユーザーにメリットはあるのでしょうか?

Raindrops テーマの組み込みレイアウト機能を使うと、文字が省略された時にリンクを表示たり、モードルボックスを表示することが出来ます。

ブラウザの幅を狭めて、リロードして、リンクが表示されることを確認してください

hello

グリッドレイアウト

link

グリッドレイアウト

test

2列

ソース

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

この投稿のカスタムCSS

.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;
}


新着記事

コメントは受け付けていません。