a-blog cms styleguide

まず始めに

同梱されているもの

  • acms.css
  • acms.min.css
  • acms-admin.css
  • acms-admin.min.css

※Ver.1.1.0よりacms-lite.cssがなくなりました

このスタイルガイドのページでは管理画面でご利用いただける acms-admin.css の記述でご紹介しています。

acms.cssとacms-admin.cssの違い

CSSファイル名 クラス名の接頭辞 主な使用場所
acms.css .acms- 公式テーマ、一部管理画面内（スタイルガイド）
acms-admin.css .acms-admin- 公式テーマ、管理画面

※ a-blog cms Ver.2.5より、CMSのバージョンと一緒にCSSファイルのバージョンも上げないようにするため、管理画面で使っているCSSファイルと、CSSフレームワークとして使うCSSファイルを分けることになりました。

スタイルガイドのスタイルを管理画面以外で使う場合には、acms.cssを読み込んでお使いください。

CMSのアップデートをするときは

CMSのアップデートをするときは、acms-admin.cssはCMSと一緒にアップデートし、acms.cssはカスタマイズしているテーマ内で使用してください。

ユーティリティ

回り込み

右寄せ
.acms-admin-float-right
左寄せ
.acms-admin-float-left
回り込み解除
.acms-admin-clear

幅と高さ

幅 100%
.acms-admin-width-max
高さ 100%
.acms-admin-height-max
幅と高さ 100%
.acms-admin-width-height-max

幅（スマートフォン用）

幅 100%
.acms-admin-width-sp
幅 オート
.acms-admin-width-auto-sp

テキスト

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

<p class="acms-admin-text-left">こちらはテストの本文です。</p>
<p class="acms-admin-text-right">こちらはテストの本文です。</p>
<p class="acms-admin-text-center">こちらはテストの本文です。</p>
<p class="acms-admin-text-nowrap">こちらはテストの本文です。</p>

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

<p class="acms-admin-text-primary">こちらはテストの本文です。</p>
<p class="acms-admin-text-info">こちらはテストの本文です。</p>
<p class="acms-admin-text-success">こちらはテストの本文です。</p>
<p class="acms-admin-text-warning">こちらはテストの本文です。</p>
<p class="acms-admin-text-danger">こちらはテストの本文です。</p>

アイコン用背景

<span class="acms-admin-icon-bg">...</span>
<span class="acms-admin-icon-bg acms-admin-icon-bg-info">...</span>
<span class="acms-admin-icon-bg acms-admin-icon-bg-success">...</span>
<span class="acms-admin-icon-bg acms-admin-icon-bg-warning">...</span>
<span class="acms-admin-icon-bg acms-admin-icon-bg-danger">...</span>

角丸

角丸
.acms-admin-round
丸
.acms-admin-circle
<span class="acms-admin-icon-bg acms-admin-round">...</span>
<span class="acms-admin-icon-bg acms-admin-circle">...</span>

画像のレスポンシブ対応

<img src="/themes/system/admin/styleguide/images/sampleImage.jpg" alt="" class="acms-admin-img-responsive">

表示の制御

デバイス別

表示種類

表示方法 クラス名
表示する acms-admin-show-*
表示しない acms-admin-hide-*

各デバイス別

デバイス クラス名
スマートフォン acms-admin-*-sp
タブレット acms-admin-*-tablet
PC acms-admin-*-pc 
<div class="acms-admin-show-sp">表示します<div>
<div class="acms-admin-show-tablet">表示します<div>
<div class="acms-admin-show-pc">表示します<div>

画面幅別

表示種類

表示方法 クラス名
block表示 .acms-admin-block
inline表示 .acms-admin-inline
inline-block表示 .acms-admin-inline-block
table-cell表示 .acms-admin-table-cell
非表示 .acms-admin-hide 
<div class="acms-admin-block">表示します<div>
<div class="acms-admin-inline">表示します<div>
<div class="acms-admin-inline-block">表示します<div>
<div class="acms-admin-table-cell">表示します<div>
<div class="acms-admin-hide">非表示にします<div>

各画面幅別

画面幅 クラス名
デフォルト そのまま
479px以下 acms-admin-*-xs
480px以上、767px以下 acms-admin-*-sm
768px以上、1023px以下 acms-admin-*-md
1024px以上、1439px以下 acms-admin-*-lg
1440px以上 acms-admin-*-xl 
<div class="acms-admin-block">常に表示します<div>
<div class="acms-admin-block-xs">479以下で表示します<div>
<div class="acms-admin-block-sm">480px以上、767px以下で表示します<div>
<div class="acms-admin-block-md">768px以上、1023px以下で表示します<div>
<div class="acms-admin-block-lg">1024px以上、1439px以下で表示します<div>
<div class="acms-admin-block-xl">1440px以上で表示します<div>

プリント用

表示方法 クラス名
block表示 acms-admin-print-block
inline表示 acms-admin-print-inline
inline-block表示 acms-admin-print-inline-block
表示しない acms-admin-print-hide 
<div class="acms-admin-print-block">表示します<div>
<div class="acms-admin-print-inline">表示します<div>
<div class="acms-admin-print-inline-block">表示します<div>
<div class="acms-admin-print-hide">非表示にします<div>

アクセシビリティ用

視覚的に表示はされませんが、音声で出力します。

表示方法 クラス名
デフォルト acms-admin-hide-visually
479px以下 acms-admin-hide-visually-xs
480px以上、767px以下 acms-admin-hide-visually-sm
768px以上、1023px以下 acms-admin-hide-visually-md
1024px以上、1439px以下 acms-admin-hide-visually-lg
1440px以上 acms-admin-hide-visually-xl 
<div class="acms-admin-hide-visually">常に視覚的には表示されません<div>
<div class="acms-admin-hide-visually-xs">479以下で視覚的には表示されません<div>
<div class="acms-admin-hide-visually-sm">480px以上、767px以下で視覚的には表示されません<div>
<div class="acms-admin-hide-visually-md">768px以上、1023px以下で視覚的には表示されません<div>
<div class="acms-admin-hide-visually-lg">1024px以上、1439px以下で視覚的には表示されません<div>
<div class="acms-admin-hide-visually-xl">1440px以上で視覚的には表示されません<div>

グリッドシステム

デフォルト

.acms-admin-containerで囲うと幅940px中央揃えに変わります。ブロックをレイアウトするために使います。合計12カラムで計算します。

※Ver.1.0.1ではacms-admin-gridとacms-admin-grid-rでレスポンシブ対応にするか分けていましたが、Ver.1.1.0からはacms-admin-col-のクラス名の指定の仕方で管理できるように変更しました。従来のacms-admin-grid（レスポンシブ対応しないようにするクラス）を使う場合は、acms-admin-col-クラスをお使いください。

.acms-admin-col-（レスポンシブ無し）

col-1
acms-admin-col-11
acms-admin-col-2
acms-admin-col-10
acms-admin-col-3
acms-admin-col-9
acms-admin-col-4
acms-admin-col-8
acms-admin-col-5
acms-admin-col-7
acms-admin-col-6
acms-admin-col-6 
<div class="acms-admin-container">
	<div class="acms-admin-grid">
		<div class="acms-admin-col-5">
		...
		</div>

		<div class="acms-admin-col-7">
		...
		</div>
	</div>
</div>

.acms-admin-col-*-（レスポンシブ有り）

