変更履歴

• 2009年9月12日

トップページを各エントリーの最初250文字を表示するように変更。

管理ページで
デザイン＞テンプレート＞メインページ＞インクルードモジュール、ブログ記事の概要＞インクルードモジュール、エントリー詳細内部　ででてきたテンプレートの

<$MTEntryBody$>

　　　　　↓

<$MTEntryBody words="250"$>

このように変更する。
後は条件分岐部分をコメントアウト。正直よくわからない・・・でもこれで続きを読むは出るように・・・

<MTIgnore><MTIfNonEmpty tag="EntryMore"></MTIgnore>

<MTIgnore></MTIfNonEmpty></MTIgnore>

あとContinue readingの場所を右揃えにするため、1-subskin.cssのp.continueの部分（328行目）に

p.continue {
    text-align: right;
}

• 2009年3月7日
  

　<strong>タグをつかうと、色が付いてしまうようにCSSで設定されていたので、
　1-subSkin.cssのなかの、<strong>記述を色が黒になるように変更
　→色の定義を黒にしていたので、色を変えようと思っても出来ず（笑）
　　そこで色の属性をなくすように修正

• 2009年2月15日
  

　ブログ記事を書くときにずっとリッチテキストのフォーマットで書いてきたのだけれど、ちょっとデコレーションをしたいときには「改行を変換」で書いたほうがずっと楽なことに気がつきました。でも、改行を変換で書くときには改行が<p>タグになり、リッチテキストの時には<br>タグになってしまうことに気がつきました。これだとブラウザで表示したときに行間がことなるので見た目状すっごく間抜けな感じになります。
　これはおそらくstyle-flatのcss設定の特徴でしょう。この場合、CSSを書き換えてしまった方がいいとおもうのでmiのマルチファイル検索で目星をつけてみました。
1-element.cssの

p {
        /*===
    line-height: 1.8;
    ===*/
}

を上のような感じでコメントアウトしたら、表示上問題が無くなりました

• 2009年2月13日

グローバルナビゲーションにリンクを追加したらデザインが崩れてしまう
CSSのパラメーターを変更
mod_gNavi.css

/*======================================
    Global Navigation Module
    =======================================*/
ul#globalNavi {
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid #eee;
}
ul#globalNavi li {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px; ←120から変更
    line-height: 1;
    list-style-type: none;
    font-size: 12px;
}

• 2009年2月2日

ブログタイトルの文字サイズ等を変更
変更箇所は　mt4-static/themes/style-flat/3-context.css　の

/*--------------------------------------
    3-1-1. Website Title
---------------------------------------*/
div#header p.siteName {
    margin: 32px 0 0;
    line-height: 1;
    font-size: 160%;
    font-weight: bold;
}
div#header p.siteName a {
    text-decoration: none;
}
div#header p.siteName a:hover {
}

2008年8月3日
H4&h5&h6を有効活用するためにスタイルシート（mt4-static/themes/style-flat/1-element.css）に記述追加

サンプル

これは<h4>

これは<h5>

これは<h6>

h4 {
    font-size: 110%;
    color: #0000cd;
    font-weight: bold;
}
h5 {
    font-size: 120%;
    color: #0000cd;
}
h6 {
    font-size: 120%;
    color: #ff0000;
}

• 2008年5月6日

　Linkの色などを変更。style flatのcssスキンは、それぞれの要素毎に細かくcssが構造化されていて、それを読み込んで全体のcssを作っているのですが、理解するまでには大変でした。しかし、だんだんと作者の意図もわかってきたような気がします
　ただ今だに1-subSkin.cssと1-element.cssの使い分けがわかりません（泣）なので1-subSkin.cssで定義されているlinkカラーをコメントアウトし、1-element.cssへ定義を移植！そして、リンク色変更は1-element.cssで定義することにしました！

• 2008年5月1日

サイドバーのフォントサイズを変更
ウィジェットセットの「2カラムのサイドバー」のソースをみると、
<ul class="recentEntries">でした。このサイトはmtVicuna212のstyle-flatを使われていただいているのですが
サイドバーはデフォルトなのかな？？・・・実はよくわかっていないのですが・・

style-flatのCSSを探してみても、このclassが無いんです。なので
2-class.cssに以下の記述を追加しました

ul.recentEntries {
    font-size: 85%;
}

• 2008年3月31日

偶然<pre> </pre>タグを使うと、その部分のバックグラウンドが変わることに気がつく。どうやら<pre>タグがそのように定義されているようだ。
miのマルチファイル検索を使って、style-flatを検索すると、でてくるでてくる！

1-element.cssの

pre {
padding: 0.5em 0 0.5em 20px;
width: 95%;
max-width: 85%;
overflow: scroll;
font-family: monospace;
}

をscroll→noneに変更する。バックグラウンドの色自体は

subSkin/1-subSkin.cssの

pre {
    color: #666;
    background-color: #eee;

で定義されているようだ。ということはblockquoteを探してうまく定義すればいいと言うことですね！

ということで、
1-element.css
の

blockquote {
    margin-left: 15px;
    padding: 0.6em 20px;
}

を

blockquote {
margin-left: 15px;
padding: 0.6em 20px;
width: 95%;
max-width: 95%;
border-color: #808080;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;

に変更して、さらに
subSkin/1-subSkin.css
の

blockquote {
    color: #666;
    background-color: #f5f5f5;
}

を以下のように変更

blockquote {
    background-color: #eee;
}

colorをとってしまえばblockquoteのなかで、フォントの色を個別に指定可能となる

• 2008年3月31日

CSSをすこしいじる。このサイトのスキンは、大変美しく、おてがるでありがたいのだけれど、CSSをちょっといじって、見た目を変えようとすると、結構大変だった。CSSの記述が多くのファイルに分散していて、どこをどのようにいじればいいのかが素人にはわからないからなんですね。結構時間がかかってしまった。
現在はstyle-flatというスキンを使っているが、そのCSSは
トップのcssから複数のCSSが読み込まれるようになっている

/styles.css
↓
mt-static/themes/style-flat/0-import.css
↓
@import url(1-element.css);
@import url(2-class.css);
@import url(3-context.css);
@import url(4-layout.css);
@import url(subSkin/1-subSkin.css);
@import url(5-module.css);

という構造になっている。これを理解するのにしばらくかかった(笑)

まず、

subSkin/1-subSkin.cssの

div.entry {
border-top: 5px solid #eee;
}
を5px→0pxへ変更
これで、エントリー部分丈夫の灰色のボーダーが消える

次に、
1-element.cssの

h2 {
部分に
border-color: #ff0000;
border-style: solid;
border-bottom-width: 1px;

を追加
これで、エントリータイトルの下部に赤いラインが付く

• 2008年3月2日：グローバルナビゲーションを設定

(1)テンプレートのヘッダーから<MTIgnore>のタグを削除
(2)Style-flatのテンプレートの5-module.cssから、mod_gNavi/mod_gNavi.cssのコメントアウトを解除
(3)次に、グローバルナビゲーションにリンクをはるためにデザイン＞テンプレートから、ブログテンプレートページに移動
(4)メインページをクリックし、画面右のインクルードモジュールにあるヘッダーをクリックしてヘッダーページに移動
(5)ヘッダーのページの画面右、インクルードモジュールにあるグローバルナビゲーションをクリック
(6)ここで出てきた画面でリンクを編集できる。

• 2008年3月2日：リンクの色を変更

www/mt4-static/themes/style-flat/1-element.css　に

a:link {
    color: #00008b;
}

a:visited {
    color: #ff7f50;
}

a:hover {
    color: #b22222;
}

の記述を追加