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