Ameblo新テンプレ　カスタマイズ用CSS概要

管理画面「デザイン変更」の中の「CSS編集用デザイン」を選択した時に提供されるカスタマイズ用CSSの概要。

以下のような構成↓

基本のスタイル
基本文字色、リンク文字色、基本背景色、ボーダー色
ヘッダーエリアのスタイル
ヘッダーエリアのスタイル。背景色、文字色サイズ、余白など。
メインエリアのスタイル
1. メインエリア…記事エリアが含まれるコラム
  背景色、余白、記事タイトルのスタイル設定など。
2. ブログナビ
  ヘッダー直下のナビと、記事エリア下部のナビのスタイル設定。
サイドエリアのスタイル
2カラム、3カラム共通。記事エリア以外の要素設定。
ボタン設定
ボタン全体の設定、ページネションのボタン（前へ、次へ）、目次ナビ、サイドバーの各種ボタン
その他、拡張
「記事一覧」ページの設定、「メッセージボード」のスタイル設定

大幅にレイアウトを変更する時は要素の追加が必要。

また、

…と、設定内容の性質によって適用属性を切り分けている様子。
指定する属性を間違うとCSSが効かない事もありそうなので、一応留意。

例：サイドバーのインナーwrapperの設定

HTML

<body class="skin-columnC" amb-layout="columnC">
・・・・・（記述）
<div amb-layout="subAInner" id="subAInner">・・・・（記述）</div>
・・・（記述）
</body>

CSS

[amb-layout="columnC"] [amb-layout="subAInner"] {
margin-left: auto;
margin-right: auto;
width: 300px;
}
#subAInner {
background: #fff;
}