col-md-1
acms-admin-col-md-11
acms-admin-col-md-2
acms-admin-col-md-10
acms-admin-col-md-3
acms-admin-col-md-9
acms-admin-col-md-4
acms-admin-col-md-8
acms-admin-col-md-5
acms-admin-col-md-7
acms-admin-col-md-6
acms-admin-col-md-6 
<div class="acms-admin-container">
	<div class="acms-admin-grid">
		<div class="acms-admin-col-md-5">
		...
		</div>

		<div class="acms-admin-col-md-7">
		...
		</div>
	</div>
</div>

スマートフォン、タブレット、デスクトップ幅

.acms-admin-col-md-7 .acms-admin-col-sm-6
.acms-admin-col-md-5 .acms-admin-col-sm-6
.acms-admin-col-md-7 .acms-admin-col-sm-6 .acms-admin-col-lg-4
.acms-admin-col-md-5 .acms-admin-col-sm-6 . acms-admin-col-lg-8
.acms-admin-col-md-7 .acms-admin-col-sm-6 .acms-admin-col-lg-4 .acms-admin-col-xl-8
.acms-admin-col-md-5 .acms-admin-col-sm-6 . acms-admin-col-lg-8 .acms-admin-col-xl-4 
<div class="acms-admin-container">
	<div class="acms-admin-grid">
		<div class="acms-admin-col-md-7 acms-admin-col-sm-6">
		...
		</div>

		<div class="acms-admin-col-md-5 acms-admin-col-sm-6">
		...
		</div>

	</div>

	<div class="acms-admin-grid">
		<div class="acms-admin-col-md-7 acms-admin-col-sm-6 acms-admin-col-lg-4">
		...
		</div>

		<div class="acms-admin-col-md-5 acms-admin-col-sm-6 acms-admin-col-lg-8">
		...
		</div>

	</div>

	<div class="acms-admin-grid">
		<div class="acms-admin-col-md-7 acms-admin-col-sm-6 acms-admin-col-lg-4 acms-admin-col-xl-8">
		...
		</div>

		<div class="acms-admin-col-md-5 acms-admin-col-sm-6 acms-admin-col-lg-8 acms-admin-col-xl-4">
		...
		</div>

	</div>
</div>

各画面幅対応表

クラス名 デフォルトのブレイクポイント
acms-admin-col- 全て
acms-admin-col-sm- 480px以上〜
acms-admin-col-md- 768px以上〜
acms-admin-col-lg- 1024px以上〜
acms-admin-col-xl- 1440px以上〜

グリッドの入れ子

acms-admin-col-md-4
acms-admin-col-md-8
.acms-admin-col-md-5
.acms-admin-col-md-7 
<div class="acms-admin-grid">
	<div class="acms-admin-col-md-4">
	...
	</div>

	<div class="acms-admin-col-md-8">
		<div class="acms-admin-grid">
			<div class="acms-admin-col-md-5">
			...
			</div>

			<div class="acms-admin-col-md-7">
			...
			</div>
		</div>
	</div>
</div>

グリッドの入れ替え push(左→右) 、pull(右→左)

.acms-admin-push-5にするとグリッドが右側にきて、.acms-admin-pull-7にするとグリッドが左側にきます。

.acms-admin-push-md-5(左から右へ入れ替え)
.acms-admin-pull-md-7(右から左へ入れ替え) 
<div class="acms-admin-grid">
	<div class="acms-admin-col-md-7 acms-admin-push-md-5">
	...
	</div>

	<div class="acms-admin-col-md-5 acms-admin-pull-md-7">
	...
	</div>
</div>

グリッドの入れ替え push(左→右) 、pull(右→左) タブレット幅

タブレット幅のときに.acms-admin-push-md-5にするとグリッドが右側にきて、.acms-admin-pull-md-7にするとグリッドが左側にきます。

.acms-admin-push-md-5(左から右へ入れ替え)
.acms-admin-pull-md-7(右から左へ入れ替え) 
<div class="acms-admin-grid">
	<div class="acms-admin-col-md-7 acms-admin-push-md-5">
	...
	</div>

	<div class="acms-admin-col-md-5 acms-admin-pull-md-7">
	...
	</div>
</div>

グリッドの入れ替え push(左→右) 、pull(右→左) スマートフォン幅

スマートフォンの幅のときに.acms-admin-push-sm-5にするとグリッドが右側にきて、.acms-admin-pull-sm-7にするとグリッドが左側にきます。

.acms-admin-push-sm-5(左から右へ入れ替え)
.acms-admin-pull-sm-7(右から左へ入れ替え) 
<div class="acms-admin-grid">
	<div class="acms-admin-col-sm-7 acms-admin-push-sm-5">
	...
	</div>

	<div class="acms-admin-col-sm-5 acms-admin-pull-sm-7">
	...
	</div>
</div>

グリッドの入れ替え push、pullを解除する スマートフォン幅、タブレット幅

タブレット幅のときにpush、pullを解除する

.acms-admin-push-md-auto(左から右→右から左へ入れ替え)
.acms-admin-pull-md-auto(右から左→左から右へ入れ替え) 
<div class="acms-admin-grid">
	<div class="acms-admin-push-5 acms-admin-col-md-7 acms-admin-push-md-auto">
	...
	</div>

	<div class="acms-admin-pull-7 acms-admin-col-md-5 acms-admin-pull-md-auto">
	...
	</div>
</div>

スマートフォン幅のときにpush、pullを解除する

.acms-admin-push-sm-auto(左から右→右から左へ入れ替え)
.acms-admin-pull-sm-auto(右から左→左から右へ入れ替え) 
<div class="acms-admin-grid">
	<div class="acms-admin-push-5 acms-admin-col-md-7 acms-admin-push-md-5 acms-admin-col-sm-7 acms-admin-push-sm-auto">
	...
	</div>

	<div class="acms-admin-pull-7 acms-admin-col-md-5 acms-admin-pull-md-7 acms-admin-col-sm-5 acms-admin-pull-sm-auto">
	...
	</div>
</div>

タイポグラフィ

見出し h1 〜 h6

h1. 見出し1

h2. 見出し2

h3. 見出し3

h4. 見出し4

h5. 見出し5
h6. 見出し6
<h1 class="acms-admin-h1">h1. 見出し1</h1>
<h2 class="acms-admin-h2">h2. 見出し2</h2>
<h3 class="acms-admin-h3">h3. 見出し3</h3>
<h4 class="acms-admin-h4">h4. 見出し4</h4>
<h5 class="acms-admin-h5">h5. 見出し5</h5>
<h6 class="acms-admin-h6">h6. 見出し6</h6>

段落 p

これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。

これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。

<p class="acms-admin-p">
	サンプルテキストです。
</p>

リスト ul

  • りんご
  • みかん
  • ぶどう
    • 山梨県
    • 富士岡フォーム
    • ワイン
  • もも
<ul class="acms-admin-ul">
	<li>...</li>
</ul>

リスト（点なし）

.acms-admin-list-nostyle

  • りんご
  • みかん
  • ぶどう
    • 山梨県
    • 富士岡フォーム
    • ワイン
  • もも
<ul class="acms-admin-list-nostyle">
	<li>...</li>
</ul>

リスト（インライン）

.acms-admin-list-inline

  • りんご
  • みかん
  • ぶどう
  • もも
<ul class="acms-admin-list-inline">
	<li>...</li>
</ul>

番号付きリスト ol

  1. りんご
  2. みかん
  3. ぶどう
    1. 山梨県
    2. 富士岡フォーム
    3. ワイン
  4. もも
<ol class="acms-admin-ol">
	<li>...</li>
</ol>

定義リスト dl

りんご
青森県産。品種名は「ふじ」。日本で多く生産されており、甘みが強く歯ごたえもあるりんご。収穫時期は10月中旬になる。
みかん
愛媛県産。ウンシュウミカン。ビニールハウスや温室で栽培されており一年中収穫ができる。ビタミンCも多く含まれている。
ぶどう
山梨県産。巨峰。ぶどうはワイン、ジャム、レーズン、ゼリーなど多くの食品として使われる。
<dl class="acms-admin-dl">
	<dt>用語</dt>
	<dd>用語の説明</dd>
</dl>

定義リスト（横並び）

.acms-admin-dl-horizontal

りんご
青森県産。品種名は「ふじ」。日本で多く生産されており、甘みが強く歯ごたえもあるりんご。収穫時期は10月中旬になる。
みかん
愛媛県産。ウンシュウミカン。ビニールハウスや温室で栽培されており一年中収穫ができる。ビタミンCも多く含まれている。
ぶどう
山梨県産。巨峰。ぶどうはワイン、ジャム、レーズン、ゼリーなど多くの食品として使われる。
<dl class="acms-admin-dl-horizontal">
	<dt>用語</dt>
	<dd>用語の説明</dd>
</dl>

定義リスト（横並び - 線つき）

.acms-admin-dl-line

2013.07.12
青森県産。品種名は「ふじ」。日本で多く生産されており、甘みが強く歯ごたえもあるりんご。収穫時期は10月中旬になる。
2013.08.15
愛媛県産。ウンシュウミカン。ビニールハウスや温室で栽培されており一年中収穫ができる。ビタミンCも多く含まれている。
2013.09.17
山梨県産。巨峰。ぶどうはワイン、ジャム、レーズン、ゼリーなど多くの食品として使われる。
<dl class="acms-admin-dl-line">
	<dt>用語</dt>
	<dd>用語の説明</dd>
</dl>

引用 blockquote

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
<blockquote class="acms-admin-blockquote">
	HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
</blockquote>

整形済みテキスト、ソースコード pre code

ソースコード code

ボタンを使うときは、.acms-admin-code というclassを付けてください。

<p>ボタンを使うときは、<code class="acms-admin-code">.acms-admin-code</code> というclassを付けてください。</p>

整形済みテキスト pre

<pre><a href="#" class="acms-admin-btn">送信する</a></pre>

テーブル

  1. 通常のテーブル
  2. ボーダーなしテーブル
  3. ボーダーありテーブル
  4. thの色ありテーブル
  5. ストライプのテーブル
  6. hoverテーブル
  7. レスポンシブのテーブル
  8. 管理画面用テーブル
  9. 管理画面用テーブル theadあり
  10. 管理画面用テーブル ストライプ

エントリーではtbodyが自動的に入るが、thead、tfootは入らない

通常のテーブル

.acms-admin-table

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table">
...
</table>

ボーダーなしテーブル

.acms-admin-table-none

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table acms-admin-table-none">
...
</table>

ボーダーありテーブル

.acms-admin-table-bordered

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table acms-admin-table-bordered">
...
</table>

thの色ありテーブル

.acms-admin-table-heading

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table acms-admin-table-heading">
...
</table>

ストライプテーブル

.acms-admin-table-striped

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table acms-admin-table-striped">
...
</table>

trの中のtdにhoverした場合

.acms-admin-table-hover

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table acms-admin-table-hover">
...
</table>

trにhoverした場合

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table acms-admin-table-hover-line">
...
</table>

レスポンシブのテーブル

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data 
<div class="acms-admin-table-responsive">
<table class="acms-admin-table">
...
</table>
</div>

管理画面用テーブル

一覧テーブル

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table-admin">
...
</table>

theadあり .acms-admin-table-heading

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table-admin acms-admin-table-heading">
<thead>
...
</thead>
</table>

管理画面用 カラー

.acms-admin-table-info .acms-admin-table-info .acms-admin-table-info .acms-admin-table-info .acms-admin-table-info .acms-admin-table-info .acms-admin-table-info
.acms-admin-table-success .acms-admin-table-success .acms-admin-table-success .acms-admin-table-success .acms-admin-table-success .acms-admin-table-success .acms-admin-table-success
.acms-admin-table-warning .acms-admin-table-warning .acms-admin-table-warning .acms-admin-table-warning .acms-admin-table-warning .acms-admin-table-warning .acms-admin-table-warning
.acms-admin-table-danger .acms-admin-table-danger .acms-admin-table-danger .acms-admin-table-danger .acms-admin-table-danger .acms-admin-table-danger .acms-admin-table-danger 
<tr class="acms-admin-table-info">
<!-- info 青色 -->
</tr>
<tr class="acms-admin-table-success">
<!-- success 緑 -->
</tr>
<tr class="acms-admin-table-warning">
<!-- warning 黄色 -->
</tr>
<tr class="acms-admin-table-danger">
<!-- danger 赤色 -->
</tr>

管理画面用ストライプテーブル

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table-admin acms-admin-table-admin-striped">
...
</table>

組み合わせ

 表示順 eid ステータス / タイトル / コード / 日時 / ブログ / カテゴリー ユーザー
25 公開

段組みテスト

 entry-25.html
管理人管理人 
<table class="adminTable acms-admin-table-admin acms-admin-table-admin-striped acms-admin-table-heading  js-admin_table-sortable acms-admin-table-hover">
...
</table>

編集画面用テーブル

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table-admin-edit">
...
</table>

編集画面用テーブル（ボーダー）

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data 
<table class="acms-admin-table-admin-edit-bordered">
...
</table>

編集画面用テーブル（フォーム付き）

基本

キャッシュ
キャッシュ有効時間 秒
アクセスログ 保存期間 
<h3 class="acms-admin-title2">基本</h3>
<table class="adminTable acms-admin-table-admin-edit acms-admin-form">
	<tbody>
		<tr>
			<th>キャッシュ<i data-acms-tooltip="キャッシュ機能の設定状態です。チェックが外された場合、キャッシュ機能は動作しません。" class="acms-admin-icon-tooltip js-acms-tooltip"></i></th>
			<td>
				<input type="hidden" value="off" name="cache">
				<label class="acms-admin-form-checkbox"><input type="checkbox" checked="checked" value="on" name="cache"><i class="acms-admin-ico-checkbox"></i>有効</label>
				<input type="hidden" value="cache" name="config[]">
			</td>
		</tr>
	</tbody>
</table>

フォーム

フォームの機能

formタグに .acms-admin-form をつけるとinputタグに装飾がつきます。

フォーカスすると周りのボーダーが青色に変わります。

基本のHTML

<form class="acms-admin-form">
	<input type="email" id="email" placeholder="ex) info@hoge.com">
</form>

ブロック

.acms-admin-form-group

<div class="acms-admin-form-group">
	<label for="email">メールアドレス</label>
	<input type="email" id="email" placeholder="ex) info@example.com">
</div>

jpeg、gif、ping形式でアップロードしてください。

ラベルもブロックにする

.acms-admin-form-block

ラベルをブロックするとinputが下にきます。

<div class="acms-admin-form-group">
	<label for="email" class="acms-admin-form-block">メールアドレス</label>
	<input type="email" id="email" placeholder="ex) info@example.com">
</div>

インライン（横並び）

無効化

disabled属性をつける

<input type="email" id="email" disabled>

