a-blog cms Ver.3.1からVer.3.2へのアップデート後のレイアウト崩れへの対処方法

a-blog cms Ver.3.2は大幅なバージョンアップであるため、a-blog cms Ver.3.1をVer.3.2にアップデートすると、レイアウトが崩れている場合がある。
そのような時は、テーマフォルダー内のシステムフォルダーにあるCSSの一部をVer.3.1時のCSSと差し替えることで解消することがある。

---

a-blog cms Ver.3.1の時のCSS
themes/system/css内のCSSファイル（全14ファイル）

• acms-admin.css
• acms-admin.min.css
• acms-member.css
• acms-member.min.css
• acms-system.css
• acms-system.min.css
• acms.css
• acms.min.css
• normalize.css
• normalize.min.css
• reset.css
• reset.min.css
• template-vars.css
• template-vars.min.css

a-blog cms Ver.3.1の時のCSS
themes/system/css内のCSSファイル（全20ファイル）

• acms-admin.css
• acms-admin.min.css
• acms-editor.css
• acms-editor.min.css
• acms-layout.css
• acms-layout.min.css
• acms-member.css
• acms-member.min.css
• acms-system.css
• acms-system.min.css
• acms-utilities.css
• acms-utilities.min.css
• acms.css
• acms.min.css
• normalize.css
• normalize.min.css
• reset.css
• reset.min.css
• template-vars.css
• template-vars.min.css

私の場合は、バージョン3.1.56 の時の themes/system/css の中にある acms.css、acms.min.css、template-vars.css、template-vars.min.css、reset.css、reset.min.css のファイルに差し替えたところ、レイアウトが元に戻りました。

下位互換性のない変更点

a-blog cmsのdeveloper サイトのアップデート　 3.1.xから3.2.xへの移行　下位互換性のない変更点のページには、「バージョン3.1.xの時の themes/system/css の中にある acms.css、acms.min.cssの２つを差し替えて下さい」、また「ユニットグループで囲んでいるユニットが意図せず小さく表示されてしまうことがあるとのことで、その場合は、themes/ご自身のテーマ/css内のメインCSSファイルに下記を追記して下さい」と記載されている。

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

ここで問題点

a-blog cmsのバージョンアップ、例えばVer.3.2.6からVer.3.2.7への小幅なアップデートを実施した場合、テーマフォルダー内のsystemフォルダーが差し替わるので、systemフォルダーに含まれるCSSフォルダーはVer.3.2のCSSフォルダーに置き換えられます。そのためレイアウトが崩れてしまいます。

対策としては、アップデートごとに、systemフォルダーに含まれるCSSフォルダにある「acms.css」と「acms.mini.css」をバージョン3.1の「acms.css」と「acms.mini.css」に置き換えることで対処できますが、この作業を毎回実施するのは面倒なので、使用中のテーマフォルダー内にあるCSSフォルダーにバージョン3.1の「acms.css」および「acms.mini.css」を設置して、include内のheadフォルダーにあるlink.htmlに例えば、<link rel="stylesheet" href="/css/acms.mini..css">のように追記して読み込ませることで解決できます。

投稿：2025年11月15日