Raindropsテーマは、個別の投稿やページだけに適用される。投稿編集画面の「この投稿のカスタムCSS」と、カスタマイズページの「高度な設定」セクション内の「サイト全体のCSS」という2種類のエディタを使って、カスタマイズを行うことが出来ます。チャイルドテーマを作成しないで、ご使用の場合style.cssでスタイルの変更を行った場合、テーマのアップデートで削除されてしまいますが、上記のフィールドをご使用いただいた場合は、テーマをアップデートしても、設定は失われません。
- 組み込み済みCSS Class
- 見出しh1-h6クラス
- フォントサイズ
- フォントファミリー(Google Fonts)
- フォント幅(font-weight)
- スモールキャピタル 字形
- 投稿画像関連クラス
- リストクラス
- 表クラス
- 丸と正方形クラス
- 縦横中央揃え
- ツールチップクラス
- パディング、コーナー、シャドー クラス
- ブロック幅 クラス
- 折り返し制御 クラス
- フロート要素とブロック要素配置調整クラス
- 投稿内グリッドクラス
- 横並びブロックの高さをそろえる equal-heightクラス
- New 表示行数を指定して、はみ出した文字列を省略するtrancateクラス
- ステータス クラス
- リップルエフェクト
- ゴーストボタンとカラーボタン
- 自動整形コーディングパターン
- CSSクラスの動的利用例
- リンクdisableクラス
- markクラス
見出しh1-h6クラス
サポートバージョン Raindrops 1.418以降
フォントサイズクラス
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 | ||
全般 | 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 |
丸と正方形
-
予告:Raindrops1.344 丸と正方形のCSSクラスを追加します
公開済み2015年12月12日
縦横中央揃え
-
縦横中央揃え
2016年5月9日
サポートバージョン Raindrops 1.404以降 縦方向 横方向 中央揃え 複数行対応
ツールチップクラス
サポートバージョン Raindrops 1.352以降 ツールチップを表示するためのクラスです
-
予告:Raindrops1.352 ツールチップサポート
公開済み2016年3月1日
パディング 角丸 シャドー
クラス | 効果 |
---|---|
.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を指定していただけますようお願いします
フロート要素とブロック要素配置調整 クラス
サポートバージョン 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.
<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>
関連リンク
- text-overflow , -webkit-line-clamp, -o-ellipsis-lastline 省略プロパティとの付き合い方 - CSS note
- Raindrops1.457で改修予定のCSSクラス - CSS note
- text-overflow: ellipsis した要素をクリックして、全文表示するCSS - CSS note
リンク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>
詳細はリンク先をご確認ください
-
mark 要素クラスと、汎用のmark-** クラスのテスト Raindropsテーマ
2017 年 3 月
mark要素とはmark要素に使える、alert,notice,info,coolクラス汎用的に使える、mark-alert,mark-notice,mark-info,mark-coolクラスpad-s + cornerpad-m + corner...
ステータス クラス
クラス | 効果 |
---|---|
.rd-alert | #e14d43 |
.rd-info | #56b274 |
.rd-notice | #a38c08 |
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>
サポートバージョン 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"を追加した例です
<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 ,
hello world
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.
WordPress4.9でサイドバーのカスタムHTMLウィジェットにCodeMirrorエディタが追加されました。CodeMirrorエディタは、idの重複を許可していませんので、保存ができなくなるケースがあります。Raindropsテーマでは、ver1.498で、サイドバーのカスタムHTMLウィジェットで、モーダル記法を有効にしたいと考えていますが、ウィジェット内に2個以上のモーダルボックスを配置する場合、上記の理由で問題が発生します。
モーダルモックスのid="modal_box_1798_2"を id="modal_box_1798_2"に書き換えていただくことで、CodeMirrorエディタで、問題なく使用できます。
Raindrops1.497では、この機能は有効になっていません。
hello world
test | test | test |
---|---|---|
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. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea 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. | 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. |