tugaa blog

MT3.0変更点の覚え書き

Categoryを表示させる。

<MTEntryCategories glue=", ">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>
</MTEntryCategories>

<$MTCategoryArchiveLink$>が
カテゴリアーカイブに対するリンクを表すタグです。
AタグのHREFにこのタグを指定することによって、
カテゴリアーカイブに対するリンクを有効にします。
<MTEntryCategories>のオプションに指定されたglue=", "によって、
それぞれのカテゴリは「, 」によって区切られます。

「カテゴリ別アーカイブ」を表示させる方法と
カテゴリーごとにエントリー数がカッコ書きで表示する方法。

<h2>カテゴリ別エントリー</h2>
（<h2>～</h2>の間は好きな文字を入れてください）。

<ul>
<MTArchiveList archive_type="Category">
<li>
<a href="<$MTArchiveLink$>">
<$MTArchiveTitle$>
</a>
(<$MTArchiveCount$>)</li>
</MTArchiveList>
</ul>

<$MTArchiveCount$>が
指定したArchiveListのエントリの数を表示させるMTタグです。
これを使うことによって、デフォルトのテンプレート > Main Indexでは、

<h2>アーカイブ</h2>

<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a>
</li>
</MTArchiveList>
</ul>

と、月ごとのアーカイブが表示されるようになっています。
これに先ほどの<$MTArchiveCount$>を追記することで、
その月にどれだけのエントリがあるのか、表示させることも出来ます。

<h2>アーカイブ</h2>

<ul>
<MTArchiveList archive_type="Monthly">
<li>
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a>
（<$MTArchiveCount$>）</li>
</MTArchiveList>
</ul>

これで、月間アーカイブのエントリの数が分かるようになります。

続きを読むには、CSSの変更で出来ることを少し書いています。

文字を大きくする。

CSSの変更が必要になります。
テンプレート > Stylesheetを見てみます。

.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #333;
font-family: Verdana, Arial, sans-serif;
font-size: small;
}

.content p {
color: #333;
font-family: Verdana, Arial, sans-serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

デフォルトではこの二つのfont-sizeがx-smallになっているので、
smallに変更するだけです。

3段カラムにしてみる。

CSSの変更が必要になります。
テンプレート > Stylesheetを見てみます。

#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 750px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

width: 750pxが、全体の幅を指定しています。

#center {
float: left;
width: 600px;
overflow: hidden;
}

width: 600px;
これがcontent内の中央（center）の幅を指定しています。

#right {
float: left;
width: 150px;
background-color: #FFFFFF;
overflow: hidden;
}

width: 150px
これが、content内のrightの幅等を指定しています。

この二つのwidthの合計がcontentで指定したwidthより、
大きくならないようにします。

では、3段カラムにするには

#left {
float: left;
width: 150px;
background-color: #FFFFFF;
overflow: hidden;
}

これをCSSに追加します。このときもcontaineで指定したwidthより
大きくなってはいけませんので、containeでwidthを大きくするか
center、right、leftのwidthの合計値をcontaineで指定したwidthに
収まるように変更します。

今回はcontaineのwidthの幅を、追加したleftのwidthを足したものにしてみます。

#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 900px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

あまり、containeのwidthを大きく指定してしまうと、
1画面に収まりきらなくなるので注意しましょう。

#left {
float: left;
width: 150px;
background-color: #FFFFFF;
overflow: hidden;
}

をCSSの

#right {
float: left;
width: 150px;
background-color: #FFFFFF;
overflow: hidden;
}

の下（もしくは上）に追記し、再構築します。

次に、テンプレート > Main Indexを触ります。

<div id="right">
<div class="sidebar">

と、同じように

<div id="left">
<div class="sidebar">

と、追記してください。場所は
<div id="center">
<div class="content">
の上に記入します。

<div id="left">
<div class="sidebar">

ここに表示させたいものを書いてください。

</div>
</div>

<div id="center">
<div class="content">

ここはいじらなくてもいいです。

</div>
</div>

こんな感じです。
書き終わりましたら、テンプレートを保存し、再構築します。
以上で3段カラムの出来上がりです。

Triggers! SFC Bloggers Project: MovableType 3.0 Stylesheet Guide
というサイトで、MT3.0のスタイルシートの構造が解説されています。
図を使って構造を説明されていつので、非常に分かりやすいと思います。

Posted by tugaa | Comments (0) | Category( MovableType )
このエントリのTrackBack URL:

このエントリのPermalink: