MovableType：MT・XOOPS・CSS初心者カスタマイズMemo

MTのレイアウトや内容の変更をする時、
メインページやカテゴリーページなど同じ訂正を数回しないといけません。
これを一発で変更できる方法がモジュールにしちゃえー！なのです。

<$MTInclude module="★★★"$>　タグを使います。

「テンプレート」-「モジュール」で新規作成。

例えばヘッダー部分(タイトルバナー部分等)を一発変換したい場合、
ヘッダー部分のタグすべてをモジュールにコピペします。
そしてアルファベット限定のタイトルをつけます。
例えば「header」とします。

これでモジュールのほうは保存でOK。

それぞれのテンプレートには
「header」の場合

<!--ヘッダー-->
<$MTInclude module="header"$>
<!--/ヘッダー-->

こんな感じになります。
そしてヘッダー部分の最初にあったタグと入れ替えたらOKです。

これでヘッダー部分に変更があった場合、
モジュールの「header」を修正するだけですむようなります。

ヘッダー、フッター、３カラムなど、各パーツ別に作ると便利ですよ。

↓こんな感じです。私はヘッダー部分を「バナーとナビ」にしてみました。

<!--コンテンツ・バナーとナビ-->
<$MTInclude module="banner-nav"$>
<!--/コンテンツ・バナーとナビ-->

<!--コンテンツ左-->
<$MTInclude module="alpha(left)"$>
<!--/コンテンツ左-->

<!--コンテンツ右-->
<$MTInclude module="gamma(right)"$>
<!--/コンテンツ右-->

<!--フッター-->
<$MTInclude module="footer"$>
<!--/フッター-->

元のスタイルのままだとあまりにもタイトルと記事との間が狭かったので

広げてみました。

スタイルシートの記事部分、

