アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。

難易度表示付き記事一覧はこちらです

もし、ありがたいことに早速このページを見つけてくださった方、HTML初心者向けの記事は、しばらくおまちください。現在、アメブロのカスタマイズのために、ページとスタイルシートの基本的な構造を分析していますので、それが完了次第、徐々にアップしてゆきます。私のブログもまだ真っ裸ですので、早くお化粧してあげたいです

基本構造を解析してみました

テンプレートをCSS編集用デザイン、レイアウトを3カラム・右メニューに設定して書き出されるHTMLコード、CSSファイルから基本的な構造を分析してみました。

右図がその概念図です。クリックすると拡大表示できます。

この構造を理解しておけば、カスタマイズを考えやすくなります。図で記されている各ブロックについて、もう少し細かく見てゆきたいと思います。

ブロックごとの設定を少し詳しく

div.skinBody: 全体を覆うブロックです。blog111206.css ではその設定はされておらず、編集対象のスタイルシートに項目が立てられています。図には書いておりませんが、このなかに、div.skinBody2、div.skinBody3 が入れ子になっていて3重入れ子構造になっています。シャドウをつけたりするときには便利だろうと思います。
ul#keyJumpNav: blog111206.css では、display: hidden;と設定されていて通常は表示されません。音声ブラウザなどで見ている人が、コンテンツにいち早く辿りつけるように配慮された部分です。
ul#amebaBar: Ameba の小さなロゴのある最上部の行のデザインを規定している部分です。
div.skinFrame: ここが、ヘッダ、コンテンツやナビゲーションなどを含めたブログの本体になります。内側にdiv.skinFrame2をもつ2重構造になっています。概念図では省略していますが、正確にはdiv.headerBnrArea（W728×h90バナー）の入るブロックがdiv.skinFrame2の上にあります。このなかの各パーツをスタイルシートで設定してデザインをつくりあげてゆくことになります。
ul.footerNav: 記事数が多くなると、「次へ」「前へ」「▲」というナビゲーションが現れます。背景画像を設定しても、ここより下には反映されません。
div.ad_frame: 最下部に広告枠が2つ並んでいます。google AdWords 広告が2本並んで見えます。

この他に javascript で書き出されるブロックがいくつかありますが、省略しています。

アメブロのHTMLの基本構造