Movable Typeの横幅&フォントサイズ固定にはほとほと困って

ほんと、困りますよね。Movable Typeのなんでも固定主義。気にならない人もいるんでしょうけど、昨今の十分横幅のあるディスプレイを使ってウェブログ見ていると、左右の隙間が非常に目立つ。若干改行されすぎの列もある。そして、解像度大きいと相対的に文字が小さく見え、文字によっては小さすぎる。解像度小さくするか、ディスプレイのdpi設定(文字のスケール?)を120dpiとか大きめにするか、あるいはブラウザのズーム機能を使えばまあいいんでしょうけど、それで改善されるのは自分の所だけというか、そこ変えると他のページやソフトで困るというか......。やっぱりMovable Typeのスタイルシートをいじって直したいものです。

しかし、Movable Typeが吐くHTMLソースは、プログラムが出力しているんだからある程度は仕方無いのですが、わりかし解析するのを敬遠したい見た目です。そんなこんなで今まで横幅もフォントサイズも固定のままでやってきました。

しかし今日は何となく気分が乗ったので(他の事から逃げているとも言う)、気分転換にと思って試行錯誤しながら改善してみました。Movable Typeが吐くソースをすべて把握して変えた訳ではないので抜けがあるとは思いますが(特にカレンダーなどのウィジェットについては使ってないので何も手を加えてません)、同じ問題で困っている方がいらっしゃったら役に立つかも知れないので、参考までにこのウェブログで使っているスタイルシートを載せておきます。

@charset "UTF-8";

body {
	font-size : 100%;
	line-height : 1.5em;
}

pre {
	width : auto;
	white-space : pre-wrap;	/* IE8ではまだ無理? */
	line-height : 1.2em;
	background-color : #EEE;
	border-style : solid;
	border-width : 1px;
	border-color : #999;
	margin : 1em 2%;
	padding : 1em;
}

h3 {
	font-weight : bold;
	font-size : 140%;
}
h4 {
	font-weight : bold;
	font-size : 120%;
	padding-top : 0.2em;
	color : #039;
}

dt {
	font-weight : bold;
	margin-left : 0;
}
dd {
	margin-left : 5%;
}

table {
	width : 95%;
	border-collapse : collapse;
	empty-cells : show;
	border-style : solid;
	border-width : 1px;
	border-color : #999;
	margin : 1em 2.5%;
}
th, td {
	border-style : solid;
	border-width : 1px;
	border-color : #999;
	padding : 0.05em 0.5em;
}

q {
	color : #090;
}

/* ここからMovable Type固有 */

/* 横幅 */

#container-inner {
	width : 100%;
}
#header-inner, #content-inner, #footer-inner {
	width : 90%;
	margin : 0;
	padding : 0 5%;
}

#header-content {
	width : 100%;
	margin : 0;
	padding : 1em 2em 2em;
}

#footer-inner .widget-content {
	width : auto;
	margin : 0 2em;
	padding : 0 2em;
}

.layout-wtt #alpha {
	width : 60%;
}
.layout-wtt #beta {
	left : 0;
	width : 20%;
}
.layout-wtt #gamma {
	left : 0;
	width : 20%;
}

.layout-wt #alpha {
	width : 80%;
}

.layout-wtt #beta {
	left : 0;
	width : 20%;
}

/* フォントサイズ */

#header-name {
	font-size : 250%;
}
#header-description {
	font-size : 100%;
}


.asset-name {	/* assetは、ここではエントリを指しているようだ。従ってこれはエントリ名 */
	font-size : 150%;
	line-height : 1.5em;
}
.asset-meta {	/* エントリのメタ情報 */
	font-size : 100%;
}
.asset-excerpt {
	width : auto;
	background-color : #FFE;
	border-style : solid;
	border-width : 1px;
	border-color : #999;
	margin : 1em 2%;
	padding : 1em;
}
.asset-excerpt p {
	margin : 0;
}

.archive-title {
	font-size : 180%;
}

.search-results-header {
	font-size : 150%;
}

.widget-header {
	font-size : 110%;
}
.widget-content {
	font-size : 90%;
}

/* ここからWWWWARD固有 */

div.stratum {
	border-style : solid none;
	border-width : 1px;
	border-color : #666;
	margin : 1em 0;
	padding : 0.25em 0.5em;
}
div.advertisement {
	text-align : center;
	margin : 0 0 1em;
	padding : 0;
}

中には横幅&フォントサイズ可変に関係無いものも含まれているので、使う時は取捨選択しながらお使い下さい。ちなみに、ユーザ定義のスタイルシートは「スタイルシート」テンプレート(styles-site.css)で最後に@importすると良いようです。こんな感じで。

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://w4ard.s26.xrea.com/program/mt/mt-static/themes-base/blog.css);
@import url(http://w4ard.s26.xrea.com/program/mt/mt-static/support/themes/minimalist-blue/minimalist-blue.css);
/* end StyleCatcher imports */

@import url(http://w4ard.s26.xrea.com/stylesheet/weblog.css);

ちなみにSounDecoder Sounds MDXはさっきまでやってましたが、あと少しかかりそうです。できれば今日中に何とかしたい所。