Movable Type 4 (MT4) カスタマイズ奮闘記

サイドバー／新着コメント一覧のカスタマイズ

Sun, 06 Apr 2008 16:18:36 +0900

その他と比べてやや複雑になるのが、サイドバーでよく見かける「新着コメントの一覧」。初期状態では、「投稿者名」「投稿された記事名」「コメントの冒頭部分」が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>

サイドバー／月別アーカイブのカスタマイズ

Sun, 06 Apr 2008 15:18:45 +0900

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

<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>

サイドバー／カテゴリ一覧のカスタマイズ

Fri, 04 Apr 2008 16:21:24 +0900

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

サイドバー／新着記事一覧のカスタマイズ

Fri, 04 Apr 2008 16:04:02 +0900

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

<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>

サイドバー／検索フォームのカスタマイズ

Fri, 04 Apr 2008 15:15:05 +0900

サイドバーも、メインスペース同様に初期テンプレートのソースを見ながら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>

サイドバーのカスタマイズ

Fri, 04 Apr 2008 14:55:26 +0900

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

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

メインページ記事部分のカスタマイズ

Fri, 04 Apr 2008 12:33:46 +0900

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

<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>

ブログヘッダーのカスタマイズ

Fri, 04 Apr 2008 11:11:38 +0900

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

<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>

レイアウト枠のカスタマイズ

Fri, 04 Apr 2008 10:46:32 +0900

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

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

HTMLヘッダーのカスタマイズ

Thu, 03 Apr 2008 18:54:20 +0900

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

テンプレート作成前に旧ページを保存

Thu, 03 Apr 2008 18:45:19 +0900

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

と、その前に。

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

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

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

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

3つのモジュールを1つのテンプレートに貼り付け

Thu, 03 Apr 2008 18:34:47 +0900

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

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

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

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

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

ヘッダーモジュール使うのやーめた

Thu, 03 Apr 2008 17:07:30 +0900

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

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

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

インポートしなきゃいいんじゃん

Thu, 03 Apr 2008 15:18:15 +0900

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

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

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

MT4デフォルトテンプレートのCSSがイケてない

Thu, 03 Apr 2008 14:43:23 +0900

試しに数記事書いてみたところで気づきました。
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はシステムフォルダ内のファイルをインポートしてるので、ちょっとした修正ができません。ったく、使いづれぇ...。