メインカラム 「記事一覧」

1/18 加筆、外部CSS解析結果

記事の一覧表示のメインカラム解析結果です

<div id="main">

　　<div id="sub_main">

　　　　<div class="readerMainLink">　読者になるへのリンクエリア
　　　　　　<p>
　　　　　　　　<a href="http://blog.ameba.jp/reader.do?bnm=ユーザーID">このブログの読者になる（チェック）</a>　リンク
　　　　　　</p>
　　　　</div>　読者になるへのリンクエリア終わり

　　　　<div class="page topPaging">　一覧のページナビエリア
　　　　　　<span class="now">　現在のページ
　　　　　　アンカーでページのリンク、class無し
　　　　　　アンカーclass="previousPage"　前のページ
　　　　　　アンカーclass="nextPage"　次のページ
　　　　</div>　一覧のページナビエリア終わり

　　　　<div id="recent_entries_list">　一覧のエリア

　　　　　　<h3 class="title">記事一覧</h3>
　　　　　　<ul>　記事のリスト

　　　　　　　　<li class="new">　class="new"が付くのは新しい記事のみ、古い記事はclass無し。
　　　　　　　　　　<p class="newentrytitle">　タイトルの表示スタイル
　　　　　　　　　　　　<a href="単独記事のURL">ブログのタイトル</a>
　　　　　　　　　　</p>
　　　　　　　　　　<p class="cotb">　コメ　トラバの表示スタイル
　　　　　　　　　　　　<a href="単独記事のURL#cbox">コメント(コメント数)</a>
　　　　　　　　　　　　 |　縦棒
　　　　　　　　　　　　<a href="単独記事のURL#tbox">トラバ(トラックバック数)</a>
　　　　　　　　　　</p>
　　　　　　　　　　<p class="updatetime">　投稿時間の表示スタイル
　　　　　　　　　　　　記事の投稿時間
　　　　　　　　　　　　<img src="http://stat.ameba.jp/common_style/img/ameba/common/icons/new.gif" alt="new" />　新しい記事のみ付加
　　　　　　　　　　</p>
　　　　　　　　</li>　リスト1項目終わり

　　　　　　　　以下<li>繰り返し（最大20件）

　　　　　　<ul>　記事のリスト終わり

　　　　　　<div id="advertising2">　広告のエリア
　　　　　　　　　javascriptで広告が入ります。
　　　　　　</div>　広告のエリア終わり

　　　　</div>　一覧のエリア終わり

　　　　<div class="page topPaging">　一覧のページナビエリア
　　　　　　省略、ページ上のものと一緒
　　　　</div>

　　　　<div class="readerMainLink">　読者になるへのリンクエリア
　　　　　　省略、同上
　　　　</div>

　　　　<div id="footer_ad">　記事のフッターエリア
　　　　　　<ul>　アメーバの告知エリア
　　　　　　　　<li id="footerInfoText">　リストにIDが振ってあります
　　　　　　　　　　<div>タグでAmebaフッター告知枠、多分SSI、長いclass名
　　　　　　　　</li>
　　　　　　　　<li>　こっちはID無し
　　　　　　　　　　<div>タグでAmebaブロードテキスト、こちらも上の告知同様SSI、長いclass名
　　　　　　　　</li>
　　　　　　</ul>　 アメーバの告知エリア終わり

　　　　　　<div id="advertising3">　フッター広告
　　　　　　　　javascriptで広告、一覧最後のものと同様
　　　　　　</div>

　　　　</div>　記事のフッターエリア終わり

　　</div>　サブメイン終わり

</div>メイン終わり

構造は単純ですのでいじり易そうです、でもあまり需要は無いかな・・・
やるとしたら新しい記事を目立つように.now{}をいじるくらいかな、もしくエントリーを1行で表示するとか。

外部CSSで設定されているスタイル
メインとかぶるものは端折ります。

#recent_entries_list p#month{margin:0 0 10px;text-align:right;}
#recent_entries_list ul{display:block;width:100%;margin: 0;padding: 0;list-style-type:none;}
#recent_entries_list li{margin:0 0 8px;padding:0 0 2px;list-style-type:none;border-bottom: 1px solid;}
#recent_entries_list li:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#recent_entries_list li{display: inline-table;}
#recent_entries_list p.newentrytitle{float:left;width:50%;overflow:hidden;
word-break:break-all;/* for WinIE */
}
#recent_entries_list p.cotb{float:right;width:45%;padding-right:2px;text-align:right;}
#recent_entries_list p.updatetime{clear:both;}
#recent_entries_list p.updatetime img{margin-left:5px;}