<select disabled>
	<option value="">---</option>
	<option value="...">...</option>
</select>

エラー

.acms-admin-text-error

テキストの色が赤色になります。

お名前を入力してください。

<p class="acms-admin-text-error">お名前を入力してください。</p>

.acms-admin-form-error

inputが赤色に変わる

<input type="email" placeholder="ex) info@example.com" class="acms-admin-form-error">

フォームサイズ

.acms-admin-form-large

大きい

.acms-admin-form-small

小さい

<input type="email" id="largeForm" placeholder="ex) info@example.com" class="acms-admin-form-large">

<input type="email" id="smallForm" placeholder="ex) info@example.com" class="acms-admin-form-small">

フォーム長さ

<input type="text" class="acms-admin-form-width-large">
<input type="text" class="acms-admin-form-width-medium">
<input type="text" class="acms-admin-form-width-small">
<input type="text" class="acms-admin-form-width-mini">
<input type="text" class="acms-admin-form-width-full">
<input type="text" class="acms-admin-form-width-3quarters">
<input type="text" class="acms-admin-form-width-half">
<input type="text" class="acms-admin-form-width-quarter">

チェックボックスとラジオボタンのデザインを変える

Internet Explorerは11以上で対応しています。

チェックボックス（左にアイコン）

<div class="acms-admin-form-checkbox">
	<input checked="checked" type="checkbox" id="input-checkbox-apple">
	<label for="input-checkbox-apple">
		<i class="acms-admin-ico-checkbox"></i>りんご
	</label>
</div>

チェックボックス（ボタン）

<input type="checkbox" id="checkbox-1-1" class="acms-admin-btn-checkbox" /><label for="checkbox-1-1">りんご</label>

ラジオボタン（左にアイコン）

<div class="acms-admin-form-radio">
	<input name="custom-radio" checked="checked" type="radio" id="input-radio-udon">
	<label for="input-radio-udon">
		<i class="acms-admin-ico-radio"></i>うどん
	</label>
</div>

ラジオボタン（ボタン）

<input type="radio" id="radio-1-2" name="radio-1-set" class="acms-admin-btn-radio" /><label for="radio-1-2">そば</label>

入力欄と一緒に

ラジオボタン

<div class="acms-admin-form-group acms-admin-form-width-medium">
	<div class="acms-admin-form-action">
		<div class="acms-admin-form-radio acms-admin-form-side acms-admin-form-side-left">
			<input name="custom-radio" checked="checked" type="radio" id="input-radio-with-input">
			<label for="input-radio-with-input">
				<i class="acms-admin-ico-radio"></i>
			</label>
		</div>
		<input type="email" class="acms-admin-form-width-small">
	</div>
</div>
<div class="acms-admin-form-group acms-admin-form-width-medium">
	<div class="acms-admin-form-action">
		<span class="acms-admin-form-side"><input name="custom-radio" checked="checked" type="radio"></span>
		<input type="email" class="acms-admin-form-width-small">
	</div>
</div>

チェックボックス

<div class="acms-admin-form-group acms-admin-form-width-medium">
	<div class="acms-admin-form-action">
		<div class="acms-admin-form-checkbox acms-admin-form-side">
			<input name="custom-checkbox" checked="checked" type="checkbox" id="input-checkbox-with-input">
			<label for="input-checkbox-with-input">
				<i class="acms-admin-ico-checkbox"></i>
			</label>
		</div>
		<input type="email" class="acms-admin-form-width-small">
	</div>
</div>
<div class="acms-admin-form-group acms-admin-form-width-medium">
	<div class="acms-admin-form-action">
		<span class="acms-admin-form-side"><input name="custom-checkbox" checked="checked" type="checkbox"></span>
		<input type="email" class="acms-admin-form-width-small">
	</div>
</div>

アイコン

<div class="acms-admin-form-action acms-admin-form-width-medium">
	<span class="acms-admin-form-side"><i class="acms-admin-icon-time"></i></span>
	<input type="email" class="acms-admin-form-width-small">
</div>

ボタン

<div class="acms-admin-grid">
	<div class="acms-admin-form-group acms-admin-col-6">
		<div class="acms-admin-form-action">
			<input type="email" class="acms-admin-form-width-full">
			<span class="acms-admin-form-side-btn"><button type="submit" class="acms-admin-btn">送信</button></span>
		</div>
	</div>
</div>

ボタンの分離

<div class="acms-admin-grid">
	<div class="acms-admin-form-group acms-admin-col-6">
		<div class="acms-admin-form-action acms-admin-form-action-separate">
			<input type="email" class="acms-admin-form-width-full">
			<span class="acms-admin-form-side-btn"><button type="submit" class="acms-admin-btn">送信</button></span>
		</div>
	</div>
</div>

大きさ

<div class="acms-admin-grid acms-admin-form">
	<div class="acms-admin-col-4 acms-admin-form-action">
		<span class="acms-admin-form-side">
			<input name="custom-radio" checked="checked" type="radio">
		</span>
		<input type="email" class="acms-admin-form-width-small acms-admin-form-small">
	</div>
	<div class="acms-admin-col-4 acms-admin-form-action">
		<span class="acms-admin-form-side">
			<input name="custom-radio" checked="checked" type="radio">
		</span>
		<input type="email" class="acms-admin-form-width-small">
	</div>
	<div class="acms-admin-col-4 acms-admin-form-action">
		<span class="acms-admin-form-side">
			<input name="custom-radio" checked="checked" type="radio">
		</span>
		<input type="email" class="acms-admin-form-width-small acms-admin-form-large">
	</div>
</div>

左右

<div class="acms-admin-grid">
	<div class="acms-admin-form-group acms-admin-col-6">
		<div class="acms-admin-form-action">
			<span class="acms-admin-form-side-btn"><button type="submit" class="acms-admin-btn">送信</button></span>
			<input type="email" class="acms-admin-form-width-small">
		</div>
	</div>
	<div class="acms-admin-form-group acms-admin-col-6">
		<div class="acms-admin-form-action">
			<input type="email" class="acms-admin-form-width-small">
			<span class="acms-admin-form-side-btn"><button type="submit" class="acms-admin-btn">送信</button></span>
		</div>
	</div>
</div>

ボタン

レギュラー フラット 
<a href="#" class="acms-admin-btn">レギュラー</a>
<a href="#" class="acms-admin-btn-flat">フラット</a>

デフォルトのボタン

ボタンの色

デフォルト Primary Info Success Warning Danger Link 
<a href="#" class="acms-admin-btn">デフォルト</a>
<a href="#" class="acms-admin-btn acms-admin-btn-primary">Primary</a>
<a href="#" class="acms-admin-btn acms-admin-btn-info">Info</a>
<a href="#" class="acms-admin-btn acms-admin-btn-success">Success</a>
<a href="#" class="acms-admin-btn acms-admin-btn-warning">Warning</a>
<a href="#" class="acms-admin-btn acms-admin-btn-danger">Danger</a>
<a href="#" class="acms-admin-btn acms-admin-btn-link">Link</a>

各HTML要素にボタン

  • リンク
  • ボタン
  • インプット
  • サブミット
リンク 
<a class="acms-admin-btn" href="#">リンク</a>
<button class="acms-admin-btn" type="submit">ボタン</button>
<input class="acms-admin-btn" type="button" value="インプット">
<input class="acms-admin-btn" type="submit" value="サブミット">

ボタンの動き

