配置v1 + ユニットグループ有効時の確認事項

CMS Ver. 3.1x 以前からの機能である「配置v1」かつ「ユニットグループ有効」のままサイト運用する場合は、ユニットの表示崩れ確認（特に段組レイアウトの確認）をお願いします。

注意

• バージョンアップ前の acms.css を読み込んでいても、以下の表示崩れが発生することがあります。その場合は CSS の調整を行ってください。

• unit.html をカスタマイズしている場合は、カスタマイズ内容に合わせてスタイル調整が必要です。

チェック項目

項目1：横並びレイアウトでユニットが上揃えになっているか？

画像などを横並びした際に、要素上部に意図しない余白が発生していないか確認してください。
余白の原因が <hr class="clearHidden"> である場合は、以下のスタイルが有効になっているか確認してください。

.clearHidden {
  margin: 0;
  border: none;
}

※ バージョンアップ前の acms.css に記述されていますが、CSS の詳細度や読み込み順により無効化されている場合があります。その場合は CSS の読み込み順を見直すか、スタイルを追記してください。

項目2：ユニットグループ内要素に意図しない左右余白がないか？

CMS Ver. 3.1 の acms.css には、エントリー内 acms-col-* の左右余白を削除するスタイルがありました。バージョンアップ後のユニットグループ内要素に意図しない余白がついている場合は下記のようなスタイルを追記ください。

▼ 対応例（ご利用テーマに合わせて調整してください）

.acms-entry [class*=acms-col-] {
  padding: 0;
}

上記は対応例です。ご利用のテーマカスタマイズに合わせた対応をお願いします。

項目3：ユニットグループ内の、画像・動画・地図の幅が意図せず小さくなっていないか？

CMS Ver. 3.2 から ユニット表示サイズ用クラスが付与される要素が変更されています。その影響で、ユニットグループ内の画像などが意図せず小さく表示されることがあります。

▼ 対応方法

.acms-entry-unit-full [class*="acms-col-"] {
  width: 100%;
}

変更内容の詳細

▼ CMS Ver. 3.1.55 の 出力例

acms-col-sm-6 と column-media* が 同じ要素についている。

<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media-center js_notStyle acms-col-sm-6">画像が入る</div>
</div>
<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media-center js_notStyle acms-col-sm-6">画像が入る</div>
</div>

※ユニットグループを使用し2カラムレイアウトしている例
※画像の表示サイズとして acms-col-sm-6 クラスを指定

/* CMS Ver. 3.1.55 の acms.css 一部抜粋 */
.acms-col-sm-6 {
  float: left;
  width: 50%;
}
.acms-entry-unit-full:not(.acms-unit-size-inherit) [class*=column-media] {
  width: auto !important;
  max-width: 100%;
}
.acms-entry-unit-full:not(.acms-unit-size-inherit) [class*=column-video] {
  width: 100% !important;
}

▼ CMS Ver. 3.2.2 の出力例

acms-col-sm-6 と column-media* が 別の要素に分かれた。

<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media column-media-auto align-auto">
    <div class="acms-col-sm-6">画像が入る</div>
  </div>
</div>
<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media column-media-auto align-auto">
    <div class="acms-col-sm-6">画像が入る</div>
  </div>
</div>

※ユニットグループを使用し2カラムレイアウトしている例
※画像の表示サイズとして acms-col-sm-6 クラスを指定
※配置v1、ユニットグループ有効で設定

上記出力例のようにユニット表示サイズ用クラスが付与される要素位置が変更になったため、バージョンアップ前の acms.css を読み込んでいてもユニットグループ内の画像サイズが acms-col-sm-6 によって意図せず小さくなるケースがあります。