2004年 7月 1日(木)

記事一覧を作成

ページの構成が分かりにくくなりがちなblogを少しでも分かりやすくするために記事一覧を作成しました。

構成としてはすべての記事の新着4件を表示するページ→それぞれの記事の一覧を表示するページとなっています。
Webページではこの形の方が多く、馴染みのある構成だと思います。

phpインクルードを使っているので、php化を行っている必要があります。注意して下さい。

まず、それぞれの記事の新着4件を表示するためのページを作成します。
「Templateの編集→新しいアーカイブ・テンプレートを作る」より

テンプレートの名前: CategoryList Archive
このテンプレートにリンクするファイル: template/categorylistarchive.tmpl←ここは空でも良いです。

テンプレートの中身:
<MTArchive>
<div class="blogbody">
<h3 class="title">
<$MTCategoryDescription$></h3></MTArchive><br />
<MTEntries lastn="4">
<div class="Itirantitle">
<font color= "#e56e2c" size="1">&#9655;</font>&nbsp;<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</div><br />
</MTEntries>
<div class="beforetitle">
<font color= "#e56e2c" size="1">→</font>&nbsp;<a class="b" href="archives/cat/<$MTArchiveCategory dirify="1"$>_listall.php">更に前の記事へ</a>
</div>
</div>

次に、これを表示するメインとなるページを作成します。青字部分が該当箇所です。
「Templateの編集→新しいインデックス・テンプレートを作る」より

テンプレートの名前: CategoryList
出力ファイル名: categorylist.php
〜を自動的に再構築する : チェックを入れる
このテンプレートにリンクするファイル: template/categorylist.tmpl←ここは空でも良いです。

テンプレートの中身:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>; lang=ja" /-->
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP; lang=ja">

<title><$MTBlogName$>: カテゴリーリスト</title>

<!--link rel="stylesheet" href="<$MTBlogURL$>template/styles-site.css" type="text/css" /-->
<!--link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" /-->
<!--link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" /-->
<link rel="stylesheet" href="template/styles-site.css" type="text/css">

