アーカイブインデックスで記事一覧[MT5]

2012年6月12日

MTにはアーカイブインデックスがあるんやけど、それを表示すると、うちの場合は、カテゴリー一覧月別一覧ブログ記事一覧が表示されていた。

これってなんかもうちょっとスッキリした形で見せる方法ってないん?と思って、全ブログ記事表示をちょっと調べました。

カテゴリー一覧ブログ記事一覧は一体化して、月別一覧はサイドバーにすでに表示されてるので、削除する方向で。

かなり古い記事やけど、参考にさせてもらいました。

[参考にしたエントリー]

WEBデザイン BLOG>>MTで自動的に階層式サイトマップを構築する

 

試行錯誤しました 

 1)新しいテンプレートモジュールを作成し、下記を記述して適当な名前を付けて保存(うちの場合は「全記事」という名前にしました)。

<MTIfArchiveTypeEnabled archive_type="Category">
<h2 class="archive-title">記事一覧</h2>
<div class="entry">
<ul class="all">
<li><a href="<$MTBlogURL$>" title="<$MTBlogDescription$>">Home</a>
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
</MTElse>
</MTIfNonZero>
<ul>
<MTEntries>
<li>[<$mt:ArchiveDate format="%Y.%m.%d."$>] <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</li>
<li><a href="<$MTBlogURL$>tagcloud.php" title="タグクラウド">タグクラウド</a></li>
</ul>
</div>
</MTIfArchiveTypeEnabled>

 公開されているソースをちょっといじりました。記事に日付を表示したことと、記事が存在するカテゴリーには、その記事数が表示されるようにしたことの2点です。

 

2)次に、インデックステンプレートアーカイブインデックスのコピーを作ります(アーカイブインデックスをそのまま使ってもいいですが)。

記述の中の赤字の部分をドッサリ削除して・・・

<div id="content">
<div class="blog">
<mt:IfArchiveTypeEnabled archive_type="Category">
<h2 class="date">カテゴリー一覧</h2>
 
(略)

  </mt:ArchiveList>
</mt:IfArchiveTypeEnabled>
</div>
</div>

青字の部分を追加します。

<div id="content">
<div class="blog">

<mt:include module="全記事" />

</div>
</div>

 

3)用意されてる画像をいただいて(li.gifは横の寸法を縮めました)、サーバーにUPします。imagesフォルダにUPしました。

ul.gifli.gif

 

4)そして、スタイルシートに以下の記述を。

.archive-title {
    color: #36414d;
    background: #ffefdf;
    padding: 5px 10px 0 10px;
    margin-bottom: 15px;
    font-size: 83.3%;
    height: 17px;
    width: auto;
}
ul.all {
    padding: 0px;
    margin: 0px;
}
ul.all li {
    margin: 0px;
    padding-left: 18px;
    list-style: none;
}
ul.all li ul {
    margin: 0px;
    padding: 0px;
    background-position: -1px 15px;
    background-image: url('images/ul.gif');
    background-repeat: repeat-y
}
ul.all li li {
    background-position: 8px 5px;
    background-image: url('images/li.gif');
    background-repeat: no-repeat;
}

 

5)んで仕上がった様子。

120612-01.gif

なかなかええ感じに仕上がった。

このままやと、記事が増えてくると、どんどん下に伸びるだけなので、またそうなったら他の手を考えてみようかと思います。

タグクラウドをいじる[MT5]

2012年6月 6日

長いこと、いじろうと思っててほったらかしになってたタグクラウドをいじることにしました。

一応2011年5月31日の記事で、自分が描いてたタグクラウドが表示されていたので、それはそれでよかったんです。

記事を書くたびにタグはきっちり付けていこうと思っていたので、その数はどんどん増えていくだろうと思っていました。実際増えていってます。

そこで、トップページには少数のタグだけ表示しておき、全部のタグ別のページに表示したいと前から思ってたわけです。で、ほったらかしになってたんですな。

↓ これが現在の状態。「もっと見る」のリンクは貼られていません。

 120606-01.gif

 

あら?削除されてる

それで、以前からちょくちょく参考にさせていただいてたブログがありまして、別ページにタグクラウドを表示するってことをされてました。bzbellさんのMovable Type 備忘録というブログだったんですが、削除されていて表示できませんでした。

実は6/4に書いた「関連記事を付けてみた」で使用したプラグインが、このタグクラウドを別ページに表示させる方法でも使われていたのです。一石二鳥!っと思ってたのに。

でまぁ、色々検索してみたんやけど・・・実際にページに施したって人は見つかったけど、とうとう詳しくはわかりませんでした。

もう1つの問題はトップページのそのタグクラウド、8段階40単語表示なんやけども、現在名前順に並んでいます。数ある中から抜粋して40個出してるのに、名前順て!と思うことです。リファレンスにも 書いてますが、他のソート方法はあるけど、あまり良さそうじゃないな~って感じ。

 

