新機能追加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
- 前へ
- 次へ