CSS

Raindropsテーマは、個別の投稿やページだけに適用される。投稿編集画面の「この投稿のカスタムCSS」と、カスタマイズページの「高度な設定」セクション内の「サイト全体のCSS」という2種類のエディタを使って、カスタマイズを行うことが出来ます。チャイルドテーマを作成しないで、ご使用の場合style.cssでスタイルの変更を行った場合、テーマのアップデートで削除されてしまいますが、上記のフィールドをご使用いただいた場合は、テーマをアップデートしても、設定は失われません。

見出しh1-h6クラス

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

Raindropは、見出し要素にdisplay:flexを使用しています。見出し要素内に子要素が存在する場合、改行が発生します。改行が不要の場合、要素に row クラスを追加してみてください。
row

フォントサイズクラス

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

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

ピクセルサイズ パーセントサイズ
10px 77%
11px 85%
12px 93%
13px 100%
14px 108%
15px 116%
16px 123.1%
17px 131%
18px 138.5%
19px 146.5%
20px 153.9%
21px 161.6%
22px 167%
23px 174%
24px 182%
25px 189%
26px 197%
27px 207.6%
28px 215.3%
29px 223%
30px 230%
31px 238.4%
32px 246.1%
33px 253.8%
34px 261.5%
35px 269.2%
36px 276.9%
37px 284.6%
38px 292.3%
39px 300%
40px 307.6%
 

サポートバージョン Raindrops 1.348 (27-32px)以降

サポートバージョン Raindrops 1.356 (33-40px)以降

クラス 効果
.h1 見出し要素風 h1
.h2 見出し要素風 h2
.h3 見出し要素風 h3
.h4 見出し要素風 h4
.h5 見出し要素風 h5
.h6 見出し要素風 h6
.f10 10 px
.f11 11 px
.f12 12 px
.f13 13 px
.f14 14 px
.f15 15 px
.f16 16 px
.f17 17 px
.f18 18 px
.f19 19 px
.f20 20 px
.f21 21 px
.f22 22 px
.f23 23 px
.f24 24 px
.f25 25 px
.f26 26 px
.f27 27 px
.f28 28 px
.f29 29 px
.f30 30 px
.f31 31 px
.f32 32 px
.f33 33 px
.f34 34 px
.f35 35 px
.f36 36 px
.f37 37 px
.f38 38 px
.f39 39 px
.f40 40 px

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

無料WEBフォントのGoogle fontsが、Raindropsテーマなら簡単に使うことが出来ます。

Google Fonts サイトで、好きなフォントを選びます。

(フォント名にスペースが3個以上あるフォントは使えませんが、全体の90%以上は使うことが出来ます)

Open Sans というフォントを使って使用方法を説明します。

投稿本文をテキストモードで以下のように記述します。

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

Hello World Open Sans では、300から800までのフォントウェイトがありますが、フォントウェイトを指定する場合は、以下のようにします。

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

Hello World これだけで、太字のOpen Sansを表示します。 クラス名は、 google-font- + (小文字にしたフォント名で、スペースを - に変更します) フォントのサイズを変更する場合には、Raindropsの組み込みクラスを使います。

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

Hello World

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

Hello World f13-f40 まで使えます ( サイズはpx 相当 ) フォントエフェクトクラスも使えます。 Google Fonts Getting Startedで紹介されているフォントエフェクトも使えます。

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

This is a font effect!

お楽しみください

フォント幅(font-weight)

 

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

クラス 適用スタイル
.b1 font-weight:100
.b2 font-weight:200
.b3 font-weight:300
.b4 font-weight:400(標準)
.b5 font-weight:500
.b6 font-weight:600
.b7 font-weight:700(bold)
.b8 font-weight:800
.b9 font-weight:900

スモールキャピタル

 

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

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

クラス 適用スタイル
.small-caps font-variant: small-caps
.uppercase text-transform:uppercase
.lowercasee text-transform:lowercase
.capitalize text-transform:capitalize

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

