Raindrops 1.513がライブになりました

Raindrops 1.513 更新概要

今回の変更は、レスポンシブボックスレイアウトを設定した場合に、パララックスヘッダー画像が、スクロール時に拡大される問題の修正、Gutenberg プラグイン対応用のCSSの追加と変更です。

新しいCSSクラスの追加、従来から、body要素の動的クラスに、 .rd-basefont-13,.rd-basefont-14,… .rd-basefont-20がありましたが、このクラスに、フォントサイズを定義しました。この事で、javascript等で、これらのクラスを置き換えることで、フォントサイズを簡単に変更できるようになりました。

グーテンベルグエディターの、オプトイン設定で alignwide alignfull クラスを追加するためのボタン表示が出来ますが、alignwide alignfullに対応するスタイルを追加しました。(プラグインをインストールしない場合でも動作します。)

Photo by Ales Krivec on Unsplash
<figure class="wp-block-image alignfull">
<img src="https://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.


コメントは受け付けていません。