読み込みが必要なCSSファイル

a-blog cmsでは、各種モジュールを組み合わせることで更新できるページのテンプレートファイルを作成しますが、このテンプレートファイルの作成時に読み込みが必要なCSSファイル「normalize.css」「acms-admin.css(Ver.2.5以前ではacms.css)」があります。

表示用テンプレートファイルに読み込みが必要なCSSファイル


表示用テンプレートファイルに読み込みが必要なCSSファイル

a-blog cmsのテンプレートは、制作者が自由に作成できますが、エントリーの登録をはじめとした基本機能の表示について記述しているCSSファイルは読み込みが必要となります。
テンプレートファイルには、各種要素の表示を再定義した「normalize.css」と、グリッドレイアウトやボタン、フォームなどの装飾を記述した「acms-admin.css」の2ファイルを読み込むようにしてください。

これらのファイルを読み込まない場合には、編集画面やレイアウト機能のデフォルトのテンプレートで正しい表示ができなくなるため、必ず読み込むように記述してください。


例:Siteテーマでの読み込みの記述( /themes/site/include/head/link.html )


<link rel="stylesheet" href="/css/normalize.css" >
<link rel="stylesheet" href="/css/acms-admin.min.css">

例としているSiteテーマにおいても自作のテーマでも同様ですが、使用しているテーマファイル内に読み込み対象のファイルが無い場合には /themes/system/ 内のファイルが使用されるため、上記の記述があれば使用テーマ内にファイルを置く必要はありません。

内容の上書きをする場合

normalize.css および acms.css は /themes/system/css/ に格納されています。これらのファイルを直接変更してしまうと、a-blog cmsのアップデート時にも変更が必要になってしまいます。内容の変更をする場合には、ファイルの上書きではなく、別途使用するテーマフォルダ内に上書き用のCSSファイルを作成して、normalize.cssおよびacms-admin.cssの後に読み込むようにしてください。

Webサイト表示側のテンプレートにも使う場合(acms.css)※Ver.2.5以降

Ver.2.5以降では、acms.css を、管理画面のスタイルを使用できるCSSフレームワークとして配布しています。Webサイト表示側のテンプレートで使いたい場合にご利用ください。acms.cssではacms-admin.cssとは違い、管理画面で使用されている特殊なスタイルを省いていたり、表示側テンプレートでよく使用するスタイルを用意しています。

acms-admin.css同様、/themes/system/css/ に格納されているため、CMSのアップデートとともにバージョンアップしてしまう可能性があります。ご利用になるときはご利用中のテーマの中にコピーして使用してください。

最小限の装飾を行う場合(acms-lite.css)

基本的には前述のとおり、a-blog cms独自の表示のために normalize.css と acms.css を読み込む必要がありますが、中でも最小限の装飾(ユニット、グリッド、ボタン、フォーム、 ラベル、トピックパス、ページャー、ツールチップ、Webフォント)のみを記述したものとして acms-lite.css というファイルを /themes/system/css/ に格納しています。acms.css の代わりに読み込むことで、a-blog cmsの機能に影響しない最小限の装飾ができます。

Ver.2.5より、機能増加により編集画面で使うスタイルが増えたため、acms-lite.cssは廃止しました。

圧縮済みのファイル

/themes/system/css/ に格納しているacms-admin.css、acms.css、acms-lite.css(Ver.2.5より廃止になりました)は、それぞれ圧縮済みのファイルを同じ場所に格納しています。運用方法に合わせてご利用ください。

acms.css での装飾内容


管理ページ>コンフィグ

管理ページ>コンフィグ

acms.css での装飾内容は、スタイルガイドとして確認できます。
スタイルガイドはa-blog cms リファレンスページ内のスタイルガイドか、a-blog cms 管理ページ内のコンフィグからご確認ください。