まずは、どのようなClassになっているかを図にしました。
本日はこの図を使って、以下の３項目について解説いたします。
・バナー広告の表示部分と他の部分の色を分ける
・ヘッダー画像を設定する
・ボタン表示部分のスペースを空ける
・バナー広告の表示部分と他の部分の背景色を分ける
アメブロの新しいデザインでは、ページ上部にバナー広告が表示されます。
このバナー広告を見えないようにする方法もないわけではありませんが、私は紹介しません。バナー広告が表示されても、バナー広告表示部分と他の部分の背景色を分ければ、それほど気になりません。
skinFrame（全体） と skinFrame2（バナー広告部分以外） にそれぞれ別の background（背景色）を設定すると、バナー広告表示部分の背景色だけ変えることができます。同様に、background-image（背景画像）を設定することもできます。
・ヘッダー画像を設定する
ヘッダー画像は skinHeaderArea2 に設定するのがお勧めです。
その外側である skinHeaderAreaは幅980pxに固定されていて、幅の調節ができません。
また、その内側の skinBlogHeadingGroupArea は、ブログタイトルと説明文の表示位置指定に使うものです。
ヘッダー画像を設定するとき、skinHeaderFrame（ヘッダー全体）の padding（余白）で上部に10pxほど余白を作ることをお勧めします。
余白が無いと、バナー広告表示部分とヘッダー画像がくっついてしまい、境界が分かりづらくなるからです。
・ボタン表示部分のスペースを空ける
skinHeaderFrame（ヘッダー全体）の padding（余白）でヘッダー下部に余白を作ります。
この余白の高さは設置するボタンの高さに合わせて調整します。後は、従来のフリースペースを使ったボタンの設置方法がそのまま使えます。
但し、ボタンの幅の調整は必要です。
バナー広告が表示される部分はページ上部から135pxまで、つまり、136pxからが skinFrame2 です。
この数字は変わりません。
バナー表示部分の高さにヘッダー画像上部に作った余白・ヘッダー画像の高さを足していけば、ボタンを表示する座標が計算できます。
図中に誤字がありました。
誤） skinBlogHeaingGroupArea → 正） skinBlogHeadingGroupArea