MovableTypeログインページのクリスマステーマ

2009-12-16 (水)

ログインページは、実際にブログを使用される方が最も目にする場所だと思います。
季節を感じるような　ちょっとした変化があるだけで、ログインすることや日々の更新作業が少し楽しくなるかもしれません。
kysThemeChristmas.jpg

動作確認は、
「Movable Type version 4.2x-ja」のデフォルトのログインページにて、
windows版の「IE 6,7,8」と「firefox 3」で行っています。
MTの別のバージョンや、その他のブラウザでは確認していませんのでずれている可能性が高いと思います。すいません

ログインページのCSS
｛MTインストールディレクトリ｝/mt-static/css/simple.css
の一番下に追記する形になっています。
記述内容は、続く以下で。


JavaScriptを使用すればもっと手の込んだこともできるのですが、IDやパスワードを入力するページに「JavaScriptを仕込んでください」というのもどうかと思いましたので、CSSのみでがんばってみました。

苦労した点は、
IE6用のCSSハックは久々に記述したので、非常に時間がかかりました。
pngを透過させるための「AlphaImageLoader」など、CSSに直書きしたのは数年ぶりです（＾＾；


「ベルのイラスト」はこちら『Icon Drawer』より
ライセンスは、
For commercial or personal use on website, please place a link to www.icondrawer.com on the same pages the icons are used
ということですので、制作会社さんがページに組み込んで納品される場合はご注意ください。



/*==================================
 * KYSテーマ　クリスマス
 ===================================*/
body
{
  background : #030e2a url(http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_bg.jpg) repeat-x left top;
}

div#ctl,
div#ctr,
div#cbl,
div#cbr
{
  display:none;
}

#container-inner
{
  width:369px;
  padding-top:1px;
  border:0;
  background-color : transparent;
  background-image : url(http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_container-inner_bg.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}

#container-inner>#header
{
  margin-top:47px;
}

#username-field { position : relative; z-index:2;}
#password-field { position : relative; z-index:3;}
form p>label { position : relative; z-index:4;}
form p>label>input { position : relative; z-index:5;}
form div.left>a { position : relative; z-index:6;}
/* パスワードを忘れた時の画面用 */
fieldset div#name-field { position : relative; z-index:7;}
fieldset div#hint-field { position : relative; z-index:8;}
fieldset div.actions-bar div.actions-bar-inner button{ position : relative; z-index:9;}

div.actions-bar div.actions-bar-inner button.primary-button
{
  height:34px;
  margin-top: -4px;
  padding-top:12px;
  background-color : transparent;
  background-image : url(http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_button-primary.png);
  background-repeat : no-repeat;
  background-position : -4px 1px;
  border-top:0;
  
  position : relative;
  z-index:10;
}

#container-inner>#footer
{
  position : absolute;
  top : 1px;
  left : 1px;
  z-index:1;
  
  width:100%;
  height:500px;
  background-color : transparent;
  background-image : url(http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_snowflake.png);
  background-repeat : repeat-x;
  background-position : 0 0;
}

/* 以下、IE用ハック */

/*--------------------------------
 * IE 6のみ
 --------------------------------*/
* html body
{
  background : #030e2a url(http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_bg_ie6.jpg) repeat-x left top;
}

* html #container-inner
{
  height:340px;
  background-color : transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_container-inner_bg.png", sizingMethod="crop");
}

* html #container-inner #header
{
  margin-top:50px;
  background-color : transparent;
}

* html div.actions-bar div.actions-bar-inner button.primary-button
{
  height:34px;
  background-color : transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_button-primary.png", sizingMethod="crop");
}

/*--------------------------------
 * IE 7のみ
 --------------------------------*/
*+html body
{
  background : #030e2a url(http://www.kys-lab.com/ueda/kys-theme/christmas2009/kysTheme_christmas_bg_ie6.jpg) repeat-x left top;
}
*+html #container-inner #header
{
  margin-top:50px;
  background-color : transparent;
}

*+html #container-inner>#footer
{
  background-image : none;
  width:0;
  height:0;
  position : static;
}
/*==================================
 * ホームページ制作・WEBデザインは広友社におまかせ！
 *  http://kys-web.com/
 ===================================*/

カテゴリー WEB | 日誌

コメント ( 0 )

　
　
　
この情報を登録しますか?
HTMLタグは使用できません

ページの先頭へ戻る