AutoPageさんで、CSS(スタイルシート)の変更により「見た目」をカスタマイズするための「文書構造の分析」。第二弾は「サイドバー」部分です。
※ここだけで投稿サイズが大きすぎる、と言われてしまいましたので、二分割いたします。
なお、サイドメニューの順序は、あくまでも私が並べている順番であり、メニュー名とクラス名とを一組にして、各ブログで設定された側/順番に並んでいますので、ご注意ください。
/* サイドバーの各項目 */
<div class="cal"> /* カレンダーエリア */
<h3>カレンダー</h3>
<div class="caption">
(カレンダー内見出し...年、月)
</div> /* caption end */
<table summary="Calendar">
(カレンダー本体)
</table>
</div> /* cal end */
<div class="sidetcup"> /* 広告エリア - 削除できません */
<h3>PR</h3>
(Google Adsense)
</div>
<div class="recentpost"> /* 最新の記事エリア */
<h3>最近の記事</h3>
<div class="recentpostbody"> /* 最新の記事見出し */
( <ul><li> リスト形式で表示 </li></ul> )
</div> /* recentpostbody end */
</div> /* recentpost end */
<div class="pastlog"> /* 過去ログ(月別)エリア */
<h3>過去ログ</h3>
<div class="pastlogbody"> /* 過去ログの見出し */
( <ul><li> リスト形式で表示 </li></ul> )
</div> /* pastlogbody end */
</div> /* pastlog end */
<div class="cate"> /* カテゴリー別ログ・エリア */
<h3>記事カテゴリ</h3>
<div class="catebody"> /* カテゴリー別の見出し */
( <ul><li> リスト形式で表示 </li></ul> )
</div> /* catebody end */
</div> /* cate end */
<div class="recentcomm"> /* 最近のコメントエリア */
<h3>最近のコメント</h3>
<div class="recentcommbody"> /* 最近のコメントの見出し */
<div class="catebody"> /* カテゴリー別の見出し */
( <ul><li> リスト形式で表示 </li></ul> )
</div> /* recentcommbody end */
</div> /* recentcomm end */
<div class="recenttb"> /* 最近のトラックバックエリア */
<h3>最近のトラックバック</h3>
<div class="recenttbbody"> /* 最近のトラックバック見出し */
( <ul><li> リスト形式で表示 </li></ul> )
</div> /* recenttbbody end */
</div> /* recenttb end */
<div class="link"> /* リンク集エリア */
<h3>リンク集</h3>
<div class="linkbody"> /* リンク集表示部分 */
( <ul><li> リスト形式で表示 </li></ul> )
<p>→<a href="/applet/(ユーザーネーム)/link">リンク集のページへ</a></p>
</div> /* linkbody end */
</div> /* link end */
<div class="search"> /* 検索フォームエリア */
<h3>検索</h3>
<div class="searchbody"> /* 検索フォーム */
<form method="post" action="/applet/takayan/msgsearch">
<input type="hidden" name="msgsearch" value="1" />
<input type="text" name="skey" value="" size="20" maxlength="50" accesskey="k" tabindex="1" /><br />
<input type="image" name="search" src="/common/img/ja/search_btn.gif" style="width:94px; height:20px" alt="検索" accesskey="x" tabindex="2" />
</form>
</div> /* searchbody end */
</div> /* search end */
<div class="sidefree"> /* 「自由表示」エリア */
<h3>(自由表示部のタイトル[ご自分でつけたもの])</h3>
<div class="sidefreebody"> /* 「自由表示」内容部分 */
</div> /* sidefreebody end */
</div> /* sidefree end */
……以下、その2−2に続く。

0