regular hover active 
<a href="#" class="acms-admin-btn">regular</a>
<a href="#" class="acms-admin-btn acms-admin-btn-hover">hover</a>
<a href="#" class="acms-admin-btn acms-admin-btn-active">active</a>

ボタンの大きさ

用意したもの4種類

  • 小さいサイズ
  • 通常サイズ
  • 大きいサイズ
  • 全幅のサイズ
小さいサイズ 通常サイズ 大きいサイズ 
<a href="#" class="acms-admin-btn acms-admin-btn-small">small</a>
<a href="#" class="acms-admin-btn">normal</a>
<a href="#" class="acms-admin-btn acms-admin-btn-large">large</a>

<button type="button" class="acms-admin-btn acms-admin-btn-block">全幅のサイズ</button>

押せないボタン

  • 属性がdisabled
  • クラス名が.acms-admin-btn-disabledのもの
クラス名がdisabled 
<button type="button" class="acms-admin-btn" disabled="disabled">disabled</button>
<a href="#" class="acms-admin-btn acms-admin-btn-disabled">クラス名がdisabled</a>

フラットボタン

ボタンの色

デフォルト Primary Info Success Warning Danger 
<a href="#" class="acms-admin-btn-flat">デフォルト</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-flat-primary">Primary</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-flat-info">Info</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-flat-success">Success</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-flat-warning">Warning</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-flat-danger">Danger</a>

各HTML要素にボタン

  • リンク
  • ボタン
  • インプット
  • サブミット
リンク 
<a class="acms-admin-btn-flat" href="#">リンク</a>
<button class="acms-admin-btn-flat" type="submit">ボタン</button>
<input class="acms-admin-btn-flat" type="button" value="インプット">
<input class="acms-admin-btn-flat" type="submit" value="サブミット">

ボタンの動き

デフォルト hover active 
<a href="#" class="acms-admin-btn-flat">regular</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-hover">hover</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-active">active</a>

ボタンの大きさ

用意したもの4種類

  • 小さいサイズ
  • 通常サイズ
  • 大きいサイズ
  • 全幅のサイズ
小さいサイズ 通常サイズ 大きいサイズ 
<a href="#" class="acms-admin-btn-flat acms-admin-btn-small">小さいサイズ</a>
<a href="#" class="acms-admin-btn-flat">通常サイズ</a>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-large">大きいサイズ</a>

<button type="button" class="acms-admin-btn-flat acms-admin-btn-block">全幅のサイズ</button>

押せないボタン

  • 属性がdisabled
  • クラス名が.acms-admin-btn-disabled
クラス名がdisabled 
<button type="button" class="acms-admin-btn-flat" disabled="disabled">属性がdisabled</button>
<a href="#" class="acms-admin-btn-flat acms-admin-btn-disabled">クラス名がdisabled</a>

リストグループ

リストグループ

<ul class="acms-admin-list-group">
	<li><a href="#" class="acms-admin-list-group-item">リスト</a></li>
</ul>

リンクがインラインのとき

リストグループ 

<h3 class="acms-admin-list-group-heading">リストグループ</h3>
<ul class="acms-admin-list-group">
	<li class="acms-admin-list-group-item"><time datetime="2015-04-02">2015年04月02日</time> <span class="acms-admin-label acms-admin-label-default">お知らせ</span><a href="#" class="acms-admin-list-group-title-link">新着エントリー</a><span class="acms-admin-label acms-admin-label-warning">New!</span></li>
</ul>

サマリー

サマリー

サマリーのタイトル

こちらに概要文が入ります。こちらに概要文が入ります。こちらに概要文が入ります。

サマリーのタイトル

こちらに概要文が入ります。こちらに概要文が入ります。こちらに概要文が入ります。

サマリーのタイトル

こちらに概要文が入ります。こちらに概要文が入ります。こちらに概要文が入ります。

<div class="acms-admin-summary">
	<div class="acms-admin-summary-image">
		<img src="..." alt="...">
	</div>
	<div class="acms-admin-summary-body">
		<p>....</p>
	</div>
</div>

サムネイル

角丸

<img src="" alt="" class="acms-admin-img-rounded">

シャドウ

<img src="" alt="" class="acms-admin-img-shadow">

枠

<img src="" alt="" class="acms-admin-img-bordered">

キャプション

キャプション
<div class="acms-admin-img-captionBox">
<img src="" alt="">
<div class="acms-admin-img-caption">キャプション</div>
</div>

acms-admin-img-roundedと合わせると

キャプション
<div class="acms-admin-img-captionBox acms-admin-img-rounded">
<img src="" alt="">
<div class="acms-admin-img-caption">キャプション</div>
</div>

acms-admin-img-borderedと合わせると

キャプション
<div class="acms-admin-img-captionBox">
<img src="" alt="" class="acms-admin-img-bordered">
<div class="acms-admin-img-caption">キャプション</div>
</div>

hoverしたらキャプションが見える

　キャプション

 
<a class="acms-admin-img-captionBox">
<img src="" alt="">
<p class="acms-admin-img-caption acms-admin-img-hover">キャプション</p>
</a>

全部合わせると

　キャプション

 
<a class="acms-admin-img-captionBox acms-admin-img-rounded">
<img src="" alt="" class="acms-admin-img-bordered acms-admin-img-shadow">
<p class="acms-admin-img-caption acms-admin-img-hover">キャプション</p>
</a>

文章付き

サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。

サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。

サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。

<a class="acms-admin-thumbnail">
<img src="" alt="">
<p>サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。</p>
</a>

絞り込みフィルター

検索条件

詳細検索

詳しい条件

絞り込み

<div class="acms-admin-filter">
   <form action="" method="post" class="acms-admin-form">
      <div class="acms-admin-filter-body">
         <div class="acms-admin-filter-group">
            <p class="acms-admin-filter-label">検索条件</p>
            <div class="acms-admin-filter-content acms-admin-filter-content-fit">
               <div class="acms-admin-filter-item">
                  <label for="filter-example01" class="acms-admin-filter-item-name">カテゴリー</label>
                     ...
                  </div>
                  <div class="acms-admin-filter-item acms-admin-filter-item-full">
                     ...
                  </div>
                  <p class="acms-admin-filter-detail-btn"><a href="#search-detail" class="js-fader"><span class="acms-admin-icon-arrow-right"></span>詳細検索</a></p>
               </div>
            </div>
            <div id="search-detail">
               <div class="acms-admin-filter-inner">
                  <div class="acms-admin-filter-group">
                     <p class="acms-admin-filter-label">詳しい条件</p>
                     <div class="acms-admin-filter-content">
                        <div class="acms-admin-filter-item">
                           ...
                        </div>
                        <div class="acms-admin-filter-item">
                           ...
                        </div>
                        <div class="acms-admin-filter-item">
                           ...
                        </div>
                        <div class="acms-admin-filter-item">
                           ...
                        </div>
                        <div class="acms-admin-filter-item">
                           ...
                        </div>
                        <div class="acms-admin-filter-item">
                           ...
                        </div>
                     </div>
                  </div>
                  <div class="acms-admin-filter-group">
                     <p class="acms-admin-filter-label">絞り込み</p>
                     <div class="acms-admin-filter-content">
                        <div class="acms-admin-filter-item">
                           <label for="filter-order" class="acms-admin-filter-item-name acms-admin-show-sp">ソート</label>
                           <div class="acms-admin-filter-item-content">
                              ...
                           </div>
                        </div>
                        <div class="acms-admin-filter-item">
                           <label for="filter-limit" class="acms-admin-filter-item-name acms-admin-show-sp">表示数</label>
                           <div class="acms-admin-filter-item-content">
                              ...
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      <div class="acms-admin-filter-footer">
         <input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-admin-btn-admin acms-admin-btn-admin-info acms-admin-btn-admin-search acms-admin-width-sp" />
      </div>
   </form>
