ver.2サポートサイト

HOMEよくある質問サイト管理ver.2.15までに作成したフォームブロックにファイル型フィールドを追加し、ver.2.16(2021/3/10)以降にソース編集する際の注意点

ver.2.15までに作成したフォームブロックにファイル型フィールドを追加し、ver.2.16(2021/3/10)以降にソース編集する際の注意点

サイト機能のフォームブロックで出力するCSSに関して、ver.2.15まで(2021/1/13まで)に作成していたフォームブロック(ソース設定)に対して、

ファイル型フィールドを追加すると、ファイル参照ボタンのデザイン崩れが発生していました。

 

そのため、ver.2.16のアップデート(2021/3/10)にて、フォームブロックのデフォルトCSSの仕様変更を行ったことで、

ver.2.15以前までに作成済みのフォームブロック(ソース設定)にファイル型フィールドを追加した場合、ファイル型フィールドに紐づくCSSを修正する必要がございます。

ここでは、ver.2.15以前までに作成済みのフォームブロック(ソース設定)にファイル型フィールドを追加した場合のCSSの修正方法をご案内いたします。

 

ver.2.15以前のフォームブロック(ソース設定)にファイル型フィールドを追加、CSSの修正方法

ファイル型フィールドを追加してください。

 

CSSの末尾に以下のコードを追加してください。

.sp-form-file-button {
  color:#000000;
  background-color:#cecece;
  border-style:none;
  border-width:1px;
  border-color:#000000;
  border-radius:0.25rem;
  padding:4.875px 9.75px;
  font-size:80%;
  cursor:pointer;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:#f8f8f8;
  border-style:dashed;
  border-width:1px;
  border-color:#666666;
  border-radius:0rem;
  width:100%;
  height:200px;
  text-align:center;
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#efefef;
  border-style:dashed;
  border-width:1px;
  border-color:#6c757d;
  border-radius:0rem;
  width:100%;
  height:200px;
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#f8f8f8;
  border-style:dashed;
  border-width:1px;
  border-color:#6c757d;
  border-radius:0rem;
  width:100%;
  height:200px;
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:#f8f8f8;
  border-style:dashed;
  border-width:1px;
  border-color:#6c757d;
  border-radius:0rem;
  width:100%;
  height:200px;
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

 

CSSの「.sp-form-noted」クラスをver.2.16のものと置き換えてください。

ver.2.15

.sp-form-noted {
  font-size:.8em;
  color:#808080;
}

ver.2.16

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break: break-all;
  margin-top: .5em;
}

 

追加したファイル型フィールドのデザインが崩れていないか確認してください。