アーカイブページのリストの表示内容が異なる理由
「サイドバーの表示をメインページと同じにする」の続きです。
前述のエントリーでは、サイドバーにある各メニューの MTIf タグを外す方法を記しましたが、これだけでは全てのページでサイドバーが同じ表示にはなりません。具体的には、「最近のエントリー」「最近のコメント」「最近のトラックバック」の3つのリストの表示が、アーカイブによって異なります。
理由は、リスト表示に使われるテンプレートタグ(MTEntries 等)がアーカイブの種類に依存した振る舞いをしているためです。全てが依存している訳ではありませんので、具体的な結果については後述します。
これは不具合ではなく、Movable Type の仕様と思われますが、見落としていなければMovable Type ドキュメントには明示的な記述はありません。したがってこれらのリスト類がどのように表示されるか、実際に設定してみないと分からない訳です。
ということで、このエントリーでは、メインページに設定しているリストを各アーカイブページに設定した場合の結果と、それらを回避する方法について記します。
1.「最近のエントリー」「最近のコメント」「最近のトラックバック」のアーカイブページの表示結果
公開テンプレートを例に、メインページに設定してある「最近のエントリー」「最近のコメント」「最近のトラックバック」と同じMTタグを各アーカイブページに設定した場合の表示がどのようになるかを、下記の一覧にまとめました。
| 最近の エントリー | 最近の コメント | 最近の トラックバック | |
|---|---|---|---|
| カテゴリー・アーカイブ | 該当カテゴリーのエントリー一覧 | [MTEntries recently_commented_on指定] 該当カテゴリーの全エントリーのコメントをMTCommentsのlastn分表示 [MTEntries lastn指定] コメントのないエントリー含めlastn分表示 | 表示されない |
| 月別アーカイブ | 該当月のエントリー一覧 | [MTEntries recently_commented_on指定] 該当月の全エントリー・コメントをMTCommentsのlastn分表示 [MTEntries lastn指定] 該当月のコメントのないエントリー含めlastn分表示 | メインページと同様 |
| ブログ記事アーカイブ | メインページと同様 | メインページと同様 | 該当エントリーのトラックバック一覧 |
ちょっと分かりにくいですが、メインページと同じ表示になるのは、
- 月別アーカイブ:「最近のトラックバック」
- ブログ記事アーカイブ:「最近のエントリー」「最近のコメント」
の3パターンのみです。
2.考察
それぞれのリストが、各アーカイブでどのように振舞っているかをまとめました。
最近のエントリー・最近のコメント
「ブログ記事リスト」として再構築される場合は、テンプレートの種別に依存した表示になります。ブログ記事やウェブページといった単一ページではテンプレート種別に依存しません。
最近のトラックバック
そもそも Movable Type におけるトラックバックは、「ブログ記事」あるいは「カテゴリー」に対応した情報です。したがって、ブログ記事リスト・カテゴリーアーカイブとして再構築される場合は、テンプレート種別に依存した表示が自然です。
月別アーカイブでメインページと同じ表示になるのは、トラックバックが「日付」というアーカイブ種別に依存しない性質の情報だからです。
なお、上記の表では、カテゴリーアーカイブでは「最近のトラックバックが表示されない」と記しましたが、実はカテゴリー単位にトラックバック設定があり、ブログ管理画面より「一覧」→「カテゴリ」→「任意のカテゴリ名」で、トラックバック受信許可の項目があります。

ここに表示されたトラックバックURLにトラックバックを送信すれば、カテゴリーアーカイブに紐づけられた「最近のトラックバック」が表示されます。ブログ管理画面の「トラックバック一覧」にも受信件数が表示されます(下)。

