Movable Type 4 (MT4) カスタマイズ奮闘記: テンプレートのカスタマイズアーカイブ

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

(2008年4月 6日 16:18) | 個別ページ | コメント(0) | トラックバック(0)

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

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

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

うか

(2008年4月 6日 15:18) | 個別ページ | コメント(0) | トラックバック(0)

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

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

サイドバー／月別アーカイブのカスタマイズの続きを読む

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

うか

(2008年4月 4日 16:21) | 個別ページ | コメント(2) | トラックバック(0)

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

サイドバー／カテゴリ一覧のカスタマイズの続きを読む

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

うか

(2008年4月 4日 16:04) | 個別ページ | コメント(0) | トラックバック(0)

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

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

サイドバー／新着記事一覧のカスタマイズの続きを読む

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

うか

(2008年4月 4日 15:15) | 個別ページ | コメント(0) | トラックバック(0)

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

サイドバー／検索フォームのカスタマイズの続きを読む

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

うか

(2008年4月 4日 14:55) | 個別ページ | コメント(0) | トラックバック(0)

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

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

サイドバーのカスタマイズの続きを読む

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

うか

(2008年4月 4日 12:33) | 個別ページ | コメント(0) | トラックバック(0)

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

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

メインページ記事部分のカスタマイズの続きを読む

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

うか

(2008年4月 4日 11:11) | 個別ページ | コメント(0) | トラックバック(0)

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

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

ブログヘッダーのカスタマイズの続きを読む