2008年4月アーカイブ

その他と比べてやや複雑になるのが、サイドバーでよく見かける「新着コメントの一覧」。初期状態では、「投稿者名」「投稿された記事名」「コメントの冒頭部分」が1行で表示されているんですが、これ、非常に見づらい。そのソースがこれ。

<mt:IfNonZero tag="mt:BlogCommentCount"> <mt:Comments lastn="10" sort_order="descend"> <mt:CommentsHeader> <div class="widget-recent-comments widget"> <h3 class="widget-header">最近のコメント</h3> <div class="widget-content"> <ul class="recent-comments-list"> </mt:CommentsHeader> <li> <a href="<mt:CommentEntry><$mt:EntryPermalink$></mt:CommentEntry>#comment-<$mt:CommentID$>"><$mt:CommentAuthor$> から <mt:CommentEntry><$mt:EntryTitle$></mt:CommentEntry> に対するコメント</a>: <$mt:CommentBody remove_html="1" trim_to="10"$> </li> <mt:CommentsFooter> </ul> </div> </div> </mt:CommentsFooter> </mt:Comments> </mt:IfNonZero>

月別アーカイブ、別になくてもいいかなーなんて思ってますが、今後いろんなサイト（ブログ）を作っていくことを考えると、やっぱり一度は中身を見てみた方がいいかなと。ということで、初期状態での月別アーカイブはこんな感じ。

<mt:IfArchiveTypeEnabled archive_type="Monthly"> <mt:ArchiveList archive_type="Monthly"> <mt:ArchiveListHeader> <div class="widget-archive-monthly widget-archive widget"> <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3> <div class="widget-content"> <ul class="widget-list"> </mt:ArchiveListHeader> <li class="widget-list-item"><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$> (<$mt:ArchiveCount$>)</a></li> <mt:ArchiveListFooter> </ul> </div> </div> </mt:ArchiveListFooter> </mt:ArchiveList> </mt:IfArchiveTypeEnabled>

中身が単純な新着記事一覧とは異なり、トップカテゴリ、サブカテゴリがある分だけカテゴリの一覧は複雑になります。と言っても、タグの意味を理解していけばOKかと。

<mt:IfArchiveTypeEnabled archive_type="Category"> <div class="widget-archive widget-archive-category widget"> <h3 class="widget-header">カテゴリ</h3> <mt:TopLevelCategories> <mt:SubCatIsFirst> <ul class="widget-list"> </mt:SubCatIsFirst> <mt:IfNonZero tag="mt:CategoryCount"> <li class="widget-list-item"><a href="<$mt:CategoryArchiveLink$>"<mt:IfNonEmpty tag="mt:CategoryDescription"> title="<$mt:CategoryDescription$>"</mt:IfNonEmpty>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a> <mt:Else> <li class="widget-list-item"><$mt:CategoryLabel$> </mt:IfNonZero> <$mt:SubCatsRecurse$> </li> <mt:SubCatIsLast> </ul> </mt:SubCatIsLast> </mt:TopLevelCategories> </div> </mt:IfArchiveTypeEnabled>

検索フォームがカスタマイズできれば、あとはそんなに面倒なことはないはず。ってことで、続いてはサイドバーに設置する新着記事一覧部分。

<mt:IfNonZero tag="BlogEntryCount"> <mt:Entries lastn="10"> <mt:EntriesHeader> <div class="widget-recent-entries widget-archives widget"> <h3 class="widget-header">最近のブログ記事</h3> <div class="widget-content"> <ul class="widget-list"> </mt:EntriesHeader> <li class="widget-list-item"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li> <mt:EntriesFooter> </ul> </div> </div></mt:EntriesFooter> </mt:Entries> </mt:IfNonZero>

サイドバーも、メインスペース同様に初期テンプレートのソースを見ながら1個1個つぶしていくことにします。まずは検索フォーム。

