アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
前回の記事では全体の構成について見てきました。今回は、コンテンツ部分を構成するメインブロックであるdiv.layoutContentsAとdiv.layoutContentsBの構成を研究してゆきます。
div.layoutContentsAの構成
div.layoutContentsAの構成の概念図は右のとおりです。
本文であるdiv.skinMainAreaと幅300ピクセルのサイドメニューの2つの大きなブロックが直下に置かれています。
サイドメニューはHTML5からの新しい要素であるasideで囲まれています。asideは、デフォルトではブロックレベル要素として扱わないブラウザがあるため、disply:block;の設定がされていますが、それ以外にスタイル設定はされていません。
コンテンツブロック、ワイドサイドメニューブロックの概要
- div.skinMainArea
- 記事の格納されるコンテンツカラムです。内側にdiv.skinMainArea2をもつ2重構造になっています。詳細は後述。
- div.skinSubA, div.skinSubArea
- asideで囲まれたワイドサイドバーのカラムです。前者（skinSubA）はワイドサブメニューの設定用のクラスで、後者（div.skinSubArea）は、幅の狭いサイドメニューとの共通設定用のクラスです。内側にdiv.skinSubA2をもつ2重構造になっています。
div.skinMainArea下のブロックの概要
- div.skinMessageBoard
- トップページのみで表示されるメッセージボードが入るブロック。articleタグで囲まれています。内側に、div.skinMessageBoard2、div.skinMessageBoard3がある3重構造。デフォルトでは、いちばん外側にのみスタイル指定されています。
- div.pagingArea, div.nextPrevPaging
- 「<< 前ページ」「記事一覧」「次ページ >>」のナビゲーションを表示するエリア。デフォルトでは、div.nextPrevPagingのほうにはスタイル設定されていません。div#resPointAreaWrapperの後にも配置されています。
- div.skinArticle, div.themeNumber10047057662
- 個々にarticleで囲まれたブログエントリーが繰り返されます。後者の長ったらしいクラスのほうにはスタイル指定が見当たりません。記事の見せ方をカスタマイズするには、このブロック内の各設定が重要になってきますので、別項目を立てて詳細を見てゆきたいと思っています。
- div#resPointAreaWrapper
- Amebaおすすめキーワードが格納されているブロック。内側にdiv#resPointAreaのある2重構造になっています。
- div#footer_ad
- Amebaのテキスト広告（Amebaブロードテキスト）が格納される枠。
div.skinSubA, div.skinSubArea下のブロックの概要
- div.skinMenu, div.（各メニュー固有のクラス）
- 「サイドメニューの配置」で、ワイドメニューのいちばん上に配置したメニューが表示されます。2番目には次の広告ブロックが配置され、それ以降、設定した分だけ繰り返し配置されます。div.skinMenuは共通の設定で、それに加えてメニュー個別のクラスが用意されていますので、たとえばメニュー名をそれぞれ画像に差し替える等の個別の設定が可能になっています。
- div.subABannerArea, div.subModule
- W300×H240のバナーが表示される広告エリアです。デフォルトでは、上から2番目に表示されるようになっており、CSS設定で強制的に調整しない限り位置は固定です。
- div.registArea, divsubModule
- 「Ameba会員登録」ボタンが配置されます。これ以降のブロックは順番固定です。
- div.subAdList, div.skinFieldBlock
- Amebaのテキスト広告（Amebaサイドテキスト）が格納されます。
- div.rss, div.skinFieldBlock
- RSSへのリンクと、著作権についてのご注意リンクが配置されます。
- その他
- 「サイドメニューの配置」で、検索窓のブロック（div.blogSearchForm, div.subModule）、フリースペース（div.freespaceArea, divsubModule）、プラグインブロック（div.plugin）、の配置が可能です。
div.layoutContentsBの構成
div.layoutContentsBの構成の概念図は右のとおりです。構成は、div.layoutContentsAのコンテンツカラムがなくなったものと同じと考えて差し支えありません。asideで囲まれたなかに「div.skinSubB, div.skinSubArea」ブロックがあり、そのなかに各メニュー項目が格納されています。
div.layoutContentsB内のブロック構成の概要
- div.skinSubB, div.skinSubArea
- asideで囲まれた、狭いほうのサイドバーのカラムです。前者（skinSubB）はワイドサブメニューの設定用のクラスで、後者（div.skinSubArea）は、幅のワイドサイドメニューとの共通設定用のクラスです。内側にdiv.skinSubB2をもつ2重構造になっています。以下の説明は、この2重構造ブロックの内側に配置されたブロックの説明ということになります。
- div.skinMenu, div.（各メニュー固有のクラス）
- 「サイドメニューの配置」で、設定したメニューが表示されます。div.skinMenuは共通の設定で、それに加えてメニュー個別のクラス設定が用意されています。
- その他
- 「サイドメニューの配置」で、検索窓のブロック（div.blogSearchForm, div.subModule）、フリースペース（div.freespaceArea, divsubModule）、プラグインブロック（div.plugin）、の配置が可能です。
以降の分析について
こうして見てくれば、かなり構造が単純なものとして理解できてきたと思います。2重・3重化されたブロックも多いので、複雑なデザイン実現も可能であり、デザインの共通性をもたせると同時に個別に設定が可能なように、2つのクラスが同時設定されているブロックが多く見受けられるのが特長かと思います。
次の記事では、5つのレイアウトがどのような設定になっているのかを詳しくみてゆき、デザインカスタマイズの可能性を探っていきたいと思います。
（続く）