Raindrops 1.510 更新概要
今回の変更では、size1of2, size1of3, size2of3, size1of4, size3of4,size1of5, size2of5, size3of5, size4of5, の各クラスを、組み合わせることで画像等のサイズを柔軟に変更できるようにしました。また、それら右寄せ左寄せのボックスに枠線を追加する solid-border クラスを追加しました。
なを、Gutenberg plugin の新UIでは、右寄せ左寄せする機能が、画像以外のブロックにも多数追加されていますので、ブロックのclassフィールドにこれらのクラスを入力する事で、より柔軟なサイズ指定を可能にしました。現在 div, figure, ul, ol, p, (tableは、未サポート)に対応しています。
詳細はblock aligns + percent width Classes -- CSS noteでご確認ください。
version: 1.510 Overview of Changes
Modified wp-caption short code remove inline style.
Added
CSS percent width classes
You can make grid layout in post content.
size1of2, size1of3, size2of3, size1of4, size3of4,size1of5, size2of5, size3of5, size4of5, solid-border
means size1of2 is 50% width of entry content
Supports gutenberg plugin block class, text html.
work width div, figure, ul, ol, p, (table is not support)
Example
1 2 3 4 5 6 |
<p class="alignleft size2of5 solid-border">hello world</p> <p class="alignright size1of5 solid-border">hello world</p> <p class="alignnone size1of5 solid-border">hello world</p> <p class="alignnone size1of5 solid-border">hello world</p> |
@see https://tenman.info/labo/css/?p=8704
Traditional Raindrops grid classes can also be used.
1 2 3 4 5 6 |
<div class="line"> <div class="unit size1of2 gradient3">1/2</div> <div class="unit size1of2 gradient2">1/2</div> </div> |
Modified gutenberg plugin front end style
removed gutenberg figure(imge) inline style.