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はカスタマイズしているテーマ内で使用してください。
ユーティリティ
ディスプレイ
ディスプレイクラスを使用して、コンポーネントのdisplayプロパティをレスポンシブに切り替えられます。`display`のすべての可能な値のサブセットのみを意図的にサポートします。
表記方法
クラス名の形式は以下の通りです。
- `xs`の場合は
.acms-admin-d-{value}というクラス名が付けられます。 - `sm`、`md`、`lg`、`xl`に対して
.acms-admin-d-{breakpoint}-{value}があります。
valueの種類は以下の通りです。
noneinlineinline-blockblockgridinline-gridtabletable-celltable-rowflexinline-flex
例
acms-admin-d-inline
acms-admin-d-inline
<div class="acms-admin-d-inline acms-admin-p-2 acms-admin-text-primary">acms-admin-d-inline</div> <div class="acms-admin-d-inline acms-admin-p-2 acms-admin-text-info">acms-admin-d-inline</div>acms-admin-d-block acms-admin-d-block
<span class="acms-admin-d-block acms-admin-p-2 acms-admin-text-primary">acms-admin-d-block</span> <span class="acms-admin-d-block acms-admin-p-2 acms-admin-text-info">acms-admin-d-block</span>
要素の非表示
モバイルフレンドリーな開発を迅速に行うには、レスポンシブ表示クラスを使用して、デバイスごとに要素を表示・非表示にします。
hide on lg and wider screens
hide on screens smaller than lg
<div class="acms-admin-d-lg-none">hide on lg and wider screens</div> <div class="acms-admin-d-none acms-admin-d-lg-block">hide on screens smaller than lg</div>
| Screen size | Class |
|---|---|
| 全て非表示 | .acms-admin-d-none |
| xsのみ非表示 | .acms-admin-d-none .acms-admin-d-sm-block |
| smのみ非表示 | .acms-admin-d-sm-none .acms-admin-d-md-block |
| mdのみ非表示 | .acms-admin-d-md-none .acms-admin-d-lg-block |
| lgのみ非表示 | .acms-admin-d-lg-none .acms-admin-d-xl-block |
| xlのみ非表示 | .acms-admin-d-xl-none |
| 全て表示 | .acms-admin-d-block |
| xsのみ表示 | .acms-admin-d-block .acms-admin-d-sm-none |
| smのみ表示 | .acms-admin-d-none .acms-admin-d-sm-block .acms-admin-d-md-none |
| mdのみ表示 | .acms-admin-d-none .acms-admin-d-md-block .acms-admin-d-lg-none |
| lgのみ表示 | .acms-admin-d-none .acms-admin-d-lg-block .acms-admin-d-xl-none |
| xlのみ表示 | .acms-admin-d-none .acms-admin-d-xl-block |
印刷のディスプレイ
印刷の場合は、印刷クラスを使って要素の`display`の値を変更します。
Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
<div class="acms-admin-d-print-none">Screen Only (Hide on print only)</div> <div class="acms-admin-d-none acms-admin-d-print-block">Print Only (Hide on screen only)</div> <div class="acms-admin-d-none acms-admin-d-lg-block acms-admin-d-print-block">Hide up to large on screen, but always show on print</div>
Flex
Flexユーティリティを使用して、flexboxの動作を制御できます。
Flex プロパティ
acms-admin-d-flex
acms-admin-d-inline-flex
<div class="acms-admin-d-flex acms-admin-p-2 acms-admin-text-primary">acms-admin-d-flex</div> <div class="acms-admin-d-inline-flex acms-admin-p-2 acms-admin-text-primary">acms-admin-d-inline-flex</div>
Flex 方向
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="acms-admin-d-flex acms-admin-flex-row"> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 1</div> <div class="acms-admin-p-2 acms-admin-text-bg-dark">Flex item 2</div> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 3</div> </div> <div class="acms-admin-d-flex acms-admin-flex-row-reverse"> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 1</div> <div class="acms-admin-p-2 acms-admin-text-bg-dark">Flex item 2</div> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 3</div> </div> <div class="acms-admin-d-flex acms-admin-flex-column"> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 1</div> <div class="acms-admin-p-2 acms-admin-text-bg-dark">Flex item 2</div> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 3</div> </div> <div class="acms-admin-d-flex acms-admin-flex-column-reverse"> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 1</div> <div class="acms-admin-p-2 acms-admin-text-bg-dark">Flex item 2</div> <div class="acms-admin-p-2 acms-admin-text-bg-primary">Flex item 3</div> </div>
Justify content
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="acms-admin-d-flex acms-admin-justify-content-start">...</div> <div class="acms-admin-d-flex acms-admin-justify-content-end">...</div> <div class="acms-admin-d-flex acms-admin-justify-content-center">...</div> <div class="acms-admin-d-flex acms-admin-justify-content-between">...</div> <div class="acms-admin-d-flex acms-admin-justify-content-around">...</div> <div class="acms-admin-d-flex acms-admin-justify-content-evenly">...</div>
Align items
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="acms-admin-d-flex acms-admin-align-items-start">...</div> <div class="acms-admin-d-flex acms-admin-align-items-end">...</div> <div class="acms-admin-d-flex acms-admin-align-items-center">...</div> <div class="acms-admin-d-flex acms-admin-align-items-baseline">...</div> <div class="acms-admin-d-flex acms-admin-align-items-stretch">...</div>
Sizing
Sizingユーティリティを使用して、要素の幅や高さを簡単に指定できます。レスポンシブなクラスやviewport単位のクラスも用意されています。
| クラス | CSSプロパティ | 値の例 |
|---|---|---|
| .acms-admin-w-25 .acms-admin-w-50 .acms-admin-w-75 .acms-admin-w-100 .acms-admin-w-auto |
width | 25%, 50%, 75%, 100%, auto |
| .acms-admin-mw-100 | max-width | 100% |
| .acms-admin-vw-100 | width | 100vw |
| .acms-admin-min-vw-100 | min-width | 100vw |
| .acms-admin-h-25 .acms-admin-h-50 .acms-admin-h-75 .acms-admin-h-100 .acms-admin-h-auto |
height | 25%, 50%, 75%, 100%, auto |
| .acms-admin-mh-100 | max-height | 100% |
| .acms-admin-vh-100 | height | 100vh |
| .acms-admin-min-vh-100 | min-height | 100vh |
例
<div class="acms-admin-w-25">acms-admin-w-25</div> <div class="acms-admin-w-50">acms-admin-w-50</div> <div class="acms-admin-w-75">acms-admin-w-75</div> <div class="acms-admin-w-100">acms-admin-w-100</div>
<div class="acms-admin-h-25 acms-admin-w-100">acms-admin-h-25</div> <div class="acms-admin-h-50 acms-admin-w-100">acms-admin-h-50</div> <div class="acms-admin-h-75 acms-admin-w-100">acms-admin-h-75</div> <div class="acms-admin-h-100 acms-admin-w-100">acms-admin-h-100</div>
Spacing
Spacingユーティリティを使用して、要素のマージンとパディングを制御できます。
Margin
acms-admin-m-0
acms-admin-m-1
acms-admin-m-2
acms-admin-m-3
acms-admin-m-4
acms-admin-m-5
<div class="acms-admin-m-0">acms-admin-m-0</div> <div class="acms-admin-m-1">acms-admin-m-1</div> <div class="acms-admin-m-2">acms-admin-m-2</div> <div class="acms-admin-m-3">acms-admin-m-3</div> <div class="acms-admin-m-4">acms-admin-m-4</div> <div class="acms-admin-m-5">acms-admin-m-5</div>
方向別のMargin
特定の方向にのみmarginを適用できます：
acms-admin-mt-3 (margin-top)
acms-admin-mb-3 (margin-bottom)
acms-admin-ms-3 (margin-left)
acms-admin-me-3 (margin-right)
acms-admin-mx-3 (margin-x)
acms-admin-my-3 (margin-y)
<div class="acms-admin-mt-3">acms-admin-mt-3 (margin-top)</div> <div class="acms-admin-mb-3">acms-admin-mb-3 (margin-bottom)</div> <div class="acms-admin-ms-3">acms-admin-ms-3 (margin-left)</div> <div class="acms-admin-me-3">acms-admin-me-3 (margin-right)</div> <div class="acms-admin-mx-3">acms-admin-mx-3 (margin-left & margin-right)</div> <div class="acms-admin-my-3">acms-admin-my-3 (margin-top & margin-bottom)</div>
| クラス | 説明 |
|---|---|
| .acms-admin-mt-* | margin-top |
| .acms-admin-mb-* | margin-bottom |
| .acms-admin-ms-* | margin-left |
| .acms-admin-me-* | margin-right |
| .acms-admin-mx-* | margin-x (margin-left & margin-right) |
| .acms-admin-my-* | margin-y (margin-top & margin-bottom) |
Padding
acms-admin-p-0
acms-admin-p-1
acms-admin-p-2
acms-admin-p-3
acms-admin-p-4
acms-admin-p-5
<div class="acms-admin-p-0">acms-admin-p-0</div> <div class="acms-admin-p-1">acms-admin-p-1</div> <div class="acms-admin-p-2">acms-admin-p-2</div> <div class="acms-admin-p-3">acms-admin-p-3</div> <div class="acms-admin-p-4">acms-admin-p-4</div> <div class="acms-admin-p-5">acms-admin-p-5</div>
方向別のPadding
特定の方向にのみpaddingを適用できます：
acms-admin-pt-3 (padding-top)
acms-admin-pb-3 (padding-bottom)
acms-admin-ps-3 (padding-left)
acms-admin-pe-3 (padding-right)
acms-admin-px-3 (padding-x)
acms-admin-py-3 (padding-y)
<div class="acms-admin-pt-3">acms-admin-pt-3 (padding-top)</div> <div class="acms-admin-pb-3">acms-admin-pb-3 (padding-bottom)</div> <div class="acms-admin-ps-3">acms-admin-ps-3 (padding-left)</div> <div class="acms-admin-pe-3">acms-admin-pe-3 (padding-right)</div> <div class="acms-admin-px-3">acms-admin-px-3 (padding-left & padding-right)</div> <div class="acms-admin-py-3">acms-admin-py-3 (padding-top & padding-bottom)</div>
| クラス | 説明 |
|---|---|
| .acms-admin-pt-* | padding-top |
| .acms-admin-pb-* | padding-bottom |
| .acms-admin-ps-* | padding-left |
| .acms-admin-pe-* | padding-right |
| .acms-admin-px-* | padding-x (padding-left & padding-right) |
| .acms-admin-py-* | padding-y (padding-top & padding-bottom) |
Gap
Gapユーティリティを使用して、FlexboxやGridレイアウトの要素間の間隔を制御できます。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="acms-admin-d-flex acms-admin-gap-1"> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-info">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> </div> <div class="acms-admin-d-flex acms-admin-gap-2"> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-info">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> </div> <div class="acms-admin-d-flex acms-admin-gap-3"> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-info">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> </div>
Row Gap & Column Gap
行間と列間の間隔を個別に制御できます。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="acms-admin-d-flex acms-admin-flex-column acms-admin-row-gap-2"> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-info">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> </div> <div class="acms-admin-d-flex acms-admin-column-gap-3"> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-info">Flex item</div> <div class="acms-admin-p-2 acms-admin-text-primary">Flex item</div> </div>
Text
Textユーティリティを使用して、テキストの配置、色、サイズなどを制御できます。
Text alignment
Left aligned text.
Center aligned text.
Right aligned text.
<p class="acms-admin-text-left">Left aligned text.</p> <p class="acms-admin-text-center">Center aligned text.</p> <p class="acms-admin-text-right">Right aligned text.</p>
Vertical alignment
baseline top middle bottom text-bottom text-top<span class="acms-admin-align-baseline">baseline</span> <span class="acms-admin-align-top">top</span> <span class="acms-admin-align-middle">middle</span> <span class="acms-admin-align-bottom">bottom</span> <span class="acms-admin-align-text-bottom">text-bottom</span> <span class="acms-admin-align-text-top">text-top</span>
Text colors
Primary text color.
Info text color.
Success text color.
Warning text color.
Danger text color.
<p class="acms-admin-text-primary">Primary text color.</p> <p class="acms-admin-text-info">Info text color.</p> <p class="acms-admin-text-success">Success text color.</p> <p class="acms-admin-text-warning">Warning text color.</p> <p class="acms-admin-text-danger">Danger text color.</p>
Position
Positionユーティリティを使用して、要素の位置を制御できます。
acms-admin-position-relative
acms-admin-position-absolute
acms-admin-position-fixed
acms-admin-position-sticky
<div class="acms-admin-position-relative">acms-admin-position-relative</div> <div class="acms-admin-position-absolute">acms-admin-position-absolute</div> <div class="acms-admin-position-fixed">acms-admin-position-fixed</div> <div class="acms-admin-position-sticky">acms-admin-position-sticky</div>
Utility API
Utility APIは、Sassベースのユーティリティクラスを生成します
ユーティリティの定義
ユーティリティクラスは、値を変更・拡張できるユーティリティAPIで生成されます。Sassマップに慣れていない場合は、公式ドキュメントを参照してください。
各ユーティリティは以下のオプションを受け入れます：
| オプション | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| property | Required | – | CSSプロパティ名（文字列または配列） |
| values | Required | – | 値のリストまたはマップ |
| class | Optional | null | 生成されるクラス名のプレフィックス |
| responsive | Optional | false | レスポンシブクラスを生成するかどうか |
| Optional | false | 印刷用クラスを生成するかどうか | |
| css-var | Optional | false | CSS変数を生成するかどうか |
| local-vars | Optional | null | ローカルCSS変数のマップ |
| state | Optional | null | 疑似クラス（hover, focus等）のリスト |
その他のユーティリティ
このドキュメントでは主要なユーティリティのみを紹介しています。すべての利用可能なユーティリティについては、themes/system/src/scss/global/_utilities.scssファイルを参照してください。
このファイルには以下のようなユーティリティが定義されています：
- Float utilities
- Object fit utilities
- Opacity utilities
- Overflow utilities
- Shadow utilities
- Sizing utilities (width, height, viewport)
- Font utilities (family, size, weight, style)
- Line height utilities
- Text utilities (decoration, transform, white-space)
- User select utilities
- Pointer events utilities
- Visibility utilities
- Z-index utilities
詳細な使用方法やカスタマイズ方法については、各ユーティリティの定義を確認してください。
グリッドシステム
デフォルト
.acms-admin-cssgridで囲うとCSS Gridレイアウトが適用されます。ブロックをレイアウトするために使います。合計12カラムで計算します。
.acms-admin-g-col-（レスポンシブ無し）
acms-admin-g-col-1
acms-admin-g-col-11
acms-admin-g-col-2
acms-admin-g-col-10
acms-admin-g-col-3
acms-admin-g-col-9
acms-admin-g-col-4
acms-admin-g-col-8
acms-admin-g-col-5
acms-admin-g-col-7
acms-admin-g-col-6
acms-admin-g-col-6
<div class="acms-admin-cssgrid"> <div class="acms-admin-g-col-5"> ... </div> <div class="acms-admin-g-col-7"> ... </div> </div>
.acms-admin-g-col-*-（レスポンシブ有り）
acms-admin-g-col-1 acms-admin-g-col-md-1
acms-admin-g-col-11 acms-admin-g-col-md-11
acms-admin-g-col-2 acms-admin-g-col-md-2
acms-admin-g-col-10 acms-admin-g-col-md-10
acms-admin-g-col-3 acms-admin-g-col-md-3
acms-admin-g-col-9 acms-admin-g-col-md-9
acms-admin-g-col-4 acms-admin-g-col-md-4
acms-admin-g-col-8 acms-admin-g-col-md-8
acms-admin-g-col-5 acms-admin-g-col-md-5
acms-admin-g-col-7 acms-admin-g-col-md-7
acms-admin-g-col-6 acms-admin-g-col-md-6
acms-admin-g-col-6 acms-admin-g-col-md-6
<div class="acms-admin-cssgrid"> <div class="acms-admin-g-col-5 acms-admin-g-col-md-5"> ... </div> <div class="acms-admin-g-col-7 acms-admin-g-col-md-7"> ... </div> </div>
各画面幅対応表
| クラス名 | デフォルトのブレイクポイント |
|---|---|
| acms-admin-g-col- | 全て |
| acms-admin-g-col-sm- | 480px以上〜 |
| acms-admin-g-col-md- | 768px以上〜 |
| acms-admin-g-col-lg- | 1024px以上〜 |
| acms-admin-g-col-xl- | 1440px以上〜 |
CSS Gridの入れ子
グリッドシステムでは.acms-admin-cssgridを簡単に入れ子にすることができます。ただし、行、列、ギャップの変更を継承します。下の例を見てください：
- デフォルトの列数をローカルCSS変数で上書きします：
--acms-admin-columns： 3。 - 最初の自動カラムでは、カラム数は継承され、各カラムは利用可能な幅の3分の1になります。
- 2つ目のオートカラムでは、ネストされた
.acms-admin-cssgridのカラム数を12（デフォルト）にリセットします。 - 3つ目の自動カラムにはネストされたコンテンツがありません。
First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column
<div class="acms-admin-cssgrid" style="--acms-admin-columns: 3;">
<div>
First auto-column
<div class="acms-admin-cssgrid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="acms-admin-cssgrid" style="--acms-admin-columns: 12;">
<div class="acms-admin-g-col-6">6 of 12</div>
<div class="acms-admin-g-col-4">4 of 12</div>
<div class="acms-admin-g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
グリッド開始位置の指定 .acms-admin-g-start-
.acms-admin-g-start-5にするとグリッドアイテムが5列目から開始されます。
.acms-admin-g-col-3 acms-admin-g-start-3
.acms-admin-g-col-4 acms-admin-g-start-6
<div class="acms-admin-cssgrid"> <div class="acms-admin-g-col-3 acms-admin-g-start-3"> ... </div> <div class="acms-admin-g-col-4 acms-admin-g-start-6"> ... </div> </div>
カラム数の変更 .acms-admin-g-cols-
グリッド全体のカラム数を変更するには.acms-admin-g-cols-クラスを使用します。レスポンシブ対応も可能です。
.acms-admin-g-col-2 .acms-admin-g-col-md-6
.acms-admin-g-col-4 .acms-admin-g-col-md-6
<div class="acms-admin-cssgrid acms-admin-g-cols-6 acms-admin-g-cols-md-12"> <div class="acms-admin-g-col-2 acms-admin-g-col-md-6"> ... </div> <div class="acms-admin-g-col-4 acms-admin-g-col-md-6"> ... </div> </div>
CSS変数によるカスタマイズ
ローカルCSS変数を使用して列数、行数、間隔幅をカスタマイズします。
| 変数名 | フォールバック値 | 説明 |
|---|---|---|
| --acms-admin-rows | 1 | グリッドテンプレートの行数 |
| --acms-admin-columns | 12 | グリッドテンプレートの列数 |
| --acms-admin-gap | 1.5rem | 列間の隙間の大きさ（垂直方向と水平方向） |
4カラムグリッド、2rem間隔
4カラムグリッド、2rem間隔
<div class="acms-admin-cssgrid" style="--acms-admin-columns: 4; --acms-admin-gap: 2rem;"> <div class="acms-admin-g-col-2"> ... </div> <div class="acms-admin-g-col-2"> ... </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
- りんご
- みかん
- ぶどう
- 山梨県
- 富士岡フォーム
- ワイン
- もも
<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>
テーブル
- 通常のテーブル
- ボーダーなしテーブル
- ボーダーありテーブル
- thの色ありテーブル
- ストライプのテーブル
- hoverテーブル
- レスポンシブのテーブル
エントリーでは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>
組み合わせ
|
|
ステータス / タイトル / コード / 日時 / ブログ / カテゴリー | ||||
|---|---|---|---|---|---|
|
|
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>
ラベルもブロックにする
.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-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>
リストグループ
リストグループ
<ul class="acms-admin-list-group"> <li><a href="#" class="acms-admin-list-group-item">リスト</a></li> </ul>
リンクがインラインのとき
リストグループ
- お知らせ新着エントリーNew!
- お知らせお知らせのエントリー
- お知らせお知らせのエントリー
<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="/themes/system/admin/styleguide/images/sampleImage.jpg" alt="" class="acms-admin-img-responsive">
角丸
<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-admin-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>
アイコンつき
<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>
ドロップダウンメニュー
<li class="js-acms-dropdown-toggle"><a class="js-acms-dropdown-btn" href="#"><i class="acms-admin-icon acms-admin-icon-user"></i>ユーザー名</a> <ul class="js-acms-dropdown-menu" style="display: block;"> <li><a href="#">プロフィール変更</a></li> </ul> </li>
ツールチップ
名前
<i data-acms-tooltip="ツールチップの内容を入力してください。" class="acms-icon-tooltip js-acms-tooltip"></i>
tooltipは管理画面のみで使用できるようになっております。カスタムフィールドなどでお使いください。
タブ
<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 の幅を書き換えてください。
<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>
ご利用の際には、各ガイドラインをご確認ください。