Raindrops　取扱説明書

見出しh1-h6クラス

サポートバージョン Raindrops 1.418以降

フォントサイズクラス

Raindropsは、フォントサイズの指定にpxは使用せず、% 又は em という単位を使用しています。
相対的な単位を使う事で、カスタマイザー　/ 外観　/　フォントの　設定から、ベースフォントを変更することが出来ますが、
ご自身で行ったフォントサイズを、px指定している場合などは、その部分のサイズはそのままになります。

フォントサイズに指定する場合は、以下のクラスを使用するか、以下の表より、パーセント指定されることをお勧めします。

フォントファミリー（Google Fonts)

<p class="google-font-open-sans">Hello World</p>

<p class="google-font-open-sans800">Hello World</p>

<p class="google-font-open-sans800 f16">Hello World</p>

<p class="google-font-open-sans800 f26">Hello World</p>

<div class="font-effect-shadow-multiple f26 google-font-rancho">This is a font effect!</div>

フォント幅（font-weight)

サポートバージョン Raindrops 1.417以降  

スモールキャピタル

サポートバージョン Raindrops 1.417以降  

uppercase,lowercasee,capitalizeクラスはバージョン 1.453以降  

投稿画像関連クラス

投稿で、画像の挿入　alignleft alignrightクラスを使用したフロート画像を挿入した時にレイアウトを整えるためのCSSクラスです

リストクラス

Table クラス

丸と正方形

縦横中央揃え

ツールチップクラス

サポートバージョン Raindrops 1.352以降 ツールチップを表示するためのクラスです

パディング　角丸　シャドー

幅指定クラス

サポートバージョン Raindrops 1.346以降

詳細：埋め込みメディア Oembed media の表示テスト

Tips：画像表示のテクニック　Youtubeの均等配置とレスポンシブ対応

折り返し制御クラス

フロート要素とブロック要素配置調整　クラス

サポートバージョン Raindrops 1.346以降

clear-1~clear-3 サポートバージョン Raindrops 1.415以降 詳細：予告：Raindrops1.346　1.345でのフロート画像を含む投稿の表示まとめ

<div class="rd-float-wrapper">
 各種ブロック要素
</div>

<div class="clear">
<br style="line-height:4" />
</div>

投稿内グリッドクラス

テンプレートでも使うことが出来ます

Raindrops 1.510から、size1of2 ~ size4of5クラスが、単独で利用できるようになりました。WordPress5.0で実装予定のgutenbergエディターのカスタムCSSクラスに、これらの幅を指定する事で、フロート画像などの幅を簡単に設定できます。

example

<div class="line">
<div class="unit size1of3 gradient3">1/3</div>
<div class="unit size1of3 gradient2">1/3</div>
<div class="unit size1of3 gradient1">1/3</div>
</div>

lineクラスは、必須です

<div class="yui-gb">
 <div class="yui-u first">
 <p>lorem...</p>
 </div>
 <div class="yui-u">
 <p>lorem...</p>
 </div>
 <div class="yui-u">
 <p>lorem...</p>
 </div>
</div>
<div class="yui-gc">
 <div class="yui-u first">
 <p>lorem...</p>
 </div>
 <div class="yui-u">
 <p>lorem...</p>
 </div>
</div>
<div class="yui-gd">
 <div class="yui-u first">
 <p>lorem...</p>
 </div>
 <div class="yui-u">
 <p>lorem...</p>
 </div>
</div>
<div class="yui-ge">
 <div class="yui-u first">
 <p>lorem...</p>
 </div>
 <div class="yui-u">
 <p>lorem...</p>
 </div>
</div>
<div class="yui-gf">
 <div class="yui-u first">
 <p>lorem...</p>
 </div>
 <div class="yui-u">
 <p>lorem...</p>
 </div>
</div>
<div class="yui-g">
 <div class="yui-u first">
 <p>lorem...</p>
 </div>
 <div class="yui-u">
 <p>lorem...</p>
 </div>
</div>

2016/3/22 修正　ダブルクウォーテーション（"）が二重表示されていました

横並びブロックの高さをそろえる equal-heightクラス

グリッドクラスと併用した例

<div class="line equal-height">
<div class="unit size1of2 color3">1/2<p class="custom-field-shortcode ">Lorem ...</p>
</div>
<div class="unit size1of4 color2">1/4</div>
<div class="unit size1of4 color1">1/4</div>
</div>

関連リンク