<script language="javascript" type="text/javascript">
function OpenComments (c) {
window.open(c,
'comments',
'width=480,height=480,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
window.open(c,
'trackback',
'width=480,height=480,scrollbars=yes,status=yes');
}
</script>

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>


<body>
<!-- inbox Begin -->
<div id="inbox">
<!-- banner Begin -->
<a href="http://aze.s59.xrea.com/blog/" accesskey="1">
<img src="archives/images/title2.gif" width="800" height="237" border="0">
</a>
<!-- banner End -->

<!-- linksModule Start -->
<? include("module/linksModule.php"); ?>
<!-- linksModule End -->

<!-- container Begin -->
<div id="container">

<div class="blog">
<div id="menu">
<a href="<$MTBlogURL$>">トップページ</a>
</div>
<div id="container-l">

<MTCategories show_empty="1">
<MTFilterCategories include="000150-KadenAVkiki|000175-PC|000200-soft|000300-html/css">
<!-- linksModule Start -->
<? include("archives/cat/<$MTArchiveCategory dirify="1"$>_list.php"); ?>
<!-- linksModule End -->
</MTFilterCategories>
</MTCategories>
</div>
</div>
<!-- Container-l End -->
<div id="container-r">

<MTCategories show_empty="1">
<MTFilterCategories include="000400-Movable Type|000450-Eiga|000500-Nikki|000600-etc.">
<!-- linksModule Start -->
<? include("archives/cat/<$MTArchiveCategory dirify="1"$>_list.php"); ?>
<!-- linksModule End -->
</MTFilterCategories>
</MTCategories>
</div>
<!-- Container-r End -->
</div>
<!-- Container End -->

<!-- footer Begin -->
<div id="footer">
<a href="http://www.movabletype.org">
<img title="Movable Type <$MTVersion$>" alt="Movable Type <$MTVersion$>" src="<$MTCGIPath$>images/powered.gif" width="128" height="22" border="0" />

</a>&nbsp;
<a href="http://hinagata.biz/jp/">
<img alt="HINAGATA 3column 1.0" title="HINAGATA 3column 1.0" src="http://hinagata.biz/hinagata.png" width="128" height="22" border="0" />

</a>
</div>
<!-- footer End -->

</div>
</div>
<!-- Inbox End -->
</body>
</html>

そして、それぞれの記事の一覧を表示するページを作成します。青字部分が該当箇所です。
「Templateの編集→新しいアーカイブ・テンプレートを作る」より

テンプレートの名前: CategoryListAll Archive
このテンプレートにリンクするファイル: template/categorylistall.tmpl←ここは空でも良いです。

テンプレートの中身:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title><$MTBlogName$></title>

<link rel="stylesheet" href="<$MTBlogURL$>template/styles-site.css" type="text/css" />

<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />

<script language="javascript" type="text/javascript">
function OpenComments (c) {
window.open(c,
'comments',
'width=480,height=480,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
window.open(c,
'trackback',
'width=480,height=480,scrollbars=yes,status=yes');
}
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
</script>

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>

<body>

<!-- inbox Begin -->
<div id="inbox">

<!-- banner Begin -->
<a href="http://aze.s59.xrea.com/blog/" accesskey="1">
<img src="../../archives/images/title2.gif" width="800" height="237" border="0">
</a>
<!-- banner End -->

<!-- linksModule Start -->
<? include("../../module/linksModule.php"); ?>
<!-- linksModule End -->

<!-- container Begin -->
<div id="container">

<div class="blog">

<div id="menu">
<a href="<$MTBlogURL$>">トップページ</a>
</div>

<div class="blogbody">
<!-- エントリ一覧 Start -->
<h3 class="title"><MTArchive><$MTCategoryDescription$>の記事一覧</MTArchive></h3><br />
<MTEntries>
<div class="Itirantitle">
<font color= "#e56e2c">&#9655;</font>&nbsp;<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</div>
<div class="date2">
<MTDatej>
<$MTDatejYear$>年 <$MTDatejMonth$>月 <$MTDatejDay$>日(<$MTDatejYoubi$>)
</MTDatej>
&nbsp;|&nbsp;<a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false"><$MTEntryCommentCount$> コメント </a>
&nbsp;|&nbsp;<a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&amp;entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false"><$MTEntryTrackbackCount$> トラックバック</a>
</div>
</MTEntries>
<!-- エントリ一覧 End -->
<div class="beforetitle">
<font color= "#e56e2c" size="1">→</font>&nbsp;<a class="b" href="../../categorylist.php">カテゴリリストへ</a>
</div>
</div>

</div>
</div>
<!-- Content End -->

<!-- footer Begin -->

<div id="footer">
<a href="http://www.movabletype.org">
<img title="Movable Type <$MTVersion$>" alt="Movable Type <$MTVersion$>" src="<$MTCGIPath$>images/powered.gif" width="128" height="22" border="0" />

</a>&nbsp;
<a href="http://hinagata.biz/jp/">
<img alt="HINAGATA 3column 1.0" title="HINAGATA 3column 1.0" src="http://hinagata.biz/hinagata.png" width="128" height="22" border="0" />

</a>
</div>
<!-- footer End -->

</div>
<!-- inbox End -->

</body>
</html>

そして、「Blogの設定→アーカイブの設定→新しく追加」より以下の2つを追加します。
1.

アーカイブの種類:Category
テンプレート: CategoryList Archive
アーカイブ・ファイルのテンプレート: cat/<$MTArchiveCategory dirify="1"$>_list.php

2.
アーカイブの種類:Category
テンプレート: CategoryListAll Archive
アーカイブ・ファイルのテンプレート: cat/<$MTArchiveCategory dirify="1"$>_listall.php

そして、スタイルシートに

#container {
border-left: 1px solid #e5e5e5;
margin: 5px 5px 0px 175px;
padding: 0px 10px 0px 5px;
}

#container-l {
float: left;
width: 286px;
padding: 0px 10px 0px 5px;
}

#container-r {
float: right;
border-left: 1px solid #e5e5e5;
width: 286px;
padding: 0px 5px 0px 10px;
}


を追加します。

赤字部分は各自、カテゴリ名を設定して下さい。

プラグインとして、FilterCategories.pl、mt-datej.pl、mt-trimj.plを使っています。

これで再構築すればできあがりです。
http://あなたのアドレス/categorylist.php
が作られていると思います。

なお、試行錯誤しながら作ったものなのでどこか間違っている点&工夫点がありましたらコメントお願いします。

投稿者: aze | ジャンル: Movable Type | 5 トラックバック | 個別記事 | 11:43
TrackBack
TrackBack URL :
gift ideas unique
Excerpt: gift ideas unique http://azgifts.net/gift-ideas-unique.html
Weblog: gift ideas unique
Tracked: 2006年10月27日 14:09
fJxBZsbKDw
Excerpt: vEFUSV OxTVujCJHvPPj [URL=http://ryhzpdtw.com/]rwrolNe[/URL]
Weblog: YSQMxKWXwE
Tracked: 2007年05月03日 17:29
ew2hon8z
Excerpt: ew2hon8z cheap ambien http://www.application2.au.edu/script/nurse/webboard/GetMessage.asp?ID=1038&RoomID=71
Weblog: ew2hon8z
Tracked: 2007年06月22日 07:21
abbigliamento uomo cavalli
Excerpt: abbigliamento uomo cavalli http://inornate.info/html/abbigliamento-uomo/ abbigliamento uomo cavalli abbigliamento uomo cavalli abbig...
Weblog: abbigliamento uomo cavalli
Tracked: 2007年08月23日 12:13
www papirazzo com
Excerpt: www papirazzo com http://olnoel.125mb.com/img/styles/www-papirazzo.htm www papirazzo com www papirazzo com www papiraz...
Weblog: www papirazzo com
Tracked: 2007年09月06日 14:53