このページの本文へ

a-blog cmsでレスポンシブとスマホ専用サイトを作成 (1/3)

2014年07月31日 11時00分更新

文●足立 恵・森田 霞/アップルップル

  • この記事をはてなブックマークに追加
本文印刷

 a-blog cmsを使った企業サイトの作り方を紹介する本連載。第1〜6回では、架空の企業「株式会社ウェブプロ」のサイトを作成しました。第7回では、a-blog cmsの機能を使ってサイトをスマートフォンに対応させる方法を紹介します。

  1. acms.cssでレスポンシブWebデザイン対応
  2. レスポンシブWebデザインのためのエントリーユニット設定
  3. スマートフォン専用サイトの作成

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/)にもスタイルガイドがあります。

01.png

公式サイトのacms.cssのドキュメント

02.png

管理ページ内の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.css126KB全スタイルガイドcssファイル
acms.min.css104KB上記を圧縮したもの
acms-lite.css102KBacms.cssから使用を強制していないものを削除したcssファイル
acms-lite.min.cs84KB上記を圧縮したもの

前へ 1 2 3 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く