3.アーカイブページで正常に表示する方法
次にアーカイブページで「最近のエントリー」「最近のコメント」「最近のトラックバック」を表示する方法を記します。
3.1 プラグインを利用する
メインページと同じ情報をアーカイブページに表示するには、indexcontext プラグインがお勧めです。
また、MTCollate プラグインを利用すればカテゴリー・アーカイブ/月別アーカイブで正常にすることができます。
Recents プラグインを利用する方法もあります。このプラグインを利用する場合は、MTCommentsRecent タグに mode="force" を付与することを忘れないでください。
3.2 モジュール化する
リスト自体をモジュール化(部品化)します。具体的には、インデックステンプレートとしてリストを作成・再構築し、その情報をインクルードすれば、問題を解消することができます。
ここで述べる「モジュール化」は、ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」とは異なりますのでご注意ください。
モジュール化には、
がありますが、個人的には「Ajax モジュール化」をお勧めします。
4.まとめ
メインページと同じ表示を行う場合、個人的には3.2項のモジュール化による表示を推奨します。
理由は、ページ数が増大しても再構築のパフォーマンスがほとんど変わらないためです。モジュール化しない場合、「最近のエントリー」「最近のコメント」「最近のトラックバック」がアーカイブページ分再構築されますが、インデックステンプレートでモジュール化すれば、アーカイブページが増えても、常に3ファイルしか再構築されずにすみます。
「カテゴリーリスト」や「月別アーカイブリスト」、また再構築のパフォーマンスの問題上、メインページでしか表示が推奨されていない「タグクラウド」等、同様の手法でモジュール化するとさらに良いでしょう。
このエントリーは「アーカイブページに「最近のコメント」「最近のトラックバック」を表示する」をリファクタリングしたものです。
サイドバーの表示をメインページと同じにする
Movable Type 4 で、サイドバーの表示をメインページと同じにするカスタマイズです。
複数の方から「各ページのサイドバーの表示をメインページを同じしたいのですが」という質問を頂きましたので、このエントリーで紹介致します。
ここでは当ブログの配布テンプレート「Movable Type テンプレート」を例に説明しますが、デフォルトテンプレートでも同様のカスタマイズが可能です。
なお、このエントリーのカスタマイズを行うだけではメインページと全く同じ表示にならないのですが、そのことについては次回のエントリーで解説します。
1.ページによってサイドバーの表示内容が異なる仕組み
ページによってサイドバーの表示内容が異なるのは、サイドバーの各リストを MTIf タグで括り、表示するページを振り分けているためです。MTIf は Movable Type 4 で新たに追加されたテンプレートタグで、ある値を判定することで処理を振り分ける、という機能をもっています。
例えば、タグクラウドがメインページでしか表示されないのは、下のように MTIf タグで全体を括っています。
<MTIf name="main_index">
<dt class="sidetitle">
Tag Clouds
</dt>
<dd class="side">
<ul id="tags">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="<$MTTagSearchLink$>"><$MTTagName$></a>
</li>
</MTTags>
</ul>
</dd>
</MTIf>
そして、MTIf タグの name 属性に記述された main_index という変数の値が "1" の場合にのみ、MTIf タグブロック内部が実行(=再構築対象)されます。
main_index という変数は、メインインデックスを再構築する時だけ "1" になる仕組みになっています。
また、月別アーカイブリストは、
<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
<dd class="side">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
と、MTIf タグの name 属性に module_monthly_archives という変数名を用いています。そして月別アーカイブの再構築時だけ module_monthly_archives の値が "1" になり、MTIf タグブロック内が再構築対象となります。
2.メインページと同じ表示にする方法
方法は、各リストを括っているMTIf タグを外すだけです。ただし、「最近のエントリー」については冒頭に記した通り、MTIf タグを外しただけではメインページと同じ表示にならないので、その点は予めご了承ください。
以下、リスト別に示します。赤色部分を削除してください。
最近のエントリー
<MTIf name="module_recent_entries">
<dt class="sidetitle">
Recent Entries
</dt>
<dd class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>
タグクラウド
<MTIf name="main_index">
<dt class="sidetitle">
Tag Clouds
</dt>
<dd class="side">
<ul id="tags">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="<$MTTagSearchLink$>"><$MTTagName$></a>
</li>
</MTTags>
</ul>
</dd>
</MTIf>
カテゴリーリスト
<MTIf name="module_category_archives">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
<dd class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
月別アーカイブリスト
<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
<dd class="side">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
3.注意事項
タグクラウドは再構築のパフォーマンスに影響があるため、他のアーカイブで表示させない(MTIf タグを外さない)ことをお勧めします。
表示させたい場合は Ajax モジュール化を行ないましょう。
4.サイドバーの MTIf タグに設定されている変数名
参考までに、デフォルトテンプレート(3 カラム)で、各リストの MTIf タグに設定されている変数名をまとめました(配布テンプレートも基本的にこの仕組みにしたがっています)。
| リスト名 | 変数名 |
|---|---|
| タグクラウド | main_index |
| ユーザーアーカイブリスト | module_author_archives |
| 月別アーカイブリスト | module_monthly_archives |
| 月別カテゴリーアーカイブリスト | module_category-monthly_archives |
| 月別ユーザアーカイブリスト | module_author-monthly_archives |
| 最近のエントリー | module_recent_entries |
| アイテムリスト | main_index |
| サブカテゴリーリスト | module_category_archives |
上記の各変数名がどのページで "1" になるかについては「予約変数一覧 for Movable Type 4(その1)」を参考にしてください。
なお、
- main_index
- module_recent_entries
の2つの変数については、どちらもメインページのみで "1" となります。
Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法
2日ほど前に、このブログに「月別カテゴリーアーカイブ」を追加しました。カテゴリー・アーカイブの右下に表示されている「Category Monthly Archives」から辿れます。

追加した目的は2つあり、ひとつはカテゴリーアーカイブのナビゲーションを増やしたかったこと、もうひとつは Google 検索の「小粋空間」の検索で、どの程度のページ増加があるのかを確認したかったためです。
ページ増加の結果については最後に記すことにして、ここでは、Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法を紹介します。
1.日付+カテゴリー(ユーザ)アーカイブについて
カテゴリーアーカイブやユーザアーカイブは、日付アーカイブ(年別・月別等)と異なり、記事数が増加することで1ページのファイルサイズが無限に増えていきます。
Movable Type 3 まではページ分割のカスタマイズでこの問題を回避していましたが、Movable Type 4 では、カテゴリーアーカイブとユーザアーカイブをさらに日付と組み合わせたアーカイブを作成することができるようになったので、例えば、あるカテゴリーアーカイブのトップには一定の記事数を表示し、過去の記事については「日付+アーカイブ」のページへリンクすれば、ページ分割として利用することができ、カテゴリーアーカイブ/ユーザアーカイブのトップページのファイルサイズを抑えることができます。
2.月別カテゴリーアーカイブの作成
Movable Type 4 の新規インストールでは「月別カテゴリーアーカイブ」がデフォルトで用意されているので、ここでは Movable Type 3 のアップグレードで Movable Type 4 運用のケースで「月別カテゴリーアーカイブ」を追加する場合について簡単に説明します。
2.1 アーカイブテンプレートの追加
既存のカテゴリー・アーカイブを利用する場合と、アーカイブを新規作成する場合で若干手順が異なります。
2.1.1 既存のカテゴリー・アーカイブを利用する場合
「デザイン」→「テンプレート」→「アーカイブテンプレート」→「カテゴリー・アーカイブ」を選択。