　　　　　.entry-content { margin: 5px 0;
　　　　　　　↓
　　　　　.entry-content { margin: 20px 0;

に変えたらできました。この場合、記事の上下が20pｘあくという意味です。

下は空けたくないときは　20px 0px 0px 0px とそれぞれ指定すればOK。

.date-header
{
margin: 5px 17px 0 0;
padding: 0 0 5px 0;
color: #09c;
font-size: 11px;
text-transform: uppercase;
}
/* 記事タイトル */
.entry-header
{
margin: 5px 0;
padding: 15px 0 0 33px;
background: url(maru.gif) 0 0.20em no-repeat;
color: #6f6fff;
font-size: 18px;
font-weight: bold;
}

.entry-content { margin: 20px 0;
}

記事について、日付順に並んでいますが、
古い順・新しい順をそれぞれテンプレートごとに変える方法です。

テンプレートの記事部分にある(３カラムだと「beta」部分)

<MTEntries sort_by="created_on" sort_order="descend">　のところ。

　　　　　ascend：昇順(古い順)
　　　　 descend：降順(新しい順)

これを変える事により「設定画面」で指定した表示順は無視されます。

<div id="beta">
<div id="beta-inner" class="pkg">
<p class="content-nav">
<a href="<$MTBlogURL$>">メイン</a>
</p>
<!-- <h5 id="archive-title">++<$MTArchiveTitle$>++</h5> -->
<h5 id="archive-title">++<$MTCategoryDescription$>++</h5>

<MTEntries sort_by="created_on" sort_order="descend">
<$MTEntryTrackbackData$>

カテゴリ別に表示されるページのトップにカテゴリ名がありますが
そのカテゴリ名をカスタマイズします。

カテゴリーアーカイブのテンプレート内の記事の表示される部分の上にあります。
私の場合は「bete」部分。

<$MTArchiveTitle$>を探します。
そのフォントの大きさ太さなどはスタイルシートに連動します。
私の場合はF5の変更して小さめにしました。

そして<$MTArchiveTitle$>の両サイドに「++」をつけて飾りをつけました。
(このブログと違うブログです)

このままだと、カテゴリ名の前につけた「01」などの数字が表示されたままなので
<$MTArchiveTitle$>を<$MTCategoryDescription$>に変更しました。

これで数字部分が消えます。

こんな感じです。
(念のため、もともとのMTタグは<!-- -->ではさんで保存しておきます。)

<div id="beta">
<div id="beta-inner" class="pkg">
<p class="content-nav"> <a href="<$MTBlogURL$>">メイン</a>
</p>
<!-- <h5 id="archive-title">++<$MTArchiveTitle$>++</h5> -->
<h5 id="archive-title">++<$MTCategoryDescription$>++</h5>

タイトルバー(一番上部の青い帯のことです)なのですが、
ページタイトルを前に持ってきたほうがSEO的には有利になるようです。

<title><$MTArchiveTitle$> : <$MTBlogName encode_html="1"$></title>

このように順番を逆にすると普通はOKなのですが、
前述の前述の「カテゴリーをお好み順にする方法」だとカテゴリーページが

「01日記 : サイトタイトル」となって数字がじゃまですよね。

そこで、　　　　　　　　　　　　

<title><$MTCategoryDescription$> : <$MTBlogName encode_html="1"$></title>

このようにカテゴリの説明欄に書いた文字が表示されるタグ

<$MTCategoryDescription$>に変えます。

これで数字が消えて「日記 : サイトタイトル」という形になります。

　　　　　　

カテゴリは普通に日本語で登録していくと決まった法則で勝手に並んでしまいます。
それをお好みの順番に表示させる方法です。

テーマによっては最初から入っています。

★まずはカテゴリを表示させたい順番で数字を頭に入れて登録します。

　　　例えば・・・01日記　　です。　サブカテゴリは・・・011子供　　など

★説明のところに表示させたい言葉を入れます。

　　　例えば・・・日記　　サブカテゴリ・・・子供　(数字を取っただけです)

それぞれのテンプレートのカテゴリーの部分の

<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>

　　　　　　　　　　　　　↓のところをこっちに変えます。

<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a>（<$MTArchiveCount$>）

こうすると説明部分が表示されるようになります。
もちろんカテゴリと説明はちがった言葉でもOKです。

StyleCatcherで取り込んだスタイルシートは
１度自分のローカルサーバにダウンロードして変更します。

/ユーザーディレクトリ/mt/mt-static/themes　を開くとあります。

そのファイルごとを自分のPCにダウンロードします。

このフォルダにあるｃｓｓファイルをベースに新たに作っていきます。
フォルダも新しく「theme-任意の名前」でつけます。
ｃｓｓの２行目に　name:があるのでｃｓｓ名を書きます。

カスタマイズができたら、先ほどの
/ユーザーディレクトリ/mt/mt-static/themesに
フォルダごとアップロードします。

StyleCatcherの設定画面を見ると新しく作ったスタイルシート枠ができています。
サムネイル画像は自分で作らないといけないので
プリントスクリーンを利用して、大と小の画像を作ります。

で、先ほどアップロードしたフォルダにアップすると画像が出ます。
それぞれ名前は「thumbnail-large.gif」(280×210px)と「thumbnail.gif」(120×84px)です。

これでオリジナルなテーマができました。

前後してますが私はここからｃｓｓ触っていきますｗ

基本は２カラムになっています。

３カラムにするには・・・

テンプレートの「alpha」と「beta」を操作します。

betaの部分全体をコピーし、alphaの直前に貼り付けます。

で、「alpha」と「beta」の名前を書き換える。
２行目の「alpha-inner」のところも変える。

もともとあったbetaのところは「gamma」と言う名で書き換える。

そして忘れてはいけないのが、上のほう</head>の下にある
<body class="layout-two-column-right main-index">
　　　　を
<body class="layout-three-column main-index">
　　　　に変更すること！これで完璧！

あとプラグインの差し替えは自由です。

スタイルシートで変更します。

基本は720pxなので、その部分を探してサイズ変更します。

あと、どのカラムの幅を変更するかによって違いますが、

その部分の「widｔｈ」を見つけて変更します。

例えば真ん中のカラムだと

.layout-three-column #beta
{
margin: 15px 15px 0 15px;
width: 320px;
background: none;

の320のところを変えます。

私の場合横幅を800pxにしたので、中央コラムは400pxにしました。

そのままでは日記はいちいち未公開から公開に変更しないと
保存だけで反映されません。

ややこしいところに設定できるところがあります。

左サイドの環境設定の「設定」→右上のほうの「詳細モードに切り替え」で

「設定」と「プラグイン」だけだったタブが
「新規投稿」「コメント/トラックバック」「公開」と３つ増えます。

「新規投稿」をクリックし、「公開」に変更しておきましょう。
非公開にする時のみ、その都度エントリー画面で変更するほうが簡単ですよね。

その下の「改行を変換する」とは
ブログはタグがそのまま反映されるものが多い(MTも)のですが、
改行はいちいち入れなくてもこの機能だと
が入った状態と同じ処理をしてくれるって
ことですよね。

HP作成ソフトなどで作ったものを貼り付ける場合などは
この設定をはずさないとえらい間延びした感じになってしまいます。

この２つともエントリー画面の下のほうの「画面の表示設定を変更」をクリックしたら
出てきます。
細かい設定をその都度する場合はこちらの画面にしておいたほうが
楽かなあと私は思います。全てを選んでいます。

投稿日時も変更できます。