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

Display example of CSS class to be maintained in raindrops 1.457

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

rd-square> content> p

center

rd-square> .content .centered Class

title

center

tenman.info

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

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

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

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

rd-square Class> content> img element

easy clip for external images

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

required width property.

class名と、幅の指定が必須

rd-round Class> content> img element

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列

ソース

この投稿のカスタムCSS


新着記事

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