現在では、Movable Typeの管理画面をカスタマイズする方法は、下記のAltTmplateを使う方法と、BigPAPIプラグインを使う方法があります。BigPAPIプラグインを使う方法は、MT管理画面をカスタマイズするAltTemplateとBigPAPIに書きました。こちらもどうぞ。
MTの管理画面をLiquidスタイルにしたら──
MTの管理画面をカスタマイズしてみた。かなり新鮮で、記事を書くのが楽しくなる。
──が、IEではメインメニューの表示が崩れてしまう。
今回、これを何とか直してみた。
styles.cssをhack!
方法は簡単で、styles.cssに一箇所追加するだけ。
#list-blog .shortcuts {
clear:both;
float:left;
width: 100%; /* この行を追加 */
margin-left: 2px;
}
すると、IEでもこんな感じに表示される。
要するに、float
した(div
).shortcuts
にwidth
を設定するといいみたいだ。
また、.body-nav
の部分が、IEだと下のほうに「落ちた」ようになることが多い。そういう場合は、下記のように変更すると良いようだ。
.body-nav {
float: right;
width:80%; /* 85 => 80 */
margin: 0 15px;
}
floatにはwithを
では何故これで直るのか──というのは、実はよく解っていなかった。以前ねこめしにっきで話題になっていたのを中途半端に覚えていたので、「float
とwidth
はセットで」と思い、実際にテストしてみたらうまく行った──というのが実際の所。
画像とかの「あらかじめタテヨコ幅を持っている」ものではないモノを float させる時は、必ず width の値を具体的に明示しませう~。
調べてみると、CSS(2)のリファレンスにも、下記のようにはっきりと書かれていた。
(floatの項目)
このプロパティの対象となる要素には,何らかの方法で幅を明示しなければなりません(
width
プロパティなどで割り当てるか,置換要素の場合は内在する幅が流用される)。CSS2仕様では,幅が明確ではないフロートの幅は ‘0’ とみなされます。
また、float
を使ってデザインをする時は、下記の記事もかなり参考になるので、一緒に紹介。
styles.cssはインデックステンプレートにすると便利
今回のようにstyles.css
を自分好みに変更する場合、いちいち「エディタで変更→FTPで転送→確認→エディタで変更──」とするのは(自分の環境では)かなり面倒。そこで、styles.css
は「新しいインデックス・テンプレートを作る」を利用して、MTの「テンプレート」画面から編集するのがお手軽だと思う。
さて、エントリーしやすい環境も整えたし、サクサク記事を書いていきたいな──。