<div class="widget-search widget"> <h3 class="widget-header">検索</h3> <div class="widget-content"> <form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>"> <input type="text" id="search" class="ti" name="search" value="<$mt:SearchString$>" /> <mt:If name="search_results_template"> <input type="hidden" name="IncludeBlogs" value="<$mt:SearchIncludeBlogs$>" /> <ul class="search-options"> <li><input type="checkbox" name="CaseSearch" /> 大文字/小文字を区別する</li> <li><input type="checkbox" name="RegexSearch" /> 正規表現</li> </ul> <mt:else> <input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" /> </mt:if> <input type="submit" accesskey="4" value="検索" /> </form> </div> </div> <mt:If name="search_results_template"> <mt:IfTagSearch> <div class="widget-tags widget"> <h3 class="widget-header">タグ</h3> <div class="widget-content"> <ul class="widget-list"> <mt:Tags> <li class="widget-list-item"><a href="<$mt:TagSearchLink$>"><$mt:TagName$> (<$mt:TagCount$>)</a></li> </mt:Tags> </ul> </div> </div> </mt:IfTagSearch> </mt:If>

メインスペース部分のカスタマイズが終わり、いよいよサイドバーに突入。第一弾はカテゴリ一覧部分のカスタマイズです。

初期状態のテンプレートでは、変数によって2段組、3段組を分岐させて読み込む内容を変更しているようです。で、サイドバーの内容は「ウィジェットセット」の管理ページで、掲載するもの／しないものをマウスのドラッグ＆ドロップで選択できる様子。

ヘッダーが出来上がると大分それっぽくなるんですが、ここでホッとせず次の作業へ。今度はメインページにダダダと並んでいる記事の部分です。例によって、初期状態のソースはこちら。

<MTEntries> <$MTEntryTrackbackData$> <div id="entry-<$MTEntryID$>" class="entry-asset asset hentry"> <div class="asset-header"> <h2 class="asset-name entry-title"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2> <div class="asset-meta"> <span class="byline vcard"> <MTIfNonEmpty tag="EntryAuthorDisplayName"> <address class="vcard author"><$MTEntryAuthorLink show_hcard="1"$></address> (<abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$>) <MTElse> <abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$></abbr> </MTIfNonEmpty> </span> <span class="separator">|</span> <a class="permalink" rel="bookmark" href="<$MTEntryPermalink$>">個別ページ</a> <MTUnless name="hide_counts" eq="1"> <MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive> <MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック(<$MTEntryTrackbackCount$>)</a></MTIfPingsActive> </MTUnless> </div> </div> <div class="asset-content entry-content"> <MTIfNonEmpty tag="EntryBody"> <div class="asset-body"> <$MTEntryBody$> </div> </MTIfNonEmpty> <MTIfTagSearch> <$MTInclude module="タグ"$> </MTIfTagSearch> <MTIfNonEmpty tag="EntryMore" convert_breaks="0"> <div class="asset-more-link"> <a rel="bookmark" href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>の続きを読む </div> </MTIfNonEmpty> </div> <div class="asset-footer"></div> </div> </MTEntries>

いよいよ具体的なパーツ作りにチャレンジ。まずはブログのヘッダー部分から。何はともあれ、初期状態でどーなってるのか見てみましょう。

<div id="header"> <MTIf name="main_index"> 　　　<h1 id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> 　　　<h2 id="header-description"><$MTBlogDescription$></h2> <MTElse> 　　　<div id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></div> 　　　<div id="header-description"><$MTBlogDescription$></div> </MTIf> </div>

HTMLヘッダーのカスタマイズが終わったので、ここからは実際に見える部分をカスタマイズしていきます。（MTというよりHTMLとかCSSとか、そっち方面の話題になっちゃいますが、私がカスタマイズする際の一連の流れということで掲載しちゃいます。）

初期状態のMTテンプレートでは、ヘッダーからフッターまでを「container」というidセレクタがついたDIVタグで内包しています。さらにその内側に複数のDIVタグを内包、それぞれについたセレクタに対応したスタイルシートで、メインスペースだのサイドバーだのがレイアウトされています。

