So-netブログ用：HTML入れ子構造とCSSクラス名まとめ：undifined：SSブログ

	ブログをはじめるログイン

categories: HTML / CSS
articles-title: So-netブログ用：HTML入れ子構造とCSSクラス名まとめ [編集]
postdate: 2010-08-13 11:43
tags: CSS HTML

どこのCSSをいじればどこが変わるか、これを理解しないことにはCSS編集はできません。
So-netブログがどのように構成されていて、どのようにCSSを適用しているのかをザックリと書き出します。

まずは全体の大きなハコから

1度に全て記載してしまうと大変なことになるので、最初はコンテンツの入れ物になっている<div>などを大雑把な視点で書き出してみます。
　※ヘッダー・フッターは省略しています。

<body>
<div>#container
<div>#banner
<h1>
   <a>ブログ名</a>
</h1>
<p>#lead
   ブログ説明文
</p></div>
<div>#content
<div>#side-a
<div>#main


</div>
</div>

サイドバー

プロフィールやカレンダー、マイカテゴリなどを表示するサイドバーの構造です。
<div class="sidebar">がひとつのブロックで、プロフィールなどの機能の回数分繰り返されます。

<div>#side-a
<div>.sidebar, #latestCommentなど
<h3>.sidebar-title
   最近のコメント（機能名）
</h3>
<div>.sidebar-body
<div>.sidebar-end
</div>

記事（トップページでは表示されない要素も含む）

記事を表示する中央のメインカラム。
破線で囲まれているものはトップページでは表示されず、記事詳細画面でのみ表示されるもの。

<div>#main
<div>.archive-title
   <span>.archive-name
      <span>.previousLink <a>前の記事</a></span>
      <span>.nextLink <a>次の記事</a></span>
   </span>
   <br clear="both" />
</div>

<div>.articles-top
<div>.articles
<h2>.articles-title
   <a>記事名</a><a>カテゴリ名</a>
</h2>
<div>.articles-body
   記事
<p>※この部分はトップページのみ表示
   <a>.readMoreLink 続きを読む </a>
</p>   <br clear="all" />
<div>.tag-word<a>タグ</a>...
</div>
<div>.posted
   <span>.postDate 投稿日付 </span>
   <a>nice!</a><a>コメント</a><a>トラックバック</a><br />
   <span>.postTheme 共通テーマ：</span><a>テーマ</a>
</div>
<div>#nice、.entry
<div>#myblog-nice-error 既にnice!している場合にエラー表示
<h4>.nice-title nice! ○件
<div>#comments、.entry
<h4> コメント ○件
<div>#comment-write、.entry
<h4> コメントを書く
<div>#trackback-write、.entry
<h4> トラックバック ○件
<div>.trackback-url この記事のトラックバックURL：
<div>#relating-word、.entry
<h4> 関連リンク
<div>.words <a>関連ワード</a>
<div>.articles-bottom
<div>.archive-bottom
   <span>.archive-name
      <span>.previousLink <a>前の記事</a></span>
      <span>.nextLink <a>次の記事</a></span>
   </span>
   <br clear="both" />
</div></div>