適用要素 クラス 効果 関連リンク
ブロック要素全般 rd-float-wrapper このクラスは、通常フロート画像と一緒に配置できないblockquote,tableを、div要素でラップすることで、フローとしているように表示します
dl rd-float dl要素にクラスを追加する事で、回り込みをするデータリストを表示できます。日本語対応済み1.346以降デフォルトで回り込みします。関連:フロート要素とブロック要素配置調整クラス
全般 clear フロートをリセットするクラスです。回り込みを解除します。
全般 clear-1 フロートをリセットするクラスです。回り込みを解除し上部に1emのスペースを確保します
全般 clear-2 フロートをリセットするクラスです。回り込みを解除し上部に2emのスペースを確保します
全般 clear-3 フロートをリセットするクラスです。回り込みを解除し上部に3emのスペースを確保します

リストクラス

適用要素 クラス 効果 関連リンク
ul .rd-list-type-tree ツリー表示 rd-list-type-tree
ol .sectioned 章 節 項 表示 sectioned

Table クラス

利用可能な要素 default property, value custom class 役割
table table-layout:fixed auto table-layout:auto
table, td text-align:right .left text-align:left
.center text-align:center
.right text-align:right
table,td vertical-align .top vertical-align:top
.middle vertical-align:middle
.bottom vertical-align:bottom
table .rd-no-scroll stop scrollbar for responsive design

丸と正方形

縦横中央揃え

ツールチップクラス

 

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

パディング 角丸 シャドー

クラス 効果
.pad-s パディング小
.pad-m パディング中
.pad-l パディング大
.corner-s 角丸小
.corner-m 角丸中
.corner-l 角丸大
.shadow
.columns 段組み表示
google-font-*** グーグルフォントを参照してください

幅指定クラス

 

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

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

適用要素 クラス名 効果
div rd-thumbnail Class WordPressの設定/メディアで設定されている thumbnail 幅のクラス
div rd-medium Class WordPressの設定/メディアで設定されている medium 幅のクラス
div rd-large Class WordPressの設定/メディアで設定されている large 幅のクラス
div rd-w320 Class 幅、320pxを指定する クラス
div rd-w480 Class 幅、480pxを指定する クラス
div rd-w640 Class 幅、640pxを指定する クラス

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

折り返し制御クラス

サポートバージョン Raindrops 1.3471.348以降 投稿を作成する場合に、時として連続した英数、全角記号などが、親ブロックを突き破ってオーバーフローする事があります。

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

My disease name is pneumonoultramicroscopicsilicovolcanoconiosis このようにオーバーフローすると多くの場合レイアウトが壊れ、ユーザーの閲覧環境はひどいものになります。 Raindropsは、このような折り返しの制御が必要な時に使える 2つのクラスが準備されています。

rd-break-word クラス
単語境界を考慮した折り返し
My disease name is pneumonoultramicroscopicsilicovolcanoconiosis
<div style="background:yellow;width:180px;overflow:visible;" class="rd-break-word">
My disease name is pneumonoultramicroscopicsilicovolcanoconiosis
</div>
rd-break-all クラス
なにも考慮しないで折り返し

My disease name is pneumonoultramicroscopicsilicovolcanoconiosis

<div style="background:yellow;width:180px;overflow:visible;" class="rd-break-all">
My disease name is pneumonoultramicroscopicsilicovolcanoconiosis
</div>

このクラスの使用には、このクラスの指定以外の制約があります。

rd-break-wordは、shrink-to-fit 条件下では、うまく動作しません。

例:

  • table要素で、autoクラスを使用している場合
  • li要素で、幅が指定されていない場合等です。 li要素、p要素については、コンテンツ幅以上の長さになる場合は、自動的に折り返します
  • display:inline-block,float,position:absoluteが指定されて、それらのブロックの幅が指定されていない場合は、 適切に動作しませんから、それらのブロックには、あわせてwidthを指定していただけますようお願いします
shrink-to-fit 「なぜ、IE8では、画像が表示されないことがあるのか」

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

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

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

適用要素 クラス名 効果
ブロック要素全般ラップ用 rd-float-wrapper Class フロート画像がある場合に、ブロック要素を自然に配置
<div class="rd-float-wrapper">
 各種ブロック要素