2.1.2 新規で作成する場合
「デザイン」→「テンプレート」→「アーカイブテンプレート」で、「アーカイブテンプレートを作成」の右にある「ブログ記事リスト」をクリック。

タイトルに「月別カテゴリー」を入力し(名前は何でもいいです)、編集画面の内容にカテゴリー・アーカイブと同じ内容を設定。
2.2 アーカイブマッピングを追加
ページ下にある「アーカイブマッピング」の「新しいアーカイブマッピングを作成」をクリック。

セレクトボックスで「カテゴリー - 月別」を選択し、「追加」をクリック。

これで、再構築をすれば「月別カテゴリーアーカイブ」が生成されます。
3.月別カテゴリーアーカイブリストへのリンクを追加
カテゴリーアーカイブのサイドバーに、月別カテゴリーアーカイブリストへのリンクを追加します。下は MT3 のデフォルトテンプレートに合わせたスタイルにしています。
<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<div class="module-archives module">
<h2 class="module-header"><$MTArchiveTitle$>:月別アーカイブ</h2>
<div class="module-content">
<MTArchiveList archive_type="Category-Monthly">
<MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
<li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
</div>
</div>
</MTIfArchiveTypeEnabled>
</MTIf>
4.完成例
トップページにある「趣味」というカテゴリーページへのリンクをクリックすると、

「趣味」カテゴリーのサイドバーに「趣味:月別アーカイブ」というリンクが表示されます。

5.検索結果ページ数増加について
「月別カテゴリーアーカイブ」追加による増加ページ数は、約800ページです。
で、「小粋空間」というキーワードで Google 検索すると、ここ最近は160 万件位で頭打ち状態だったのですが、今日調べてみると、260 万件まで増加していました(もう少し日が経つと減少するかもしれません)。

