アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
さて、アメブロに背景設定をするとき、どう考えるのが効率的でしょうか？ アメブロHTMLの基本構造 解析をもとに、いちばん効率的な方法は何かを探ってみました。
ユーザーCSSの推奨
結論の前に、まずアメブロさんの推奨を見てみましょう。編集可能CSSには、以下のように記述されています。
/* (3-1) ボディ（全体）
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
全体とブログヘッダーについてコメントされていますね。背景については、メッセージボード、記事、サイドメニュー全体・タイトル・本文にそれぞれコメントがありますが、今回のテーマとは大きな関係がありません。
ちなみに、ブログ全体、つまりdiv.skinBodyにbackground:#000;とブラック背景を設定したときには、右の画像のようになります。コンテンツ部分でも黒く表示される部分が出てきますので、その部分だけ背景色を適用しないようにするためには、div.skinFrameとdiv.ad_frameにコンテンツ部分に設定したい背景色設定をすればよいということが分かります。
さて、ブログに背景設定を考えるとき、次のようなケースが考えられるのではないかと思います。
- ブログ全体に背景を置く
- ヘッダーバナーエリアを覗いて背景を置くことで、ブログ本体と再上部バナーを分離して見せる
- コンテンツエリアにシャドウを効かせた背景を設定する
HTMLの構造的には背景設定可能なのは、親から見ていくとhtml、bodyと続いて、その次にdiv.skinbody、ul.footerNav、div.adFrameが続いていることが分かります。
3重構造のボックスを活かして余裕残し
こう見てくるとやはり、3重構造になっているdiv.skinbody、div.skinbody2、div.skinbody3を使って背景設定するのがいちばん効率的だというのが結論のように思えます。いずれのボックスにもデフォルトでは何も設定されていませんので、自由自在に使うことができます。
アメブロのCSS編集デザインにおいて幅（980px）が設定されているいちばん外のブロックは、各レイアウトともdiv.skinHeaderAreaとdiv.skinContentsAreaです。前者は外にdiv.skinHeaderFrameを、内にdiv.skinHeaderArea2をもち、後者は外にdiv.skinContentsFrameを、内にdiv.skinContentsArea2をもつという念のいれようです。そして両者は、div.skinFrameとdiv.skinFrame2の2重ボックスに囲まれているという、もう訳が分からなくなるくらいの念の入れようなのです。
単純に考えれば、背景設定には外側の幅の指定されていない3重構造ボックスを使えばよく、さらに複雑な設定をしたければ、まだ猶予があるというふうに認識しておけばよいのだと考えておけばよさそうです。
先に述べた「コンテンツエリアにシャドウを聞かせる」という設定なら、シャドウ画像を縦方向にリピートしてdiv.skinFrameに適用させ、フッター部分はdiv.skinFrame2で上書きすれば何の問題もなく、ヘッダーバナーエリアを除外させたければ、高さが決まっていますので、もう1重余裕があるところを使ってもよいし、div.skinHearerFrameに対して設定してもよいということが分かります。ともあれ、冗長に設定されているボックス構造を、いちばん外から利用してゆけばよいんだということです。