Home > Movable Type > mt.VicunaスキンをVer2.2.1に変更しました

mt.VicunaスキンをVer2.2.1に変更しました

2009年3月にmt.VicunaスキンがVer2.2.1に更新されていましたので
ようやく入れ替えました。

それまで利用していたVer2.2.0 に特に問題を感じていなかったので入れ替えをためらっていましたが 当サイトと別にマルチブログ機能を利用して運用しているサイトのデザインをマルチカラムに変更した時うまく左サイドバーの表示がうまく行かなかったのでそれをカスタマイズしてゆくのが面倒だった為 Ver2.2.1に変更しました。

mt.Vicuna Ver2.2.1

主な変更点

新しいスキンはCSSの構造が大幅に変更になりこれまでのモジュール構造が大幅に減りファイル数が3つになりとても見通しがよくなりました。

構成としては、従来のVer2.2.0の以下のファイル

  • 1-element.css
  • 2-class.css
  • 3-context.css

の3つが "core.css" にまとめられ残りのモジュールファイルを layouts.cssに統合されています。

当サイトもmt.Vicuna2.2.1 に入れ替え!

新しいmt.Vicuna 2.2.1 は、てもかっこよかったので当サイトでも入れ替えることにしました。

あれれ・・・?

入れ替えてみて気づいたのですが 何かちょっと変・・・

TrackpointKeyboard

サンプルテキスト Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  サンプルテキスト

記事中の画像が フロートしていないので記事がまわりこんでいません。

あれれ・・? 
と思って "core.css" を覗いてみると Ver2.2.0で用意されていた「img_L」や「img_R」のクラスがありません。

同様に「dl.data」の記述もありません。

Ver2.2.0にあってVer2.2.1に無いものを追加する

float (.img_L) や (.img_R)クラスを追加する

以前のエントリー「本文に画像を挿入しクリックで拡大表示させる方法」でご紹介した.img_L や .img_Rクラスを "core.css"に追加します。

/* float-- Vicuna2.2.0から追加 --
---------------------------------------*/

.img_L {
       margin-right: 1em!important;
       margin-top: 1em!important;
       float: left;
}

.img_R {
       margin-left: 1em!important;
       margin-top: 1em!important;
       float: right;
}

.clear {
       display: block;
       clear: both;
}


上記の内容をコピーして "core.css" に追加してください。

TrackpointKeyboard

サンプルテキスト Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  サンプルテキスト


無事、画像がフロートしました。

dl.data クラスを追加する

上記と同様にdl.data クラスを追加します

/* dl.data  -- Vicuna2.2.0から追加 --
---------------------------------------*/

dl.data {
 padding: 0;
 border-left: 5px solid #ddd;
 border-right: 1px solid #eee;
 border-bottom: 1px solid #eee;
}

dl.data dt {
 margin: 0;
 padding: 0.3em 0 0.1em 1em;
 border-top: 1px solid #eee;
 width: 8em;
 float: left;
}
 
dl.data dd {
 margin: 0 0 0 8em;
 padding: 0.3em 1em;
 border-left: 1px solid #eee;
 border-top: 1px solid #eee;
}


上記の内容をコピーして "core.css" に追加してください。

Trackbacks:0

TrackBack URL for this entry
http://www.googrekas.com/mt/mt-tb.cgi/35
Listed below are links to weblogs that reference
mt.VicunaスキンをVer2.2.1に変更しました from アフィリエイトで稼ぐためのサーバ構築スキル

Home > Movable Type > mt.VicunaスキンをVer2.2.1に変更しました

Search
Feeds

Return to page top