Movable Type 備忘録

 Movable Type のログイン画面をカスタマイズ

こんばんわ^^

訪問者さんから Movable Type のログイン画面のカスタマイズについてご質問がありましたのでご紹介します (￣∇￣)/

先日、わたしのサイトでも Movable Type のログイン画面をチョビッとカスタマイズしてみました。

カスタマイズといっても大そうなことしてるわけじゃなくって、ロゴを変更したのと入力フォームのとこに画像貼り付けた程度です (;￣∇￣A

ロゴは mt/mt-static/images/chromeless/mt_logo.gif を差し替えるだけです。
スタイルシートは mt/mt-static/css/simple.css になります。

テンプレートは

  • mt/tmpl/cms/login.tmpl
  • mt/tmpl/cms/include/chromeless_header.tmpl
  • mt/tmpl/cms/include/chromeless_footer.tmpl

になります。
でも、テンプレートの方はあまりイジらない方がいいかもね。

で、わたしがカスタマイズした内容は以下の通りです。

  1. mt/mt-static/css/simple.css 12 行目
  2. .field-content {background: url('../images/chromeless/input_ti.png') no-repeat;}

上記の 1 行を 12 行目に追加します。

  1. mt/mt-static/css/simple.css 13 行目
  2. .field-content input.ti,
  3. .field-content input.pw{margin:0;width:318px;padding-left:.5em;height:19px;border:0;background-color: transparent;}

赤字の部分を追加します。
作ったイメージファイルはこちらになります。
このイメージファイルを mt/mt-static/images/chromeless/ フォルダの中にアップロードします。

アルファチャンネルを使用してますので、IE6.x だと透過されず端っこがチョビッと角ばってますけど、あまり目立たないのでよしとしてます (●´∀｀●)

以上です。
見えないところのおしゃれってヤツ (＞∀＜　)

自分好みに、またはサイトのイメージに合わせて変更してみるのもいいかも。
ただし、変更する際には必ずバックアップとるなりして、自己責任でお願いしますね。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード