tomolatte

------------------------------------------------------

まず2004年にダミー記事を投稿して1月～12月まで表示させようとしました。
しかし7月までの表示で8～12月がプッツリ切れました。(a)

この年月の部分(2004: 01 02 03 …)は<li>～</li>が使用されています。
私がもともと<li>にあてがっているcssは以下の記事にあります。
「サイドメニューバーのリスト表示を調整」

この中の
　「white-space:nowrap;/*追加改行禁止*/」
の部分がまずいのかと思って
<li class="kako">とし、

.kako {
     white-space: normal !important;
     }

と指定しました。
　［ 備)私の環境では「!important」が必要でした ］

------------------------------------------------------

しかしこれだけでは変化が無かったので更に原因を考えました。

月と月の間の半角スペースには特殊文字「&nbsp;」を挿入していました。
しかし、W3CのHTML4.0勧告邦訳で確認したところ

改行の禁止
二つの言葉を分けたくない場合もでてきます。&nbsp;実体（&#160; か &#xA0;）は、改行させたくな空白に使います。

だそうです。
えっ、改行さ・せ・た・く・な…(-_-;

これが原因だったようで普通に半角モードでキーボードのスペースキーを押してスペースを入れましたら改行されるようになりました。(b)

------------------------------------------------------

このままですとなにかちょっと見た目が今ひとつですので西暦のあとに<br />を挿入しました。(c)
バランスが悪いような気がしたので半角スペースで余白をとるのをやめ、<a>タグに「margin-right: *px」と指定してみました。
余白を任意でいじれるように。
ここでは4px。(d)
さらに<div class="kakom">を作ってCSSで半年分ずつ表示されるように幅を指定し(e)
月表示左側に余白を入れました(f)

テンプレートに入れたタグとCSSは下記に示しました。
もし参考にされるのであれば数値などを皆様方の環境に合わせてお使い下さい。

■テンプレート側

<h2>過去の投稿</h2>

<ul>
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader>
<li class="kako"><$MTArchiveDate format="%Y"$>:<br />
<div class="kakom"><MTArchiveYear order="ascend">
<MTArchiveYearIfEntries><MTArchiveLoad><MTDateHeader>
<a href="<$MTArchiveLink$>" title="投稿数: <$MTArchiveCount$>">
<$MTEntryDate format="%m"$></a></MTDateHeader></MTArchiveLoad>
</MTArchiveYearIfEntries></MTArchiveYear>
</div>
</li>
</MTArchiveDateHeader></MTArchiveList>
</ul>

■CSS側

/* 月別アーカイブ用 */

.kako {
     white-space: normal !important;
     }

.kakom {
     width:140px;
     position: relative;
     left:15px;
     }

.kakom a {
     margin-right: 4px;
     }

　※WinのIE6、Firefox1、NN7.1で表示確認済ですがMacな方は不明です。
　　　→Mac OS X 10.4/Firefox2,Safari2.0.4確認済み(※コメント欄参照)
　※実際の「tomolatte」は予告無くこの仕様から変更する場合があります。
　※この作業には３つのプラグインが必要です。

------------------------------------------------------