</div>

<div class="acms-admin-filter">
   <form action="" method="post" class="acms-admin-form">
      <div class="acms-admin-filter-body">
         <div class="acms-admin-filter-group">
            <div class="acms-admin-filter-item">
               <label for="filter-example" class="acms-admin-filter-item-name"><!--T-->ソート<!--/T--></label>
               <select name="example" id="filter-example" class="js-select2 acms-admin-margin-right-small">
                  <option value="example1">オプション1</option>
                  <option value="example2">オプション2</option>
                  <option value="example3">オプション3</option>
               </select>
            </div>
            <div class="acms-admin-filter-item">
               <input type="submit" name="ACMS_POST_2GET" value="表示" class="acms-admin-btn acms-admin-btn-info acms-admin-width-sp" />
            </div>
         </div>
      </div>
   </form>
</div>

トピックパス

<ul class="acms-admin-topicpath clearfix">
	<li><a href="#">a-blog cms 2.0.α 開発版</a></li>
	<li>機能設定</li>
</ul>

タイトル

機能設定

<h1 class="acms-admin-title">...</h1>

基本

<h1 class="acms-admin-title2">...</h1>

ページャー

<div class="acms-admin-pager-container">
	<ul class="acms-admin-pager">
		<li class="cur"><span>1</span></li>
		<li><span><a href="#">2</a></span></li>
		<li><span><a href="#">3</a></span></li>
		<li class="next"><a href="#">次へ»</a></li>
	</ul>
</div>

アラート

デフォルト

.acms-admin-alert-success

.acms-admin-alert-info

.acms-admin-alert-danger

.acms-admin-alert-warning

<p class="acms-admin-alert">
	<button class="js-acms-alert-close">×</button>
	デフォルト
</p>
<p class="acms-admin-alert acms-admin-alert-success">
	<button class="js-acms-alert-close acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-success
</p>
<p class="acms-admin-alert acms-admin-alert-info">
	<button class="js-acms-alert-close acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-info
</p>
<p class="acms-admin-alert acms-admin-alert-danger">
	<button class="js-acms-alert-close acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-danger
</p>
<p class="acms-admin-alert acms-admin-alert-warning">
	<button class="js-acms-alert-close acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-warning
</p>

アイコンつき

デフォルト

.acms-admin-alert-success

.acms-admin-alert-info

.acms-admin-alert-danger

.acms-admin-alert-warning

<p class="acms-admin-alert acms-admin-alert-icon"><span class="acms-admin-alert-icon-before acms-admin-icon-news"></span>
	<button class="js-acms-alert-close acms-admin-alert-icon-after acms-admin-margin-right-mini">×</button>
	デフォルト
</p>
<p class="acms-admin-alert acms-admin-alert-icon acms-admin-alert-success"><span class="acms-admin-alert-icon-before acms-admin-icon-news"></span>
	<button class="js-acms-alert-close acms-admin-alert-icon-after acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-success
</p>
<p class="acms-admin-alert acms-admin-alert-icon acms-admin-alert-info"><span class="acms-admin-alert-icon-before acms-admin-icon-news"></span>
	<button class="js-acms-alert-close acms-admin-alert-icon-after acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-info
</p>
<p class="acms-admin-alert acms-admin-alert-icon acms-admin-alert-danger"><span class="acms-admin-alert-icon-before acms-admin-icon-attention"></span>
	<button class="js-acms-alert-close acms-admin-alert-icon-after acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-danger
</p>
<p class="acms-admin-alert acms-admin-alert-icon acms-admin-alert-warning"><span class="acms-admin-alert-icon-before acms-admin-icon-attention"></span>
	<button class="js-acms-alert-close acms-admin-alert-icon-after acms-admin-margin-right-mini">×</button>
	.acms-admin-alert-warning
</p>

ラベル

ラベル ラベル 公開 非公開 下書き 
<span class="acms-admin-label acms-admin-label-success">
...
</span>

xボタン付きラベル

ラベルx
ラベルx
公開x
非公開x
下書きx 
<div class="acms-admin-label-group acms-admin-inline-space">
	<span class="acms-admin-label">ラベル</span><a href="#" class="acms-admin-label acms-admin-label-side">x</a>
</div>

tdの幅が変わってしまってレイアウトが崩れてしまう場合

ラベル 
<div class="acms-admin-labelbox">
	<span class="acms-admin-label acms-admin-label-success">ラベル</span>
</div>

バッジ

1 1 1 1 1 
<span class="acms-admin-badge acms-admin-badge-success">
...
</span>

承認通知用バッジ

承認通知 1
<div class="acms-admin-label-approval-group">
	<a href="#">承認通知</a> <span class="acms-admin-badge acms-admin-badge-approval">1</span>
</div>

パネル

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。
パネルのフッター 
<div class="acms-admin-panel">
	<div class="acms-admin-panel-header">
		<h3 class="acms-admin-panel-title">パネルのタイトルです</h3>
	</div>
	<div class="acms-admin-panel-body">
		パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。
	</div>
	<div class="acms-admin-panel-footer">
		パネルのフッター
	</div>
</div>

連なったパネル

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。 
<div class="acms-admin-panel">
	<div class="acms-admin-panel-header">
		<h3 class="acms-admin-panel-title">パネルのタイトルです</h3>
	</div>
	<div class="acms-admin-panel-body">
		...
	</div>
	<div class="acms-admin-panel-header">
		<h3 class="acms-admin-panel-title">パネルのタイトルです</h3>
	</div>
	<div class="acms-admin-panel-body">
		...
	</div>
	<div class="acms-admin-panel-header">
		<h3 class="acms-admin-panel-title">パネルのタイトルです</h3>
	</div>
	<div class="acms-admin-panel-body">
		...
	</div>
</div>

アイコンと一緒に

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。 
<div class="acms-admin-panel">
	<div class="acms-admin-panel-header">
		<i class="acms-admin-icon-arrow-small-right acms-admin-float-right"></i><h3 class="acms-admin-panel-title">パネルのタイトルです</h3>
	</div>
	<div class="acms-admin-panel-body">
	...
	</div>
</div>

カラーバリエーション

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。
パネルのフッター

パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。
パネルのフッター 
<div class="acms-admin-panel acms-admin-panel-info">
	<div class="acms-admin-panel-header">
		...
	</div>
	<div class="acms-admin-panel-body">
		...
	</div>
	<div class="acms-admin-panel-footer">
		...
	</div>
</div>

<div class="acms-admin-panel acms-admin-panel-danger">
	<div class="acms-admin-panel-header">
		...
	</div>
	<div class="acms-admin-panel-body">
		...
	</div>
	<div class="acms-admin-panel-footer">
		...
	</div>
</div>

ツールチップ

名前

<i data-acms-tooltip="ツールチップの内容を入力してください。" class="acms-icon-tooltip js-acms-tooltip"></i>

tooltipは管理画面のみで使用できるようになっております。カスタムフィールドなどでお使いください。

タブ