</div>
ul ol dl rd-nowrap Class フロート画像がある場合に、リストの回り込みを停止します
全般 clear Class フロート要素をクリアするクラス
全般 clear-1 フロートをリセットするクラスです。回り込みを解除し上部に1emのスペースを確保します
全般 clear-2 フロートをリセットするクラスです。回り込みを解除し上部に2emのスペースを確保します
全般 clear-3 フロートをリセットするクラスです。回り込みを解除し上部に3emのスペースを確保します
Tips フロート画像がある投稿で、行間を調整する例
<div class="clear">
<br style="line-height:4" />
</div>

投稿内グリッドクラス

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

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

クラス 効果
.size1of1 Responsive Grid Class (break point 640px;)
.size1of2 Responsive Grid Class (break point 640px;)
.size1of3 Responsive Grid Class (break point 640px;)
.size2of3 Responsive Grid Class (break point 640px;)
.size1of4 Responsive Grid Class (break point 640px;)
.size3of4 Responsive Grid Class (break point 640px;)
.size1of5 Responsive Grid Class (break point 640px;)
.size2of5 Responsive Grid Class (break point 640px;)
.size3of5 Responsive Grid Class (break point 640px;)
.size4of5 Responsive Grid Class (break point 640px;)
.lastUnit Responsive Grid Class (break point 640px;)
.yui-g Non Responsive Grid Class 50%+50%
.yui-gb Non Responsive Grid Class 30%+30%+30%
.yui-gc Non Responsive Grid Class 60%+30%
.yui-gd Non Responsive Grid Class 30%+60%
.yui-ge Non Responsive Grid Class 75%+24%
.yui-gf Non Responsive Grid Class 24%+75%

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クラス

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

1/2

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.

1/4
1/4
<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>

関連リンク

Equal Height Grid - CSS note

表示行数を指定して、はみ出した文字列を省略する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>

関連リンク

リンクdisableクラス

このクラスは、a 要素のリンク遷移を停止します。
例えば、プライマリーメニュー最上位のリンクにこのdisableクラスをセットすると、固定ページへの遷移を行わず、チャイルドメニューを表示させる役割を与えたい場合などに使うと便利です。
このクラスを追加すると、CSSのpointer-event + javascriptでのhref属性の削除を行います。例: link example

markクラス

薄い配色で文字列を目立出せるためのクラス

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

詳細はリンク先をご確認ください

ステータス クラス

クラス 効果
.rd-alert #e14d43
.rd-info #56b274
.rd-notice #a38c08

Example

 

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

alert example info example notice example
<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>
 

サポートバージョン Raindrops 1.413以降

クラス 効果
.rd-alert-bg #e14d43
.rd-info-bg #56b274
.rd-notice-bg #a38c08

Example

alert example info example notice 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"を追加した例です

alert example info example notice example
<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>

リンクボタン

button
<span class="color-5 pad-m corner">button</span>
colorクラスは color-5から、color5の範囲で使用できます。(color0はありません)

padクラス(パディングクラス)は、pad-s pad-m pad-lが使えます

cornerクラス(角丸クラス)は、corner-s corner-m corner-lが使えます

ghost

サポートバージョン Raindrops 1.453以降

<a href="https://www.tenman.info" class="ghost rd-alert-bg">ghost</a>
ghostクラスと、color-5~color5クラスは併用できません。(今のところ) ステータス クラスと併用できます。

ghostクラス(ゴーストボタン)は、ghost-s ghost-m ghost-lが使えます

このクラスのテストページ

自動的に追加される機能

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="http://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>
モーダルボックスのサンプル1 テキスト Youtube ,

WordPress4.9でサイドバーのカスタムHTMLウィジェットにCodeMirrorエディタが追加されました。CodeMirrorエディタは、idの重複を許可していませんので、保存ができなくなるケースがあります。Raindropsテーマでは、ver1.498で、サイドバーのカスタムHTMLウィジェットで、モーダル記法を有効にしたいと考えていますが、ウィジェット内に2個以上のモーダルボックスを配置する場合、上記の理由で問題が発生します。

モーダルモックスのid="modal_box_1798_2"を id="modal_box_1798_2"に書き換えていただくことで、CodeMirrorエディタで、問題なく使用できます。
Raindrops1.497では、この機能は有効になっていません。

モーダルボックスの サンプル 表組 モーダルボックスのサンプル ギャラリー モーダルボックスのサンプル フォーム