tomolatte: 2005年6月の投稿

－息子２歳６ヶ月－

タイトルは「テレビ塔」だそうです。
テレビ塔は札幌市内大通公園にそびえたち、
関東でいうところの東京タワー的、
関西でいうところの通天閣的存在(おそらく)です。

以前このブロックで遊ばせたら楽しそうにパーツを投げ散らかしましたので　回収隠匿いたしました。
が、最近息子が掘り当ててしまいました。

心の中で
「チッ見つけられてしまった( -_-)」
と思ったのですが　今回息子ブロックで遊んだ後、母がせかすことなくおかたづけをしています。

どうやら散らかしているとおもちゃが(母の手によって)なくなるということに気が付いたようです。
それとも今回たまたまでしょうか？
あぁずっと後かたづけが続きますように(-人-)

以前書いた「月別アーカイブのコンパクト化(改)」の記事に「月がサイドバーをはみ出して改行してくれない」というコメントが寄せらていました。

レスを返す前に問題解決されたとのコメントを頂き、内容から推してその方自身特有の環境かしらと思っていたのですが。
試しにブログ歴の浅い自分のブログでダミーの過去記事を投稿したところ、ほぼ同様の事態が(-_-;
この記事をみて同様の状態に陥った方、失礼致しました。
遅ればせながら以下順を追って修正です。

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

まず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」が必要でした］

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

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

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

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

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

これが原因だったようで普通に半角モードでキーボードのスペースキーを押してスペースを入れましたら改行されるようになりました。(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」は予告無くこの仕様から変更する場合があります。
　※この作業には３つのプラグインが必要です。

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

tomolatte

検索

2005年6月の投稿

過去の投稿

カテゴリー

息子のブロック作品

月別アーカイブのコンパクト化(改々)

歩くFlash