アメブロの外観テンプレートである新デザインのCSS（カスタム可能）は、旧テンプレから少し簡素化されたような感じです。
特徴としてはクラス名にハイフンがよく入るようになったことでしょうか。
気を付けなければならない事があります。まず、正しいCSSが利いているか確認しなけらばなりません。
それというのも、テンプレートを変えたのに、前のCSSが残っていたりする。古いテンプレートのCSSとは殆どクラス名id名が異なる。新しいCSSはどこにあるんだ！ひょっとすると、いつものように反映が遅いだけかも知れないが、変な現象が起こるのがアメブロ。
新デザインのCSSの目次です。
【CSS編集 目次】
(1)基本のスタイル
1-1テキスト全体
1-2基本背景
1-3基本境界線
(2)ヘッダーエリアのスタイル
2-1背景
2-2タイトル説明文
(3)メインエリアのスタイル (記事のエリア）
3-1メイン背景、内側外側
3-2メインタイトル
3-3ブログナビ上部 (トップ・画像一覧などのリンク部分） 下部（記事下の同様の部分）
(4)サイドエリアのスタイル
4-1サイドテキスト全体
4-2境界線
4-3モジュール カレンダ アーカイブナビ プロフィール
(5)ボタン設定
5-1ボタン全体
5-2次へ前へ
5-3目次ナビ
5-4サイド
5-5記事一覧
(6)その他、拡張
6-1記事一覧
6-2メッセージ
設置
全体の背景 div.skin-page もし利かなければ、ヘッダーと記事部分に分けて設定する。
カスタマイズ用CSSにある「/* コンテンツ背景、ヘッダー以下の背景色 */.skin-blogBody, .skin-blogBodyInner」はヘッダー類を除く下部コンテンツの背景。
ヘッダー画像の背景/* ヘッダー背景 */.skin-bgHeaderで設定（幅全体の設定ができるが、下の「記事一覧」などがあるヘッダーナビにはかからない。ヘッダーナビと両方に背景をかけるためには全体の背景を使用するほかはなさそうだ。）
または、 .skin-headerImage（元CSSに該当項目なし） に設定。ここだと上のdivの設定で1120px中央ぞろえになる。要高さ指定
サイドバーのウィジェットいやモジュール
.skin-widgetのなかに.skin-widgetInnerボックスがあり、タイトル部分が.skin-widgetHeadでここはh3タグで指定されている。中身は.skin-widgetBodyであり、モジュールの種類によって異なる中身となっている。
多くの広告が幅300pxなので、それに合わせてデザインするのもいいでしょう。
さてフリースペースもサイドバーと同じデザインになってしまうので、それが困る場合は
#freespace .skin-widgetBody{ に設定する。
記事部分をメインエリアと呼ぶようだが、いくつか基本的なカスタマイズ項目のみ用意されている。