表示行数を指定して、はみ出した文字列を省略するtrancateクラス

サポートバージョン Raindrops 1.457以降

Lorem ipsum dolor sit amet, consectetur adipiscing 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 class="trancate" data-rows="3">Lorem ipsum dolor sit amet, consectetur adipiscing 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>

関連リンク

• text-overflow , -webkit-line-clamp, -o-ellipsis-lastline 省略プロパティとの付き合い方 - CSS note
• Raindrops1.457で改修予定のCSSクラス - CSS note
• text-overflow: ellipsis した要素をクリックして、全文表示するCSS - CSS note

リンクdisableクラス

markクラス

	
<p class=""><span class="mark mark-info f16">Lorem ipsum dolor sit amet, </span><span class="mark mark-info">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.</span></p>

ステータス　クラス

Example

サポートバージョン Raindrops 1.413以降 1.413で追加されるrd-rippleクラスと tabindex="0"を追加した例です

<div><span class="rd-alert pad-m corner rd-hover-shadow rd-ripple" tabindex="0">alert example</span> <span class="rd-info pad-m corner rd-hover-shadow rd-ripple" tabindex="0">info example</span> <span class="rd-notice pad-m corner rd-hover-shadow rd-ripple" tabindex="0">notice example</span></div>

Example

<span class="rd-alert-bg pad-m corner">alert example </span>
<span class="rd-info-bg pad-m corner">info example</span> 
<span class="rd-notice-bg pad-m corner">notice example</span>

リップルエフェクト

この機能は、主にページ遷移を伴わないjqueryやCSSによるコンテンツ表示の場合を想定したクラスです

サポートバージョン Raindrops 1.413以降 1.413で追加されるrd-rippleクラスと tabindex="0"を追加した例です

<div><span class="rd-alert-bg pad-m corner rd-hover-shadow rd-ripple" tabindex="0">alert example</span> <span class="rd-info-bg pad-m corner rd-ripple" tabindex="0">info example</span> <span class="rd-notice-bg pad-m corner rd-hover-shadow rd-ripple" tabindex="0">notice example</span></div>

リンクボタン

<span class="color-5 pad-m corner">button</span>

<a href="https://www.tenman.info" class="ghost rd-alert-bg">ghost</a>

自動的に追加される機能

blockquote　要素に　cite属性を記述した場合、引用内にリンクを追加します

<blockquote cite="http://www.example.com">
 lorem....
</blockquote>

以下のパターンのhtmlを記述すると、トグル機能を追加します

<ul class="raindrops-toggle-wrapper">
	<li class="raindrops-toggle raindrops-toggle-title">Toggle Label</li>
	<li class="raindrops-toggle">
		<p>
			Lorem ipsum dolor sit amet,...
		</p>
	</li>
</ul>

2016/3/22 修正　ダブルクウォーテーション（"）が二重表示されていました

以下のパターンのhtmlを記述すると、タブ表示します

<ul class="raindrops-tab-list clearfix" role="tablist">
	<li class="dummy">Tab Area</li>
</ul>
<div class="raindrops-tab-content clearfix">
	<div class="raindrops-tab-page">
		<h3>Lobster</h3>
		<p class="google-font-lobster">	Lorem ipsum dolor sit amet, consectetur adipisicing elit,...</p>
	</div>
	<div class="raindrops-tab-page">
		<h3>Lato</h3>
		<p class="google-font-lato">Lorem ipsum dolor sit amet, ...	</p>
	</div>
	<div class="raindrops-tab-page">
		<h3>Open Sans</h3>
		<p class="google-font-open-sans">Lorem ipsum dolor sit amet...</p>
	</div>
</div>

2016/3/22 修正　ダブルクウォーテーション（"）が二重表示されていました
2017/12/02 追記　上記のサンプルコードでは、Raindropsのグーグルフォントクラスが使用されていますが、カスタムhtmlウィジェットやテキストウィジェットでは、フォントは自動ロードされません（-ver1.497) 投稿タイトルやサイトタイトルにグーグルフォントクラスが指定されている場合には、フォントが適用されます。

以下のパターンのhtmlを記述すると、モーダルボックス表示します

サポートバージョン Raindrops 1.348 以降

<a href="https://www.tenman.info/wp3/manualraindrops/archives/1798#modal_box_1798_1" class="modal-link" title="hello world">test</a>

<div class="rd-modal" id="modal_box_1798_1">
	<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>

hello world

Close