結論

  • 別ページ表示の全タグは、最初何か凝ろうと思ってたけど、それはやめて、名前順にして普通に表示。
  • トップページのタグクラウドは、なにか違った条件でソートするようにする。

・・・となりました。

 

別ページに全タグ表示

この方法が正しいかということは置いといて、うまく表示できたのでその方法を。

1)インデックステンプレートでアーカイブインデックスにチェックを入れ、「テンプレートの複製」をする。コピーが出来上がる。

2)コピーを開いて、下記のように書き換える。

  •  タイトル: タグ一覧
  • 出力ファイル名: tagcloud.php
  • 種類: アーカイブインデックス 

内容は、赤字部分をゴッソリ削除し、ウィジェット「タグクラウド」の青字部分を入れ替えて保存。

<div id="content">
<div class="blog">
<mt:IfArchiveTypeEnabled archive_type="Category">
…
</mt:IfArchiveTypeEnabled>
</div>
</div>

<div id="content">
<div class="blog">
<ul id="tags">
<mt:tags limit="0" sort_by="name">
    <li class="module-list-item taglevel<mt:tagRank max="8" />">
        <a href="<mt:tagSearchLink />"><mt:tagName /></a>
    </li>
</mt:tags>
  </ul>
</div>
</div>

 

 トップページのタグクラウド変更

最新記事に使われたタグを表示することにしました。

[参考サイト]

最新10件の記事で使われているタグのうち5つのタグをタグクラウドで表示

ウィジェットのタグクラウドで、赤字部分を青字部分に書き換え。変更は、20単語表示にしていることと、すでに記述されているスタイルシートでスタイルが反映されるようにしました。

<dd class="side">
<ul id="tags">
<mt:tags limit="40" sort_by="name">
    <li class="module-list-item taglevel<mt:tagRank max="8" />">
        <a href="<mt:tagSearchLink />"><mt:tagName /></a>
    </li>
</mt:tags>
  </ul>
</dd>

<dd class="side">
<MTSetVar name="i" value="20">
<MTEntries lastn="30">
<MTEntryTags>
    <$MTTagName setvar="tagname"$>
        <MTUnless name="seen{$tagname}">
        <MTIf name="i" gt="0">
            <MTSetVar name="i" op="--">
            <MTSetVar name="seen" key="$tagname" value="1">
            <MTSetVarBlock name="push(tag_htmls)">
                <li class="module-list-item taglevel<$mt:TagRank max="8"$>"><a href="<$mt:TagSearchLink$>"><$mt:TagName$></a></li>
            </MTSetVarBlock>
        </MTIf>
        </MTUnless>
    </MTEntryTags>
    </MTEntries>
       <ul id="tags">
        <MTLoop name="tag_htmls">
            <MTVar name="__value__">
        </MTLoop>
       </ul>
</dd>

↓ 仕上がった感じ。

 120606-02.gif

 

仕上げ

ちょっと文字が詰まってしまってるので、スタイルシートを変更して間隔を開けて、下のような背景を用意して、隙間を埋めました。赤字が変更部分。

ul#tags {
    margin-top: 5px;
    padding: 0.5em 0px;
    line-height: 1.3;
    background-image: url(<$mt:BlogURL$>image/tagback.gif);
}

↓ 使用背景。ゴチャゴチャ感が出ますね。

 120606-03.gif

↓ 仕上がった感じ

 120606-04.gif

フッターのせり上がりの修正[MT5]

2011年6月16日

ちょっと前から気付いていたことがある。

何かのタイミングで、フッターがせり上がってしまう現象が起こるのである。main-boxのブロックを追加したのが原因なのかもしれない。こんな感じ。↓

110616-03.jpg

 

いつも参考にさせてもらってるサイトがある。今回もお世話になった。

WEB工房きくちゃん

CSSテクニック>>フッターを画面の下に表示

 

スタイルシートの修正

フッターをコンテナで囲み、id=footにして、早速、スタイルシートに以下を記述。青字が追加分。

html{
    height: 100%;
}
body {
    font-size: 100%;
    height: 100%;
}
html>body {
    font-size: 12pt;
}
#main-box {
    margin-right: auto;
    margin-left: auto;
    border-left: 5px solid #ff9999;
    border-right: 5px solid #ff9999;
    height: 100%;
    width: 872px;
    text-align: center;
    min-height: 100%;
}
body > #main-box {
    height: auto;
}

/* フッタ */
#foot{
    border-left: 1px solid #cc00cc;
    border-right: 1px solid #cc00cc;
    background: #ffcc99;
    text-align: center;
    bottom:0px;
    height:42px;
}
.layout-one-column #footer,
.layout-three-column #footer,
.layout-three-column-right #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer,
.layout-one-column-liquid #footer {
    height: 42px;
    color: #333333;
    font-size: 12px;
    line-height: 3.5;
}

一応直ったけど、他に方法あるんかもしれん・・・。think