June 21, 2005
MTの管理画面をカスタマイズ
- 更新: 2007 年 03 月 04 日 15:36
- 2005 年 06 月 21 日 01:41 に asiamoth が投稿
- カテゴリー: Movable Type
- コメントする
現在では、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）.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の「テンプレート」画面から編集するのがお手軽だと思う。
さて、エントリーしやすい環境も整えたし、サクサク記事を書いていきたいな──。
"MTの管理画面をカスタマイズ"の関連記事
コメント
コメントを投稿
"MTの管理画面をカスタマイズ" にコメントを投稿することができます。お気軽にどうぞ。