HTMLヘッダーとは、<head>～</head>で囲まれた部分のこと。ここに文字コードの指定、ページのタイトル、METAタグ、スタイルシートへのリンク、配信するRSSへのリンクなどが入ります。（ここでは、1行目に記載するXML宣言からヘッダーということにしちゃいます。）

さて、モジュールが1つのテンプレートにまとまったところで、テンプレートをカスタマイズ（ってゆーか、私の場合、頭から打ち直していくんだけど。）を始めます。

と、その前に。

カスタマイズ前の状態がどんなだったか分からなくなってもアレなので、新たに「旧メインページ」というインデックステンプレートを作成、そこに、これまでのメインページの中身をそっくりコピペしました。で、出力先を「before.php」とでも指定して保存／再構築すれば、旧ページを残したまま新しいメインページをカスタマイズすることができます。

スタイルシートも同様に...と思ったんですが、私の場合、スタイルシートも一から組みなおしていくので、新たなページで使用するスタイルシートは別名で作成することにしました。

これで準備完了。ヘッダー（ソース上ではなく見た目の）から順次つくっていくことにします。

【カスタマイズ方針】
デザインは基本的に変えず、気に食わない部分（変な余白とか広すぎる幅とか余計なdivタグが入れ子になりまくっているソースとか）を修正していきます。
これができれば、どんなものを作ってもOKかと。

モジュール使うのやーめたと思ったとたん、道が開けてきました（笑）

モジュールと聞くとなにやらややこしそう、実際にソースを見てみると変数やらなんやらで実際にややこしい....ということで、メインページテンプレートで読み込まれるヘッダー、記事の概要、フッターの3モジュールを、メインページテンプレートにコピペ。これで1枚のテンプレート上に全てのソースが出揃ったことになります。

モジュール、使い方さえ分かれば管理が楽になるかもしれないんですが、MT4を触り始めて2日目で全てを理解するのは無理。ま、MT3.34と同様にテンプレートによって変更しない共通部分（例えばメニューバーとかコピーライトとか）をモジュール化するというのはありだと思うんですが、それはMT4的モジュールの使い方じゃないですしね。

実際にカスタマイズしたテンプレートを作ってみて、それをバラしていった方が理解も早まるような気がするし、とりあえず最初の段階ではモジュールなしにしてみました。

最初っから初心者用にモジュールなしのテンプレートにしてくれりゃよかったのに...。って、それじゃMT4の良さをアピールできないか。（それが良いところなのかは分かりませんが。）

まずはヘッダーモジュールからカスタマイズしようと思ってソースを見てみたんですが、いきなり面倒なことになってしまいました。。。

モジュールは「mt:setvarblock」というタグから始まってるんですが、これ、シックスアパートのリファレンスに載ってないんですよ。「MTSetVarBlock」ってのならあるんですが、これと一緒ってこと？.....と思って調べていったら、これ、どうやら変数によって書き込む内容を変更させるためのもののよう。

全テンプレート共通のモジュールとは言え、テンプレートごとに吐き出す内容を変えてるってことなんですね。。。。んなら最初からテンプレートに書き込んじゃえよ！みたいな。。。

先ほど、スタイルシートに独自の指定を追記したときにフと思いました。

MT4って、モジュールやらCSSのインポートやらでパッと見ややこしくなっちゃってるけど、
そんなん無視してテンプレートに直接書き込んでいけばいいんじゃ☆

ま、モジュールはモジュールで使い道がありそうなのでちゃんと覚えようと思いますが、システムフォルダ内からのインポートなんて普段は絶対使わね。CSSはテンプレートに直接書き込むことにしよう。うん。そっちの方がメンテナンスしやすいし。（てか、どこに置いてあるか分からないようなファイルなんていじりたくないし。）

試しに数記事書いてみたところで気づきました。
MT4のデフォルトテンプレートのCSSが激しくイケてません！！！

というのも、h3タグ、h4タグを入れても文字は大きくならないわ、dl、dt、ddタグを使っても右側にインデントができないわ。。。