ちなみに、著名なブログでも検索結果ページ数は当ブログより少ないケースが少なくないのですが、ここまで検索結果ページ数が稼げているのは、テンプレート利用者のサイトに設定しているクレジットバナーのおかげだと感謝しています。
アーカイブのブログ記事一覧をサイドバーに表示する
「ブログ記事リスト」テンプレートを利用した各アーカイブページで MTEntries タグを利用すると、アーカイブの種類に該当するブログ記事(エントリー)のみが表示されます。例えば2007年9月のアーカイブでは、その月に投稿したブログ記事のみが表示されます。
これを利用して、アーカイブのブログ記事一覧をサイドバーに表示するカスタマイズを紹介します。このカスタマイズのポイントは、リストのタイトル表示をアーカイブの種類に合わせて切り替えるところです。
ここでは MT4 の配布テンプレートを例に説明しますが、MTタグ部分の構造は他のテンプレートでも共通に使えます。
1.月別アーカイブリストのブログ記事一覧を表示する
「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー(または「サイドバー2」)」に下記のタグを追加します。
<MTIf name="datebased_only_archive">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
List of "<$MTArchiveDate format="%B %Y"$>"
</dt>
<dd class="side">
<ul>
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
リストタイトル部分の MTArchiveDate に format 属性を加えて、MTArchiveDate から必要な情報(年月)のみを抽出しています。
また、MTIf タグと MTIfArchiveTypeEnabled タグで全体を括り、月別アーカイブかつ、月別アーカイブが利用可能な場合のみ表示するように制御しています。
2.カテゴリーアーカイブリストのブログ記事一覧を表示する
「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー(または「サイドバー2」)」に下記のタグを追加します。
<MTIf name="category_archive">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
List of "<$MTArchiveTitle$>"
</dt>
<dd class="side">
<ul>
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
カテゴリーアーカイブのリストタイトルは MTArchiveDate をそのまま表示させています。
こちらも、MTIf タグと MTIfArchiveTypeEnabled タグで全体を括り、カテゴリーアーカイブかつ、カテゴリーアーカイブが利用可能な場合のみ表示するように制御しています。
なお、カテゴリー配下のサブカテゴリーを含めたい場合は、下のように MTEntries を MTEntriesWithSubCategories にします。
<MTIf name="category_archive">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
List of "<$MTArchiveTitle$>"
</dt>
<dd class="side">
<ul>
<MTEntriesWithSubCategories>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntriesWithSubCategories>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
ここでは月別アーカイブとカテゴリーアーカイブをサンプルにしましたが、他のアーカイブでも色々試してみてください。
2007.11.22
各サンプルの MTIf タグに誤りがありました(メインページにも適用される変数を使用していました)ので修正致しました。
Movable Type 4 のアーカイブリスト表示の仕組みを探る
デフォルトテンプレートのサイドバーにある、アーカイブリスト表示について解説します。
当サイトで現在配布中のテンプレートもこれとほぼ同じ構成で、MTIf の部分だけを抽出すると、概ね下記のようになっていますので参考にしてください。*1
1.アーカイブリスト表示用のテンプレートタグ
「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー(3カラム)(または2カラム)」の中に下記のようなテンプレートタグがあります。これがアーカイブリスト表示用のテンプレートタグです。
<MTIf name="module_author_archives">
:
[ユーザー別アーカイブリスト]
:
</MTIf>
<MTIf name="module_monthly_archives">
:
[月別アーカイブリスト]
:
</MTIf>
<MTIf name="module_category-monthly_archives">
:
[月別カテゴリアーカイブリスト]
:
</MTIf>
<MTIf name="module_author-monthly_archives">
:
[ユーザー月別アーカイブリスト]
:
</MTIf>
<MTIf name="module_category_archives">
:
[カテゴリアーカイブリスト]
:
</MTIf>
デフォルトでは5種類のアーカイブリストが用意されており、すべて青色の MTIf タグで括られています。
メインページでは
- 月別アーカイブリスト
- ユーザー別アーカイブリスト
- カテゴリアーカイブリスト
が表示されるようになっています。各アーカイブページでは、アーカイブの内容にそったリストが表示されます(その仕組みは後述)。
アーカイブリストが表示されるためには、上の赤色で示した、MTIf タグにある、各 name 属性の値が "1" であることが条件になります。
例えば、月別アーカイブが表示されるためには、module_monthly_archives に "1" が設定されている必要があります。
この MTIf タグの name 属性が表示を制御するポイントとなりますので、次に、各 name 属性の値をどこで "1" に設定しているかについて解説します。
2.メインページで表示される仕組み
メインページテンプレートの先頭に下のタグが記述されています。
<MTSetVar name="module_category_archives" value="1">
<MTSetVar name="module_author_archives" value="1">
<MTSetVar name="module_monthly_archives" value="1">
つまり、MTSetVar タグで name 属性の値に "1" が設定され、メインページのサイドバーには、前述の通り、カテゴリアーカイブリスト・ユーザー別アーカイブリスト・月別アーカイブリストが表示される、という訳です。
ただし、厳密には各リストは MTIfArchiveTypeEnabled タグでも括られています(下の青色部分)。
<MTIf name="module_author_archives">
<MTIfArchiveTypeEnabled archive_type="Author">
:
[ユーザー別アーカイブリスト]
:
</MTIfArchiveTypeEnabled>
</MTIf>
<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
:
[月別アーカイブリスト]
:
</MTIfArchiveTypeEnabled>
</MTIf>
<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
:
[月別カテゴリアーカイブリスト]
:
</MTIfArchiveTypeEnabled>
</MTIf>
<MTIf name="module_author-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Author-Monthly">
:
[ユーザー月別アーカイブリスト]
:
</MTIfArchiveTypeEnabled>
</MTIf>
<MTIf name="module_category_archives">
<MTIfArchiveTypeEnabled archive_type="Category">
:
[カテゴリアーカイブリスト]
:
</MTIfArchiveTypeEnabled>
</MTIf>
MTIfArchiveTypeEnabled タグの中が実行されるためには、赤色で示した「アーカイブ種類(=アーカイブマッピング)」が存在する必要があります。存在しなければ、リストは表示されません。
デフォルトテンプレートでは「ユーザー別アーカイブ」のアーカイブマッピングは設定されていないので、MTSetVar タグがあるにもかかわらずメインページに表示されないのは、そのためです。
3.アーカイブページで表示される仕組み
メインページについてはテンプレート編集画面で MTSetVar タグで name 属性が明示されていますが、各アーカイブテンプレート、例えば「ブログ記事リスト」には、
module_author_archives
module_monthly_archives
module_category-monthly_archives
module_author-monthly_archives
module_category_archives
という name 属性値は見当たりません。
実は、これらの値はシステムで事前に設定されており、各アーカイブに対応する name 属性に "1" が設定されているのです。
ソースコードが読める方は lib/MT/WeblogPublisher.pm の core_archive_types というサブルーチンを見ればお分かりになると思います。
下は、lib/MT/WeblogPublisher.pm より月別アーカイブ部分を抜粋したものです。青字部分に module_monthly_archives が設定されているのが何となくお分かりになると思います。
sub core_archive_types {
return {
:
(中略)
:
'Monthly' => ArchiveType(
name => 'Monthly',
archive_label => \&monthly_archive_label,
archive_file => \&monthly_archive_file,
archive_title => \&monthly_archive_title,
date_range => \&monthly_date_range,
archive_group_iter => \&monthly_group_iter,
archive_group_entries => \&monthly_group_entries,
archive_entries_count => \&monthly_entries_count,
dynamic_template => 'archives/<$MTArchiveDate format="%Y%m"$>',
default_archive_templates => [
ArchiveFileTemplate(
label => MT->translate('yyyy/mm/index.html'),
template => '%y/%m/%i',
default => 1
),
],
dynamic_support => 1,
date_based => 1,
template_params => {
datebased_only_archive => 1,
datebased_monthly_archive => 1,
module_monthly_archives => 1,
main_template => 1,
archive_template => 1,
archive_class => "datebased-monthly-archive",
},
),
:
(中略)
:
};
}
他のアーカイブも同様にシステムで設定された値を使用しています。
アーカイブページ右上に表示される「このアーカイブについて」も、同じ仕組みで制御されています。

