• 更新:
  • 投稿:
  • カテゴリィ:

現在では、Movable Typeの管理画面をカスタマイズする方法は、下記のAltTmplateを使う方法と、BigPAPIプラグインを使う方法があります。BigPAPIプラグインを使う方法は、MT管理画面をカスタマイズするAltTemplateとBigPAPIに書きました。こちらもどうぞ。

MTの管理画面をLiquidスタイルにしたら──

drry+@->Weblog - Movable Type 3.17-ja and customized interface with application templatesを参考に、MTの管理画面をカスタマイズしてみた。かなり新鮮で、記事を書くのが楽しくなる。

──が、IEではメインメニューの表示が崩れてしまう。

メインメニューの画像IEでメインメニューを表示すると崩れる──

今回、これを何とか直してみた。

styles.cssをhack!

方法は簡単で、styles.cssに一箇所追加するだけ。

#list-blog .shortcuts {
	clear:both;
	float:left;
	width: 100%; /* この行を追加 */
	margin-left: 2px;
}

すると、IEでもこんな感じに表示される。

訂正後の画像IEでも表示が崩れない

要するに、floatした(div.shortcutswidthを設定するといいみたいだ。

また、.body-navの部分が、IEだと下のほうに「落ちた」ようになることが多い。そういう場合は、下記のように変更すると良いようだ。

.body-nav {
	float: right;
	width:80%; /* 85 => 80 */
	margin: 0 15px;
}

floatにはwithを

では何故これで直るのか──というのは、実はよく解っていなかった。以前ねこめしにっきで話題になっていたのを中途半端に覚えていたので、「floatwidthはセットで」と思い、実際にテストしてみたらうまく行った──というのが実際の所。

画像とかの「あらかじめタテヨコ幅を持っている」ものではないモノを float させる時は、必ず width の値を具体的に明示しませう~。

ねこめしにっき(2001年8月下旬)

調べてみると、CSS(2)のリファレンスにも、下記のようにはっきりと書かれていた。

(floatの項目)

このプロパティの対象となる要素には,何らかの方法で幅を明示しなければなりません(widthプロパティなどで割り当てるか,置換要素の場合は内在する幅が流用される)。CSS2仕様では,幅が明確ではないフロートの幅は '0' とみなされます。

視覚整形モデル - CSS2 リファレンス

また、floatを使ってデザインをする時は、下記の記事もかなり参考になるので、一緒に紹介。

ADP: floatレイアウトでつまづかないためのTips

styles.cssはインデックステンプレートにすると便利

今回のようにstyles.cssを自分好みに変更する場合、いちいち「エディタで変更→FTPで転送→確認→エディタで変更──」とするのは(自分の環境では)かなり面倒。そこで、styles.cssは「新しいインデックス・テンプレートを作る」を利用して、MTの「テンプレート」画面から編集するのがお手軽だと思う。

さて、エントリーしやすい環境も整えたし、サクサク記事を書いていきたいな──。

[2] このページの一番上へ戻る