Winで見られるデザインを目指して、次に取り組んだのが「カレンダー」でした。
これ、実はだいぶ前に「カフェテラスえの木」の山の爺さまに指摘されていたんです。
でも、そのときはうちはウィンドウズ（Win）じゃないし、自分で見て確認できないからいいやってさじ投げてたんですよね。(^^;;;)
こんなことじゃいかんですよね〜。
きっとそのときはMovable Typeのテンプレートやタグの修正にてこずっていて余裕がなかったんだと思います。
知っててそのまま放置してたのですから。（笑）
そんな訳で、カレンダーの部分の修正です。
これも他の修正と同じでマック（Mac）ではきちんと表示されていたのですが、Winだとカレンダーの右側がはみでて切れてしまっていたんです。
それで、テンプレートをあちこちいじったのですがこれを直すのにはかなり苦労しました。（×_×）
今回もいじったのはスタイルシートのみです。
初期のスタイルシートの形はこれです。
#calendar {
line-height: 140%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}
#calendar th {
text-align: center;
font-weight: normal;
}
#calendar td {
text-align: center;
}
これをはじめfont-sizeとwidthの部分だけ修正して
#calendar {
line-height: 140%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width:145px;
}
この形にしてみました。
自分としてはカレンダーのはみだしはスタイルシートで幅を設定すれば大丈夫かと思い「フォントサイズの固定」、「幅の指定」をしてみたのですが、これではデザインの崩れは変わらなかったです。
それで、calendarとcalendar tableの修正だけではダメだと思い最終的には全ての部分に「フォントサイズの指定」をし、なおかつcalendarとcalendar tableの部分には 「幅の指定」をしてみて最終的にスタイルシートの部分をこうしてみました。
#calendar {
line-height: 140%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
padding: 2px;
text-align: center;
margin-bottom: 30px;
width: 140px;
}
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
font-size: 10px;
width: 140px;
}
#calendar th {
text-align: center;
font-weight: normal;
font-size: 10px;
}
#calendar td {
text-align: center;
font-size: 10px;
}
これでWinでもサイドバーの枠内に収まって見えるようになりました！！(*^^)v
どうでしょうか、動作確認をしたのはIE 6.0.2とNetscape 7.0なのですがウィンドウズできちんと見えてるでしょうか？
それにしても、ほんとウィンドウズとマックの違いというか各ブラウザごとに対応するようにするようにテンプレートを作成するのは難しいですね。
+++ 関連記事 +++
|