4.すべてのアーカイブページで同じアーカイブリストを表示するには
1項で示した、各アーカイブリストの一番外側にある MTIf タグを削除してください。
ただしアーカイブによってはメインページと表示が異なる可能性があります。その場合は、
で対応してみてください。
拙著「Movable Type WEBデザインの新しいルール」の配布テンプレートではこのタグを省略しています。
月別アーカイブリストの年毎の折りたたみ for Movable Type
ここではスクリーンショットのように、月別アーカイブリストで年毎に折りたたみマークを付与する方法をご紹介します。当サイトの右サイドバーに設定していますので、動作をご確認ください。 なおアーカイブリストのツリー化については「月別アーカイブリストのツリー化 for Movable Type」のカスタマイズを行ってください(本記事と内容が一部重複しています)。 |
折りたたみとツリー化を同時に行ないたい場合は「JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ」をご覧ください。
1.事前準備
このカスタマイズを行うには下記のプラグインをインストールし、MTArchiveDateHeader および MTArchiveDateFooter タグが動作するようにしてください。
ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン
2.スクリプトのダウンロード
下記のリンクより menufolder.js をダウンロードしてください。今回のアーカイブリスト折りたたみ用にバージョンアップしていますので、すでに menufolder.js をお使いの方も再度ダウンロードしてください。
3.スクリプトの修正
menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を適宜修正してください。デフォルトの状態では各年の後方に折りたたみマークが表示されるようになっていますので、そのままでもお使いになれます。
// アーカイブリストフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする:true
// 無効にする:false
var archives = true;
// アーカイブリスト用折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForArchives = '▼';
var closeMarkForArchives = '▲';
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置:true
// カテゴリー後に折りたたみマークを配置:false
var preMarkForArchives = false;
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;
4.スクリプトのアップロード
menufolder.js を index.html のあるディレクトリにアップロードします。
5.テンプレートの修正(script タグ追加)
アーカイブリストを表示したいテンプレートの <head> ? </head> の間に下記のタグを追加します(すでに設定済の方はこの項をスキップしてください)。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
6.テンプレートの修正(折りたたみつき月別アーカイブリスト追加)
月別アーカイブリストを表示したいテンプレートに下記のタグを設定します。サンプルは公開テンプレートに設定したものです。
青色で示した部分が月別アーカイブリストの表示で使用するタグになります。タグの構造がお分かりでない場合はこの部分に修正を加えたり改行を挿入しないでください。
その他の部分はご自身のテンプレートに併せて適宜修正してください。
<div class="sidetitle">
Monthly Archives
</div>
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください(アクセシビリティ向上のため、1年ほど前からこの機能を提供していましたが、パフォーマンスの関係で停止していました)。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
月別アーカイブリストのツリー化 for Movable Type
ArchiveDateHeader プラグインおよび、昨日公開した ArchiveDateFooter プラグインを利用した、月別アーカイブリストのツリー化カスタマイズを紹介します。 |
ツリー化にあたっては、公開テンプレートをサンプルに用いて
- 各年の月をツリー化
- 年と各年の月をツリー化
の2通りの方法を説明しています。いずれかお好きな方を選択してください。またデフォルトテンプレート等、他のテンプレートでも利用可能ですが、ツリー表示についてはスタイルシートの設定を適宜修正して調整してください。
なおツリー化の基本的なカスタマイズについてはサイドメニューのツリー化スクリプト(改)を参照してください。ここでは差分のみを記し、スクリプトおよびツリー画像の設定等については割愛しています。
さらにツリー表示を年毎に折りたたむこともできます。その場合は「月別アーカイブリストの年毎の折りたたみ for Movable Type」をご覧ください。
1.各年の月をツリー化
1項では、左のスクリーンショットのように各年の月をツリー化する方法を紹介します。 |
1.1 テンプレートの修正
月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。<div class="side" id="archives">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><span><$MTArchiveDate format="%Y年"$></span><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
<!--
generateNormalTree('archives');
//-->
</script>
1.2 スタイルシートの修正
下記のスタイルを styles-site.css に追加します。ul.tree {
margin: 0 0 0 15px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
margin-left: 10px!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 11px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end.gif);
list-style: none;
}
2.年と各年の月をツリー化
2項は各年の月のツリー化だけでなく、年表示部分もツリー化する方法を紹介します。 |
2.1 テンプレートの修正
月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。<div class="side" id="archives">
<ul>
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><li><$MTArchiveDate format="%Y年"$><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></li></MTArchiveDateFooter>
</MTArchiveList>
</ul>
</div>
<script type="text/javascript">
<!--
generateTreeForTreeStructure('archives');
//-->
</script>
2.2 スタイルシートの修正
下記のスタイルを styles-site.css に追加します。ul.tree {
margin: 0 0 0 5px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
margin-left: 10px!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 11px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end.gif);
list-style: none;
}
3.その他
すでに他でツリーの設定を行っている場合は、同じ設定を利用するか、#archives ul.tree {
:
という具合に、スタイルシートの該当部分に id 属性を追加して、他の設定と干渉しないようにしてください。
エントリー・アーカイブで同一カテゴリーのトラックバックを表示する
Movable Type のエントリー・アーカイブで同一カテゴリーのトラックバックだけを表示するカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。
基礎知識として、エントリー・アーカイブで MTPings タグを普通に利用するだけでは、該当エントリーのトラックバックしか表示されません(アーカイブページに「最近のコメント」「最近のトラックバック」を表示する参照)。そういう訳でプラグインをいくつか試してみましたが、そのまま使うことで表示を満足するものはありませんでした(あったらすいません)。
で、自分でプラグインを作成するスキルもないので、勝手ながら Ogawa::memoranda さんの Recently pinged on Plugin を下記の通り改変させて頂き、表示させることができました。
プラグイン:Recently pinged on Plugin
改変内容:エントリー・アーカイブで同一カテゴリーのトラックバックだけを表示する
プラグインのダウンロード、インストール等につきましては配布元の記事を参照ください。
1.プラグインの修正
recently-pinged-on.pl に下記のパッチをあててください。パッチ適用前にファイルのタブ文字を半角空白8文字に変換してください。
--- recently-pinged-on.pl.bak Tue May 30 01:14:15 2006
+++ recently-pinged-on.pl Tue May 30 01:16:35 2006
@@ -41,7 +41,7 @@
my $blog_id = $ctx->stash('blog_id');
my ($start, $end) = ($ctx->{current_timestamp},
$ctx->{current_timestamp_end});
- my $cat = $ctx->stash('archive_category');
+ my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
require MT::TBPing;
my $iter = MT::TBPing->load_iter({ blog_id => $blog_id },
@@ -63,6 +63,7 @@
my $entry = MT::Entry->load($entry_id) or next;
next if $entry->status != MT::Entry::RELEASE();
+ next if !$cat && $ctx->{current_archive_type} eq 'Individual';
next if $cat && !$entry->is_in_category($cat);
next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);
パッチの利用方法が分からない方は、下記の recently-pinged-on.pl の抜粋を参考に、赤色部分を削除して青色の行を追加してください。*1
:
my $blog_id = $ctx->stash('blog_id');
my ($start, $end) = ($ctx->{current_timestamp},
$ctx->{current_timestamp_end});
my $cat = $ctx->stash('archive_category');
my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
:
(中略)
:
require MT::Entry;
my $entry = MT::Entry->load($entry_id) or next;
next if $entry->status != MT::Entry::RELEASE();
next if !$cat && $ctx->{current_archive_type} eq 'Individual';
next if $cat && !$entry->is_in_category($cat);
next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);
:
一応確認したつもりですが、改変内容に不備(他のアーカイブで仕様通りに動作しない等)がございましたらご指摘ください。
2.テンプレートの設定
エントリー・アーカイブのサイドバーの任意の位置に「最近のトラックバック」を表示する下記のタグを設定します。これまで表示していた「最近のトラックバック」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。
2.1 デフォルトテンプレートの場合
<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>
</div>
2.2 公開テンプレートの場合
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>
*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
エントリー・アーカイブで同一カテゴリーのコメントを表示する
Movable Type のエントリー・アーカイブで同一カテゴリーのコメントだけを表示するカスタマイズです。ここでは MTTagInvoke プラグインを利用した方法を紹介します。
1.プラグインのインストール
下記のサイトより MTTagInvoke プラグインをダウンロードします。ダウンロードしたアーカイブを解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置(またはアップロード)、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置(またはアップロード) します。
アップロード後、Movable Type 管理画面の
メイン・メニュー > システム・メニュー > プラグイン
でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。
MTTagInvoke の機能については、配布サイトや個別エントリーアーカイブに同一カテゴリーのエントリーを表示の後半にある説明を参照ください。
2.テンプレートの設定
エントリー・アーカイブのサイドバーの任意の位置に「最近のコメント」を表示する下記のタグを設定します。これまで表示していた「最近のコメント」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。
注:MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。
| 1.0(現在) | 0.9 |
|---|---|
| MTTagInvokeName | MTTagName |
| MTTagInvokeAttribute | MTTagAttribute |
| MTTagInvokeContent | MTTagContent |
2.1 デフォルトテンプレートの場合
<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>
</div>
2.2 公開テンプレートの場合
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>
2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。
2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。
アーカイブページに「最近のコメント」「最近のトラックバック」を表示する
「カテゴリー・アーカイブページや月別アーカイブページで『最近のコメント』『最近のトラックバック』が正常に表示されません」という質問を時々頂くことがあります。
質問の通り、例えばこのサイトのトップページにある「最近のエントリー」「最近のコメント」「最近のトラックバック」のテンプレートをそのままアーカイブページに貼り付けても、ユーザーが期待する表示にはなりません。これはリスト表示に使われるMTタグ(MTEntries等)がアーカイブの属性に依存した振る舞いをするのが原因と思われます(下記の調査ではそうでもない結果になっていますが)。
これは不具合ではなく、Movable Type の仕様、あるいは制限事項と思って頂いて良いと思いますが、見落としていなければユーザーマニュアルには明示的な記述はありません。したがってこれらのリスト類がどのように表示されるか、実際に設定してみないと分からない訳です。
ということで、トップページに設定しているリストを各アーカイブページに設定した場合の結果と、それらを回避する方法について記します。
1.MTタグをアーカイブテンプレートに設定した場合の結果
公開テンプレートを例に、メインページに設定してある「最近のエントリー」「最近のコメント」「最近のトラックバック」と同じMTタグを各アーカイブページに設定した場合の表示がどのようになるかを、下記の一覧にまとめました。
| カテゴリー・アーカイブ | 月別アーカイブ | エントリー・アーカイブ | |
|---|---|---|---|
| 最近の エントリー |
該当カテゴリーのエントリー一覧 | 該当月のエントリー一覧 | トップページと同様 |
| 最近の コメント |
[MTEntries recently_commented_on指定] 該当カテゴリーの全エントリーのコメントをMTCommentsのlastn分表示 [MTEntries lastn指定] コメントのないエントリー含めlastn分表示 | [MTEntries recently_commented_on指定] 該当月の全エントリー・コメントをMTCommentsのlastn分表示 [MTEntries lastn指定] 該当月のコメントのないエントリー含めlastn分表示 | トップページと同様 |
| 最近の トラックバック |
表示されない | トップページと同様 | 該当エントリーのトラックバック一覧 |
2.アーカイブページで正常に表示する方法
次にアーカイブページで「最近のエントリー」「最近のコメント」「最近のトラックバック」を表示する方法を記します。
2.1 プラグインを利用する
MTCollate プラグインを利用すればカテゴリー・アーカイブ/月別アーカイブで正常に表示されるようです。設定方法はMTCollate を使って「最近のコメント」を表示するに記しています。ただしエントリー・アーカイブでは該当エントリーだけが対象になるようです。
もうひとつは Recents プラグインを利用します。
The blog of H.Fujimoto:最近のコメント/トラックバックをエントリーとともに表示するプラグイン
本プラグインであれば各アーカイブページで正常に動作します。いずれも MTCommentsRecent タグに mode="force" を付与することを忘れないでください。
2.2 モジュール化する
リスト表示用タグをアーカイブテンプレートに直接貼り付けると冒頭の問題が発生しますが、リスト自体を独立したモジュール(部品)として登録すれば解消されます。
以下、インデックステンプレートに「最近のコメント」を登録して、それをアーカイブページから読み込む方法を紹介します。
2.2.1 モジュール用テンプレートの作成
管理画面の「テンプレート」をクリック→右上の「テンプレートを新規作成」をクリック。次画面で下記を設定します。
- テンプレート名:最近のコメント
- 出力ファイル名:recentComments.html
- インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する:チェック
- テンプレートの内容:下記(ここでは公開テンプレートのタグを流用しています)
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>
設定が完了したら保存・再構築してください。これで「最近のコメント」だけを表示するためのページが index.html と同じディレクトリにできあがります。ファイル名の拡張子は .html にしていますが、.txt 等なんでも結構です。
2.2.2 アーカイブテンプレートの修正
アーカイブテンプレートの編集画面に進み、2.2.1項で作った「最近のコメント」を表示する設定を行います。
A/B/Cのいずれかを選択してください。
- A.MTInclude タグでインクルードする
- B.PHPでインクルードする
- C.JavaScriptでインクルードする
違いは、Aは再構築を契機に「最近のコメント」を取得するのでスタティックページと同じ効果(=次に再構築が実行されるまで最近のコメントが更新されない)ですが設定が手軽に行えます。
Bはページビューを契機に「最近のコメント」取得します。「最近のコメント」はコメントが投稿されるたびに更新されるので、常に最新情報が反映されるというメリットがあります。ただしPHP化する必要がある・PHPがインストールされている必要がある等の条件があります。
CはA・Bの長所をもっています。
A.MTInclude タグを利用する
「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。
<$MTInclude file="recentComments.html"$>
B.PHPを利用する
「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。
<? readfile('<$MTBlogURL$>recentComments.html')?>
Bの場合、はタグを記述するテンプレートの拡張子が .php であることが前提となります。また、1行目にXML宣言
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
が記述されている場合は
<? echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>
に変更してください。さらにアーカイブページのファイル(index.html)が残っていると、リンクをクリックした場合に .html ファイルを優先してアクセスする可能性があるため、全アーカイブページを一旦削除してから再構築されることを推奨します。
C.JavaScript を利用する
手順が前後してすいませんが、2.2.1の内容は下記に変更してください。
- テンプレート名:最近のコメント
- 出力ファイル名:recentComments.js
- インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する:チェック
- テンプレートの内容:下記(ここでは公開テンプレートのタグを流用しています)
document.write('<div class="sidetitle">');
document.write('Recent Comments');
document.write('</div>');
document.write('<div class="side">');
<MTEntries recently_commented_on="5">
document.write('<a href="<$MTEntryLink$>"><MTEntryTitle encode_js="1"></a>');
document.write('<br />');
<MTComments lastn="5">
document.write('└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">');
document.write('<MTCommentAuthor encode_js="1"></a> <$MTCommentDate format="%m/%d"$><br />');
</MTComments>
</MTEntries>
document.write('</div>');
そしてアーカイブテンプレートの「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。
<script type="text/javascript" src="<$MTBlogURL$>recentComments.js"></script>
以上です。
「最近のエントリー」や「最近のトラックバック」も同様の手順で作成すればOKです。
3.まとめ
個人的にはモジュール化による表示を推奨します。理由はリストの修正・管理が容易になり、再構築のパフォーマンスも向上するためです。「最近のエントリー」「最近のコメント」「最近のトラックバック」を全アーカイブページ分生成することと、3ファイルだけを生成することを比較すれば、どちらが速いか感覚的にお分かりになると思います。先のプラグインと組み合わせればさらにきめこまかい表示の設定が可能になります。
トップページ等のインデックステンプレートのリスト類も同様の手法でインクルードすると良いでしょう。
最初の設定がやや手間取るかもしれませんが興味のある方はお試しください。なお当サイトでは全てのリストについてPHPモジュール化を行っています。
MyBlogList にスクロールバーをつける(改)
MyBlogListのリンクリストにスクロールバーをつけるカスタマイズです。(改)マークはJavaScriptによってクレジットバナーおよび「ListMe」をスクロールバーの外に追い出すことを指しています。
BlogPeopleのリンクリストにスクロールバーをつける場合は、div タグを付与する設定でリンクリスト表示用コードを生成すれば、div タグに予め指定されたクラス属性に対するスタイルを与えることでバナーをスクロールバーから外に追い出せたのですが、MyBlogListの場合は表示用コード生成でそのようなオプションが用意されていないため分割ができません。リストはバナーや「ListMe」を含め、単純に a タグが並んでいるだけのようです。
ということで、バナーおよび「ListMe」をスクロールバーの外に完全に追い出すためのスクリプトを作りました。スクロールバーの一番最後にも「by MyblogList」を表示しません。
具体的には BlogPeople と同様、リンクリストとバナーおよび「ListMe」をそれぞれ <div>~</div> タグで括り、個別にスタイルを与えることができるようにしました。リストの一番最初と最後に "<div>" および "</div>" をつけるのは簡単ですが、単純に並んだ a タグの途中でどのようにして div タグを挿入するかで悩みました。結局、a タグ("<a")で分割して検索していき、クレジットバナーの img タグが出現した時点で "</div><div>" を付与、「ListMe」については「MyblogList」という文字を検索して同様に "</div><div>" を追加という方法に落ち着きました。クレジットバナーに画像を使っていない場合も考慮しています。
2005.05.20 追記:リストへの日付や時刻の付与、および画像を用いたNEW装飾にも対応できるように改良しました。
以下カスタマイズ方法です。
1.MyBlogList 表示用タグの修正
各テンプレートに設定している、MyBlogList のリンクリストを表示するタグ
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
を div タグ等で括って
<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>
としてください。括られていない場合は、サンプルのようにタグを追加してください(タグは div でなくても大丈夫と思いますが、他のタグについては動作未確認です)。
hogehoge の部分は、任意の id 属性名を設定してください。id 属性名はページ内で一意になる名称にしてください(=他の id 属性名と重複しないこと)。
追加が終わったら保存・再構築してください。
2.テンプレートにJavaScript追加
1項の MyBlogList 表示用タグの下に、下記のスクリプト(青色)を追加します。
<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>
<script type="text/javascript" language="javascript">
<!--
id = 'hogehoge';
image = 1;
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
tag1 = tag1.toUpperCase();
}
if (!image) {
tag2 = '>by MyblogList<';
} else {
tag2 = 'myblog_list_banner';
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="mybloglist-main">';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
if(list[i].indexOf('window.open') != -1) {
data += '</div><div class="mybloglist-listMe">' + tag1 + list[i];
break;
}
if(list[i].indexOf(tag2) != -1) {
data += '</div><div class="mybloglist-powered-by">' + tag1 + list[i];
} else {
if(counter){
data += tag1;
}
data += list[i];
}
counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>
スクリプトの3行目の右辺(赤色)には、1項で設定した id 属性名を設定してください。またクレジットバナーに画像を用いず「by MyblogList」を表示している方は、4行目の赤色を
image = 0;
に変更してください。
追加が終わったら保存・再構築してください。
3.CSS設定
下記のクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。場所はどこでも大丈夫です。
.mybloglist-main {
overflow: auto;
height: 300px;
}
.mybloglist-powered-by {
margin-top: 10px;
margin-bottom: 0px;
}
.mybloglist-listMe {
margin-top: 0px;
}
上から順番に、リンクリスト用・クレジットバナー用・「ListMe」用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、2項のスクリプトに埋め込まれた3項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。
以上です。Windows2000・XPのIE6.0/Netscape7.0/Firefox1.0/Opera7.23・8.0で正常に表示されることを確認しています。
2005.05.19 追記
スクリプトに誤りがありましたので修正しました。
2005.05.20 追記
先頭に日付・時刻が表示されている場合に不具合がありましたので修正しました。これに伴い2項のスクリプトおよび説明を修正しました。またNEW装飾に画像を用いることができるように改良しました。
BlogPeople のリンクリストにスクロールバーをつける
BlogPeople のリンクリストにスクロールバーを付与するカスタマイズを紹介します。参考記事は BlogPeople 主催者の
です。ありがとうございました。
かなり以前より色々なサイトでカスタマイズ方法が紹介されていますが、ここでは仕組みの詳細についてかみくだいて書いてみました。
1.CSSでスクロールバーを表示する方法
基本的手法として、サイドバーのメニューリストにスクロールバーを表示する方法は、
.hogehoge {
height: 200px;
overflow: auto;
}
というクラスセレクタを作り、メニューリストを div タグで括って
<div class="hogehoge">
:
(メニューリスト)
:
</div>
とクラス属性 ho
アーカイブリストを年毎に折りたたむカスタマイズです。
1項では、左のスクリーンショットのように各年の月をツリー化する方法を紹介します。
2項は各年の月のツリー化だけでなく、年表示部分もツリー化する方法を紹介します。