WordPress Theme Raindrops

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

原文を表示

Raindrops 1.497 更新概要

今回の変更について、

body要素に、新しいクラス rd-basefont-[13-20] を追加しました。

このクラスは、カスタマイズ/外観/フォント ベースフォントサイズでのフォントサイズに連携するクラスです。

投稿の編集画面にある「この投稿のカスタムCSS」に、カスタマイザーの追加CSSに4.9で追加されたエディターと同じCodemirror editorを追加しました。

CSSの変更

テーマ内で、カーニングの設定を有効にしました。日本語環境では、テーマのデフォルトフォントを「文字詰め」に対応した游ゴシックをベースにしていますが、クロームブラウザや、オペラブラウザでは文字がかすれて表示される問題がありましたので、今回の変更で、クローム、オペラの場合は、Noto Sans JPをデフォルトに変更しました。

この変更により、IE10以上、エッジを含めたモダンブラウザで、字詰めされた美しい日本語文章を表示できるようになりました。

ただ、Noto Sans JPは、WEBフォントで、環境によっては、ロードの時間がかかり、画面がチラつく様な事もあるかもしれません。そのような場合には、カスタマイズ/追加CSSなどに、以下のようなスタイルを追加していただくと、従来通りの表示が出来ると思いますので、気になる場合には、修正を検討してみてください。

.ja #bd{
 font-family:Meiryo, sans-serif;
}

フォームバリデーションスタイルを追加しました。

html5になり、formのinput要素には、様々なタイプが追加されました。

type:[color , date , datetime , datetime-local , email , month , password , number , search , tel , text , time , url , week]

例えば、type="email"の場合は、入力値がメールのパターンで入力されているかCSSで判定するための、:valid等の疑似クラスを使用することが出来ます。

以下のセレクターについて、CSSにより、必須項目や、不正値の場合、フィールドの下枠線を赤で表示する等のスタイルを追加しました。

example selectors
:required,
input[type="email" i]:valid:not(:placeholder-shown){...}
input[type="email" i]:not([placeholder]):valid{...}
input[type="email" i]:invalid{...}
input[type="email" i]:disabled{...}
input[type="email" i]:read-only{...}
input[type="radio"]:indeterminate + label:before { content:'?';...}

動作環境について、

<input type="text" placeholder="hello world" id="xxx" val=""><label for="xxx">hello world</label>

以下のような構造の場合は動作しません
<label><input type="text" placeholder="hello world" id="xxx" val="">hello world</label>

また、コンタクトフォームプラグイン等で、優先スタイルが設定されている場合も動作しません。

グローバル変数の追加

$raindrops_use_part_gallery_template, $raindrops_use_part_blog_template の2つの変数を追加しました。

この変数は、カテゴリー ブログ カテゴリー ギャラリー(投稿フォーマット ステータス、投稿フォーマット ギャラリー)を選択した場合に、part-gallery.php,part-blog.phpを使用するかどうかを設定するための変数です。

 

version: 1.497 Overview of Changes

Added body CSS Class rd-basefont-[13-20]

This Classes relate Base Font Size in Customize / Presentation / Fonts

Added Added Codemirror editor to Custom CSS For This Entry in post edit window

Modified visual settings

Kerning enabled all languages

for Japanese environment

Kerning enabled with font-feature-settings: “palt";

Changed Default fonts.

When using theme default font, YuGothic, Chrome Browser and Opera Browser are displayed as faint letters in Japanese.

Change Noto Sans JP (japanese) http://www.google.com/fonts/earlyaccess

Other browsers use YuGothic as the default font.

With this change kerning for Japanese has become effective with major browsers including IE 10 or more and edge browser

Basic Form validation styles added

type:[color , date , datetime , datetime-local , email , month , password , number , search , tel , text , time , url , week]

example selectors

:required,

input[type="email" i]:valid:not(:placeholder-shown),

input[type="email" i]:not([placeholder]):valid,

input[type="email" i]:invalid,

input[type="email" i]:disabled,

input[type="email" i]:read-only,

input[type="radio"]:indeterminate + label:before { content:’?’;…}

Note:

Even if: valid is blank, since it evaluates to true,

I made a setting to support depending on whether or not a placeholder is displayed.

Known Issue

Must Needs Form Structure

<input type="text" placeholder="hello world" id="xxx" val=""><label for="xxx">hello world</label>

Not Work Structure

<label><input type="text" placeholder="hello world" id="xxx" val="">hello world</label>

IE, Edge not support

Added global vars

Variables to limit the behavior of very old template part files, part-gallery.php, part-blog.php

$raindrops_use_part_gallery_template, $raindrops_use_part_blog_template