タブAの内容
タブBの内容 
<div class="acms-admin-tabs">
	<ul class="js-acms_tabs">
		<li><a href="#idA" class="js-acms_tab js-acms_tab-active">タブA</a></li>
		<li><a href="#idB" class="js-acms_tab">タブB</a></li>
	</ul>

	<div class="acms-admin-tabs-panel" id="idA">
		タブAの内容
	</div>
	<div class="acms-admin-tabs-panel" id="idB">
		タブBの内容
	</div>
</div>

プログレスバー

JavaScriptなどを使って .acms-admin-progress-bar の幅を書き換えてください。

通常
.acms-admin-progress-bar-info
.acms-admin-progress-bar-danger
.acms-admin-progress-striped
.acms-admin-active(animation) 
<div class="acms-admin-progress">
	<div class="acms-admin-progress-bar" style="width: 90%">
		<span>通常</span>
	</div>
</div>

<div class="acms-admin-progress">
	<div class="acms-admin-progress-bar acms-admin-progress-bar-info" style="width: 90%">
		<span>.acms-admin-progress-bar-info</span>
	</div>
</div>

<div class="acms-admin-progress">
	<div class="acms-admin-progress-bar acms-admin-progress-bar-danger" style="width: 90%">
		<span>.acms-admin-progress-bar-danger</span>
	</div>
</div>

<div class="acms-admin-progress acms-admin-progress-striped">
	<div class="acms-admin-progress-bar acms-admin-progress-bar-info" style="width: 90%">
		<span>.acms-admin-progress-striped</span>
	</div>
</div>

<div class="acms-admin-progress acms-admin-progress-striped acms-admin-active">
	<div class="acms-admin-progress-bar acms-admin-progress-bar-info" style="width: 90%">
		<span>.acms-admin-active(animation)</span>
	</div>
</div>

アニメーション

フェードアウト

.acms-admin-fade-out-strong
.acms-admin-fade-out
.acms-admin-fade-out-light 
<span class="acms-admin-icon-bg ... acms-admin-fade-out-strong">...</span>
<span class="acms-admin-icon-bg ... acms-admin-fade-out">...</span>
<span class="acms-admin-icon-bg ... acms-admin-fade-out-light">...</span>

フェードイン

.acms-admin-fade-in-strong
.acms-admin-fade-in
.acms-admin-fade-in-light 
<span class="acms-admin-icon-bg ... acms-admin-fade-in-strong">...</span>
<span class="acms-admin-icon-bg ... acms-admin-fade-in">...</span>
<span class="acms-admin-icon-bg ... acms-admin-fade-in-light">...</span>

ポップアップ

通知があります
 .acms-admin-popup-top
通知があります
 .acms-admin-popup-right
通知があります
 .acms-admin-popup-bottom
通知があります
 .acms-admin-popup-left 
<div class="acms-admin-popup-top">...</div>
<div class="acms-admin-popup-right">...</div>
<div class="acms-admin-popup-bottom">...</div>
<div class="acms-admin-popup-left">...</div>
通知があります .acms-admin-popup-top-child
通知があります .acms-admin-popup-right-child
通知があります .acms-admin-popup-bottom-child
通知があります .acms-admin-popup-left-child 
<div class="acms-admin-popup-top-child">
	<span class="acms-admin-icon-bg ... acms-admin-popup-child"></span>
</div>
<div class="acms-admin-popup-right-child">
	<span class="acms-admin-icon-bg ... acms-admin-popup-child"></span>
</div>
<div class="acms-admin-popup-bottom-child">
	<span class="acms-admin-icon-bg ... acms-admin-popup-child"></span>
</div>
<div class="acms-admin-popup-left-child">
	<span class="acms-admin-icon-bg ... acms-admin-popup-child"></span>
</div>

ズーム

拡大（デフォルト→拡大） 
<span class="acms-admin-icon-bg ... acms-admin-zoom-in">...</span>
縮小（デフォルト→縮小） 
<span class="acms-admin-icon-bg ... acms-admin-zoom-out">...</span>

ズームして表示

アニメーションを開始するためにactiveクラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。

拡大 
<div class="active">
	<span class="acms-admin-icon-bg ... acms-admin-zoom-in-show">...</span>
</div>
縮小 
<div class="active">
	<span class="acms-admin-icon-bg ... acms-admin-zoom-out-show">...</span>
</div>

スライド

アニメーションを開始するためにactiveクラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。

上からのスライド
上からスライドします
 
<div class="active">
	<div class="acms-admin-panel acms-admin-slide-top">...</div>
</div>
下からのスライド
下からスライドします
 
<div class="active">
	<div class="acms-admin-panel acms-admin-slide-bottom">...</div>
</div>
左からのスライド
左からスライドします
 
<div class="active">
	<div class="acms-admin-panel acms-admin-slide-left">...</div>
</div>
右からのスライド
右からスライドします
 
<div class="active">
	<div class="acms-admin-panel acms-admin-slide-right">...</div>
</div>

遅延

サンプルを表示するにはサンプルボタンをクリックしてください。

左から
右から 
<ul class="acms-admin-list-inline active">
	<li class="acms-admin-zoom-in-show acms-admin-delay">...</li>
</ul>

<ul class="acms-admin-list-inline active">
	<li class="acms-admin-zoom-in-show acms-admin-delay-reverse">...</li>
</ul>
ランダム 
<ul class="acms-admin-list-inline active">
	<li class="acms-admin-zoom-in-show acms-admin-delay-third">...</li>
	<li class="acms-admin-zoom-in-show acms-admin-delay-first">...</li>
	<li class="acms-admin-zoom-in-show acms-admin-delay-fourth">...</li>
	<li class="acms-admin-zoom-in-show acms-admin-delay-second">...</li>
</ul>

Javascriptが読み込めない環境のとき

上記のアニメーションをするスタイルを使ったとき、Javascriptが読み込めない環境では、必要な情報が表示されない可能性があります。この問題に対応するには、htmlタグに.no-jsを記述して、modernizr.jsを読み込んでください。Javascriptが読み込まれる環境ではmodernizr.jsが動作し、.no-jsを削除するので、Javascriptが使用できる環境とそうではない環境を分別することができます。

具体的には、以下のように記述してください。

<!DOCTYPE html>
<html class="no-js" lang="ja">
...
<script src="/js/ファイルのパス/modernizr.js"></script>

a-blog cmsでは、管理画面で使用しているオフキャンバスで使用しているため、デフォルトでmodernizr.jsを同梱しています。以下のように記述しても正常に動作します。

<!DOCTYPE html>
<html class="no-js" lang="ja">
...
<script src="/js/off-canvas/modernizr.js"></script>

.no-jsに対応しているアニメーションのクラス

以下のクラス名の親要素に.no-jsがあるとき、opacityを1にし、transformで位置や大きさを変えているものはデフォルトに戻します。

  • .acms-admin-slide-top
  • .acms-admin-slide-left
  • .acms-admin-slide-bottom
  • .acms-admin-slide-right
  • .acms-admin-zoom-in-show
  • .acms-admin-zoom-out-show

シンボルフォント

矢印
  • acms-admin-icon-arrow-up
  • acms-admin-icon-arrow-right
  • acms-admin-icon-arrow-down
  • acms-admin-icon-arrow-left
  • acms-admin-icon-arrow-small-up
  • acms-admin-icon-arrow-small-left
  • acms-admin-icon-arrow-small-right
  • acms-admin-icon-arrow-small-down
  • acms-admin-icon-up
  • acms-admin-icon-right
  • acms-admin-icon-down
  • acms-admin-icon-left
