新機能追加NEWS
新機能追加
MSG Config / カスタムメール
『SMTP設定』の項目を追加しました。
[SMTP送信] を「はい」にすると、各設定項目が表示されます。
設定は、メール送信時の媒介として使用するサーバーの設定仕様に合わせてください。
固定ページ / メールフォーム設定
フォームパーツの設定項目に『選択肢による表示・非表示』を追加しました。
設定を「はい」にすると、さらに設定項目が表示されます。
選択肢項目のname属性
トリガー元になる選択肢項目（ラジオボタン、チェックボックス）で設定した「name属性」を入力してください。
一致条件
表示、または非表示となる「選択肢項目」の値を入力してください。
※トリガー元がチェックボックスで、条件となる値が複数ある場合は、「 , (半角カンマ) 」で区切って入力してください。
※入力する値は、パラメタ値、表記ラベルのどちらでもOKです。
一致した場合のアクション
条件に一致した場合に、表示・非表示のどちらにするかを選択してください。
CSS (PACAKGE-WPの場合のみ)
以下の class を追加しました。
- .pt-0, .pl-0, .pr-0, pb-0
上下左右の padding を強制的に 0 にします。
末尾に ( -xs | -sm | -md | -lg | -xlg ) を付与することにより、レスポンシブ制御されます。- -xs ･･･ BP (ブレークポイント / 以下略) ～ 767px
- -sm ･･･ 768 ～ 991px
- -md ･･･ 992 ～ 1199px
- -lg ･･･ 1200px ～
- -xlg ･･･ 1470px ～
- .flex
要素をFlexbox化（ display: flex; ）します。
class 名に以下を付与することにより、レスポンシブ制御、プロパティの追加ができます。
_xs_ | _sm_ | _md_ | _lg_ | _xlg_
レスポンシブ制御でFlexbox化します。- _xs_ ･･･ ～ 767px
- _sm_ ･･･ 768 ～ 991px
- _md_ ･･･ 992 ～ 1199px
- _lg_ ･･･ 1200px ～
- _xlg_ ･･･ 1470px ～
_middle | _top | _bottom
縦交差軸に関するプロパティを追加します。- _middle ･･･ 中央（ align-items: center; ）
- _top ･･･ 上（ align-items: flex-start; ）
- _bottom ･･･ 下（ align-items: flex-end; ）
_center | _left | _right | _right | _space-around | _space-between
横交差軸に関するプロパティを追加します。- _middle ･･･ 中央（ justify-content: center; ）
- _top ･･･ 左（ justify-content: start; ）
- _bottom ･･･ 右（ justify-content: end; ）
- _space-around ･･･ 均等配置 / 左右余白あり（ justify-content: space-around; ）
- _space-between ･･･ 均等配置 / 左右余白なし（ justify-content: space-between; ）
_r2l | _t2b | _b2t
配列向きに関するプロパティを追加します。- _r2l ･･･ 逆順で横配列（ flex-direction: row-reverse; ）
- _t2b ･･･ 縦配列（ flex-direction: column; ）
- _b2t ･･･ 逆順で縦配列（ flex-direction: column-reverse; ）
_wrap
折り返しありで横配列にする（ flex-wrap: wrap; ）(子要素に対して) _grow-1(～3)、または単体のclass名として ._grow-1(～3)
親Flexboxに対する伸長係数を追加（ flex-grow: 1 / 2 / 3; ）
SCSS / mixin (PACAKGE-WPの場合のみ)
以下の汎用機能を追加しました。
※元々あった機能も合わせて説明
- font-face($name, $path, $weight: null, $style: null, $exts: otf ttf woff, $space: null)
外部フォント用のプロパティ、および class を生成します。
※ $name、$path 以外は省略可- $name ･･･ font-family 名、および class 名として使用する文字列 ※必須
- $path ･･･ フォントファイルのURI（拡張子は除く） ※必須
- $weight ･･･ font-weight
- $style ･･･ font-style
- $exts ･･･ フォントの形式
- $space ･･･ letter-spacing
- mq($min:0, $max:0, $mode:’screen’)
メディアクエリに変換します。
$min および $max には、ブレークポイントとなる数値をそのまま入力してください。
※ $min 以外は省略可- $min ･･･ 入力値を min-width に設定 ※必須
- $max ･･･ 入力値から 1 を引いた数値を max-width に設定
- $mode ･･･ 適用するメディアタイプを設定（通常は screen）
例1： @include mq(768){ } ⇒⇒⇒ @media screen and (min-width: 768px){ }
例2： @include mq(0, 768){ ⇒⇒⇒ @media screen and (max-width: 767px){ }
例3： @include mq(768, 992){ } ⇒⇒⇒ @media screen and (min-width: 768px) and (max-width: 991px){ }
例4： @include mq(768, 0, ‘print’){ } ⇒⇒⇒ @media print and (min-width: 768px){ }
- full($fixed:0)
親要素に対して、縦横幅いっぱいにするプロパティを追加します。
↓生成されるプロパティ
position: absolute ( or relative | fixed);
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
}
position 値は通常 absolute ですが、$fixed の数値によって変更ができます。- 1 ･･･ fixed
- 2 ･･･ relative
- 前へ
- 次へ