a-blog cmsを使った企業サイトの作り方を紹介する本連載。第1〜6回では、架空の企業「株式会社ウェブプロ」のサイトを作成しました。第7回では、a-blog cmsの機能を使ってサイトをスマートフォンに対応させる方法を紹介します。
- acms.cssでレスポンシブWebデザイン対応
- レスポンシブWebデザインのためのエントリーユニット設定
- スマートフォン専用サイトの作成
1.acms.cssでレスポンシブWebデザイン対応
a-blog cmsでは、テンプレートのCSSを書き換えることでレスポンシブWebデザインに対応できます。a-blog cms Ver.2.0以降から同梱されている「acms.css」を読み込むと、レスポンシブWebデザインに対応したグリッドシステムを手軽に利用できます。
acms.cssとは、a-blog cmsの管理画面で使われているスタイルガイドのCSSファイルのことです。グリッドシステム、テキスト類、テーブル、フォーム類、ボタン、サムネイル、トピックパス、ページャー、アラート、ラベル、タブ、プログレスバー、シンボルフォントなどさまざまなプリセットを用意しています。
詳しくは、公式サイトのドキュメントをご覧ください。また、管理ページ内（http://localhost/bid/1/admin/styleguide_index/）にもスタイルガイドがあります。
公式サイトのacms.cssのドキュメント
管理ページ内のacms.cssのドキュメント。［管理ページ］→［コンフィグ］→［スタイルガイド］で表示される
acms.cssは、管理系テンプレートのスタイルを含んでいるので、すべてのテンプレートで読み込みます。ファイルサイズが気になる場合は、圧縮版の「acms.min.css」を使いましょう。アラートやタブなど、使用頻度が低いスタイルを取り除いた「acms-lite.css」や、同ファイルの圧縮版である「acms-lite.min.css」もあります。
第6回までのサンプルサイト「株式会社ウェブプロ」の場合、下記のディレクトリにacms関係のCSSファイルがあります。
Mac → Macintosh HD/ユーザー/（ユーザー名）/Applications/AMPPS/www/themes/system/css
Windows → C:￥Program Files￥Ampps￥www￥themes¥system¥css
注：Windowsの場合、「C:￥Program Files」が「C:¥Program Files（x86）」の場合があります
各acms関係ファイルの容量と概要は下記の通りです。a-blog cms Ver.2.0.1.1を元にした実測値ですが、環境によって異なる場合があります。
| ファイル名 | ファイルサイズ | 概要 |
|---|---|---|
| acms.css | 126KB | 全スタイルガイドcssファイル |
| acms.min.css | 104KB | 上記を圧縮したもの |
| acms-lite.css | 102KB | acms.cssから使用を強制していないものを削除したcssファイル |
| acms-lite.min.cs | 84KB | 上記を圧縮したもの |