dl、dt、ddはそんなに使うタグじゃないかもしれないけど、h3、h4あたりは普通に使うでしょうに。。。

イラッとしながらも、cssのテンプレートに下記のように追記。

p｛font-size:14px;margin:15px 0;line-height:150%;}
h3{margin:30px 0 15px;font-size:16px;font-weight:bold;}
h4{margin:15px 0;font-size:14px;font-weight:bold;}
dl{margin:15px 0;}
dt{font-weight:bold;}
dd{margin-left:40px;}

普通にCSSが書いてあればいいんだけど、MT4はシステムフォルダ内のファイルをインポートしてるので、ちょっとした修正ができません。ったく、使いづれぇ...。

とりあえず記事も投稿でき、アーカイブマッピングも変更できたので、早速テンプレートのカスタマイズに取りかかりたいと思います。

と、その前に。

MT3.34では、テンプレート管理画面でMTで利用するテンプレートの種類が分かるようになっています。（インデックスに8種類、アーカイブに3種類、システムに8種類の計19種類）MT4も同様にいくつかのカテゴリで分けられたテンプレートが存在します。（タブじゃなくなって分かりづらくなりましたが、テンプレート管理画面左側の「クイックフィルタ」がそれにあたります。）

カスタマイズするにしても、どんなテンプレートがあるのか知っておかないとね！ということで、MT4（ブログ）で使用するテンプレートをまとめてみることにしました。

新しく作ったブログに、試しに記事を投稿してみたところ、ちょっと気になるところがありました。それが、記事ページのURL。何も設定していない場合、記事URLは次のようになります。

http://www.hogehoge.com/2008/04/file_name.html

初期状態だと年月で階層分けされているんですね。これでいいという方はこれでいいのですが、私はこれまでカテゴリで階層を分けていたので、MT4でも同様にしたいなぁと。

http://www.hogehoge.com/category_name/file_name.html

で、MT3.34ならブログ設定画面の「公開」設定内でアーカイブマッピングを変更すれば、カテゴリによる階層分けができたのですが、MT4の設定画面にはそれがありません。

どこをいじれば変更できるのかと管理画面内で右往左往していたら、ようやく見つけました。

MT4をダウンロードしてサーバーにアップ⇒セットアップ。

これ、特に面倒なことはありませんでした。

ファイルが重すぎてFTPソフト「FFFTP」が固まったｗなんつートラブルはありましたが、全てのファイルをアップして拡張子cgiのファイルのパーミッションを755に設定しただけで、セットアップページに進むことができました。

MT3.34の場合、ファイルをアップする前に「config.cgi」を修正してあげなきゃいけなかったんですが、MT4ではconfigの設定もオンラインで。これは便利です＾＾

サイトの設定やアカウントの設定も問題なし。あっという間にブログを作ることができました。

ちなみに、MT4のアップ⇒セットアップの流れはMT入門・MT4のインストール／セットアップに詳しく書かれてまして、その通りにやったら問題なく作業が終了しました。

【追記】
1点だけ。config設定でSQliteを選択した場合、そのデータを格納する「db」というフォルダが必要になるのですが、「MT入門」には「しかし「db」フォルダは自動生成してくれるのか？」と書かれていました。

実際に試したところ、自動生成してくれないようなので、設定を始める前にMT4をアップしたフォルダに「db」という空のフォルダを作成するようにしましょう。

MT3.34で十分だ

MT4がリリースされてからずっとそう思ってましたし、この記事を書いている現在もそう思ってるんですが、MT4を知らないままってゆーのもアレだなーと重い、意を決してMT4をアップしました。

ま、デフォルトのテンプレートを見ればカスタマイズなんてなんとでもなるわ！と思っていたんですが、開けてビックリ玉手箱。管理画面がガラッと変わって操作は分からないわ、やっとの思いでテンプレートの中身を見てもMT3.34とは全然違うわ.....。

こりゃイチから勉強しなきゃ使いこなせねーな....ということで、このブログを立ち上げたのでした。

さ、どのくらいでMT4をいっぱしに使えるようになるでしょうか。。。