Raindrops 1.513 更新概要
今回の変更は、レスポンシブボックスレイアウトを設定した場合に、パララックスヘッダー画像が、スクロール時に拡大される問題の修正、Gutenberg プラグイン対応用のCSSの追加と変更です。
新しいCSSクラスの追加、従来から、body要素の動的クラスに、 .rd-basefont-13,.rd-basefont-14,… .rd-basefont-20がありましたが、このクラスに、フォントサイズを定義しました。この事で、javascript等で、これらのクラスを置き換えることで、フォントサイズを簡単に変更できるようになりました。
グーテンベルグエディターの、オプトイン設定で alignwide alignfull クラスを追加するためのボタン表示が出来ますが、alignwide alignfullに対応するスタイルを追加しました。（プラグインをインストールしない場合でも動作します。)
<figure class="wp-block-image alignfull"> <img src="http://www.tenman.info/wp3/raindrops/files/ales-krivec-37519-unsplash.png" alt="" width="2560" height="824" class="size-full wp-image-6072" /> <figcaption>Photo by Ales Krivec on Unsplash</figcaption> </figure>
全幅表示をするためには、figure要素でラップされた画像と、figure要素のクラス属性に、wp-block-image alignfull,又は、wp-block-image alignwideの2つのクラスが、必要です。
これらのクラスは、実験的な実装です。3カラムでも動作します。2カラムでは、ヘッダー画像の左右位置に問題があります。
version: 1.513 Overview of Changes
Modified added Raindrops base font CSS classes .rd-basefont-13,.rd-basefont-14,… .rd-basefont-20
Modified Customize / Presentation / Fonts. Vertical Rhythm for Entry Content
Changed paragraph line height value
Modified Customize / Presentation / Fonts. Paragraph line wrapping CSS
Modified function raindrops_gallerys_clone() css values
Modified Gutenberg add_theme_support( ‘align-wide’ )
Modified Gutenberg CSS
Fixed header image pallalax issue
When using box layout responsive, scroll then image wider.