<span class="acms-admin-icon acms-admin-icon-arrow-up"></span>
ユニット
  • acms-admin-icon-unit-text
  • acms-admin-icon-unit-image
  • acms-admin-icon-unit-image_h2
  • acms-admin-icon-unit-youtube
  • acms-admin-icon-unit-map
  • acms-admin-icon-unit-file
  • acms-admin-icon-unit-eximage
  • acms-admin-icon-map
  • acms-admin-icon-map-pin
  • acms-admin-icon-youtube
  • acms-admin-icon-sort
  • acms-admin-icon-sort2
  • acms-admin-icon-delete
  • acms-admin-icon-open
  • acms-admin-icon-close
  • acms-admin-icon-control-move
  • acms-admin-icon-control-edit
  • acms-admin-icon-add-duplicate
  • acms-admin-icon-add-below
  • acms-admin-icon-control-remove
  • acms-admin-icon-source
  • acms-admin-icon-text-left
  • acms-admin-icon-text-center
  • acms-admin-icon-text-right
  • acms-admin-icon-merge
  • acms-admin-icon-split
  • acms-admin-icon-undo
<span class="acms-admin-icon acms-admin-icon-sort"></span>
コンフィグ
  • acms-admin-icon-config
  • acms-admin-icon-config_function
  • acms-admin-icon-config_output
  • acms-admin-icon-config_property
  • acms-admin-icon-config_mail
  • acms-admin-icon-config_access
  • acms-admin-icon-config_theme
  • acms-admin-icon-time
  • acms-admin-icon-config_edit
  • acms-admin-icon-config_unit
  • acms-admin-icon-config_reset
  • acms-admin-icon-config_default
  • acms-admin-icon-custom-field
<span class="acms-admin-icon acms-admin-icon-config"></span>
モジュール
  • acms-admin-icon-module
  • acms-admin-icon-config_entry_body
  • acms-admin-icon-config_entry_list
  • acms-admin-icon-config_entry_photo
  • acms-admin-icon-config_entry_headline
  • acms-admin-icon-config_category_entry-summary
  • acms-admin-icon-config_entry_archive-list
  • acms-admin-icon-config_entry_tag-relational
  • acms-admin-icon-config_entry_calendar
  • acms-admin-icon-config_entry_continue
  • acms-admin-icon-config_column_list
  • acms-admin-icon-config_category_list
  • acms-admin-icon-config_category_entry-list
  • acms-admin-icon-config_entry_summary
  • acms-admin-icon-config_user_profile
  • acms-admin-icon-config_user_search
  • acms-admin-icon-config_blog_child-list
  • acms-admin-icon-config_links
  • acms-admin-icon-config_banner
  • acms-admin-icon-config_navigation
  • acms-admin-icon-config_topicpath
  • acms-admin-icon-config_tag_cloud
  • acms-admin-icon-config_tag_filter
  • acms-admin-icon-config_calendar_month
  • acms-admin-icon-schedule
  • acms-admin-icon-config_plugin_schedule
  • acms-admin-icon-config_shop_cart_list
  • acms-admin-icon-comment
  • acms-admin-icon-config_feed_rss2
  • acms-admin-icon-config_feed_ex-list
  • acms-admin-icon-alias
  • acms-admin-icon-config_api_twitter_statuses_user-timeline
  • acms-admin-icon-config_api_twitter_statuses_home-timeline
  • acms-admin-icon-config_api_twitter_search
  • acms-admin-icon-config_api_twitter_list_statuses
  • acms-admin-icon-config_api_twitter_list_members
  • acms-admin-icon-config_api_instagram_users_media_recent
  • acms-admin-icon-config_api_instagram_users_media_liked
  • acms-admin-icon-config_api_bing_web-search
  • acms-admin-icon-config_api_bing_image-search
  • acms-admin-icon-config_alias_list
  • acms-admin-icon-config_sitemap
  • acms-admin-icon-config_field_value-list
  • acms-admin-icon-config_common
  • acms-admin-icon-config_cache
  • acms-admin-icon-config_export
  • acms-admin-icon-config_import
<span class="acms-admin-icon acms-admin-icon-module"></span>
機能
  • acms-admin-icon-entry
  • acms-admin-icon-trash
  • acms-admin-icon-category
  • acms-admin-icon-tag
  • acms-admin-icon-blog
  • acms-admin-icon-blog-children
  • acms-admin-icon-change-blog
  • acms-admin-icon-user
  • acms-admin-icon-form
  • acms-admin-icon-media
  • acms-admin-icon-rule
  • acms-admin-icon-role
  • acms-admin-icon-workflow
  • acms-admin-icon-user-group
  • acms-admin-icon-checklist
  • acms-admin-icon-publish
  • acms-admin-icon-backup
  • acms-admin-icon-import
  • acms-admin-icon-graph
  • acms-admin-icon-flag
  • acms-admin-icon-exit
  • acms-admin-icon-briefcase
  • acms-admin-icon-dashboard
  • acms-admin-icon-shortcut
  • acms-admin-icon-tooltip
  • acms-admin-icon-user-switch
<span class="acms-admin-icon acms-admin-icon-shortcut"></span>
その他
  • acms-admin-icon-tel
  • acms-admin-icon-mobile
  • acms-admin-icon-target-blank
  • acms-admin-icon-support
  • acms-admin-icon-server
  • acms-admin-icon-news
  • acms-admin-icon-gallery
  • acms-admin-icon-domain
  • acms-admin-icon-company
  • acms-admin-icon-manual
  • acms-admin-icon-pin
  • acms-admin-icon-money
  • acms-admin-icon-attention
  • acms-admin-icon-gift
  • acms-admin-icon-lock
  • acms-admin-icon-logout
  • acms-admin-icon-clip
  • acms-admin-icon-search
  • acms-admin-icon-home
  • acms-admin-icon-truck
  • acms-admin-icon-shop
  • acms-admin-icon-lunch
  • acms-admin-icon-cup
  • acms-admin-icon-scissors
  • acms-admin-icon-business
  • acms-admin-icon-book
  • acms-admin-icon-book2
  • acms-admin-icon-person
  • acms-admin-icon-bike
  • acms-admin-icon-bus
  • acms-admin-icon-train
  • acms-admin-icon-plane
  • acms-admin-icon-ship
  • acms-admin-icon-car
  • acms-admin-icon-woman
  • acms-admin-icon-man
  • acms-admin-icon-children
  • acms-admin-icon-senior
<span class="acms-admin-icon acms-admin-icon-tel"></span>
a-blog cms
  • acms-admin-icon-logo
  • acms-admin-icon-version
  • acms-admin-icon-user-add
  • acms-admin-icon-lisence
  • acms-admin-icon-lisence-code
  • acms-admin-icon-unlimited
  • acms-admin-icon-ios-app
  • acms-admin-icon-app
  • acms-admin-icon-install
<span class="acms-admin-icon acms-admin-icon-logo"></span>
SNS
  • acms-admin-icon-x
  • acms-admin-icon-x-square
  • acms-admin-icon-x-circle
  • acms-admin-icon-twitter
  • acms-admin-icon-twitter-square
  • acms-admin-icon-twitter-circle
  • acms-admin-icon-facebook
  • acms-admin-icon-facebook-square
  • acms-admin-icon-facebook-circle
<span class="acms-admin-icon acms-admin-icon-x"></span>
ご利用の際には、各ガイドラインをご確認ください。