小粋空間: サイドバーアーカイブ

Top ＞ Movable Type ＞カスタマイズ＞サイドバー [全て開く]

2007年12月 3日

Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法

December 3,2007 12:38 AM
Tag：[Category, Customize, Monthly, MovableType]
Permalink

2日ほど前に、このブログに「月別カテゴリーアーカイブ」を追加しました。カテゴリー・アーカイブの右下に表示されている「Category Monthly Archives」から辿れます。

「月別カテゴリーアーカイブ」

追加した目的は2つあり、ひとつはカテゴリーアーカイブのナビゲーションを増やしたかったこと、もうひとつは Google 検索の「小粋空間」の検索で、どの程度のページ増加があるのかを確認したかったためです。

ページ増加の結果については最後に記すことにして、ここでは、Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法を紹介します。

１．日付+カテゴリー（ユーザ）アーカイブについて

カテゴリーアーカイブやユーザアーカイブは、日付アーカイブ（年別・月別等）と異なり、記事数が増加することで1ページのファイルサイズが無限に増えていきます。

Movable Type 3 まではページ分割のカスタマイズでこの問題を回避していましたが、Movable Type 4 では、カテゴリーアーカイブとユーザアーカイブをさらに日付と組み合わせたアーカイブを作成することができるようになったので、例えば、あるカテゴリーアーカイブのトップには一定の記事数を表示し、過去の記事については「日付+アーカイブ」のページへリンクすれば、ページ分割として利用することができ、カテゴリーアーカイブ／ユーザアーカイブのトップページのファイルサイズを抑えることができます。

２．月別カテゴリーアーカイブの作成

Movable Type 4 の新規インストールでは「月別カテゴリーアーカイブ」がデフォルトで用意されているので、ここでは Movable Type 3 のアップグレードで Movable Type 4 運用のケースで「月別カテゴリーアーカイブ」を追加する場合について簡単に説明します。

２．１アーカイブテンプレートの追加

既存のカテゴリー・アーカイブを利用する場合と、アーカイブを新規作成する場合で若干手順が異なります。

２．１．１既存のカテゴリー・アーカイブを利用する場合

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「カテゴリー・アーカイブ」を選択。

「カテゴリー・アーカイブ」を選択

２．１．２新規で作成する場合

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

ブログ記事を新規作成

タイトルに「月別カテゴリー」を入力し（名前は何でもいいです）、編集画面の内容にカテゴリー・アーカイブと同じ内容を設定。

２．２アーカイブマッピングを追加

ページ下にある「アーカイブマッピング」の「新しいアーカイブマッピングを作成」をクリック。

新しいアーカイブマッピングを作成

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

「カテゴリー - 月別」を選択

これで、再構築をすれば「月別カテゴリーアーカイブ」が生成されます。

３．月別カテゴリーアーカイブリストへのリンクを追加

カテゴリーアーカイブのサイドバーに、月別カテゴリーアーカイブリストへのリンクを追加します。下は 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>

４．完成例

トップページにある「趣味」というカテゴリーページへのリンクをクリックすると、

カテゴリーリストのリンク

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

月別カテゴリーリストのリンク

５．検索結果ページ数増加について

「月別カテゴリーアーカイブ」追加による増加ページ数は、約800ページです。

で、「小粋空間」というキーワードで Google 検索すると、ここ最近は160 万件位で頭打ち状態だったのですが、今日調べてみると、260 万件まで増加していました（もう少し日が経つと減少するかもしれません）。

Google 検索結果

ちなみに、著名なブログでも検索結果ページ数は当ブログより少ないケースが少なくないのですが、ここまで検索結果ページ数が稼げているのは、テンプレート利用者のサイトに設定しているクレジットバナーのおかげだと感謝しています。

Comments [0] | Trackbacks [0]

2007年11月12日

アーカイブのブログ記事一覧をサイドバーに表示する

November 12,2007 3:02 AM
Tag：[Customize, MovableType]
Permalink

アーカイブのブログ記事一覧「ブログ記事リスト」テンプレートを利用した各アーカイブページで MTEntries タグを利用すると、アーカイブの種類に該当するブログ記事（エントリー）のみが表示されます。例えば2007年9月のアーカイブでは、その月に投稿したブログ記事のみが表示されます。

これを利用して、アーカイブのブログ記事一覧をサイドバーに表示するカスタマイズを紹介します。このカスタマイズのポイントは、リストのタイトル表示をアーカイブの種類に合わせて切り替えるところです。
ここでは MT4 の配布テンプレートを例に説明しますが、MTタグ部分の構造は他のテンプレートでも共通に使えます。

１．月別アーカイブリストのブログ記事一覧を表示する

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー（または「サイドバー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」）」に下記のタグを追加します。

<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 タグに誤りがありました（メインページにも適用される変数を使用していました）ので修正致しました。

Comments [4] | Trackbacks [0]

2006年7月10日

月別アーカイブリストの年毎の折りたたみ for Movable Type

July 10,2006 8:03 AM
Tag：[Customize, MovableType]
Permalink

月別アーカイブリストの年毎の折りたたみアーカイブリストを年毎に折りたたむカスタマイズです。
アーカイブリストはカテゴリーリストと異なり、エントリーの増加に比例して増えていきますが、このカスタマイズを行うことでアーカイブリストをコンパクトに表示することができます。

ここではスクリーンショットのように、月別アーカイブリストで年毎に折りたたみマークを付与する方法をご紹介します。当サイトの右サイドバーに設定していますので、動作をご確認ください。

なおアーカイブリストのツリー化については「月別アーカイブリストのツリー化 for Movable Type」のカスタマイズを行ってください（本記事と内容が一部重複しています）。

折りたたみとツリー化を同時に行ないたい場合は「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」をご覧ください。

１．事前準備

このカスタマイズを行うには下記のプラグインをインストールし、MTArchiveDateHeader および MTArchiveDateFooter タグが動作するようにしてください。

ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン

２．スクリプトのダウンロード

下記のリンクより menufolder.js をダウンロードしてください。今回のアーカイブリスト折りたたみ用にバージョンアップしていますので、すでに menufolder.js をお使いの方も再度ダウンロードしてください。

download

３．スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を適宜修正してください。デフォルトの状態では各年の後方に折りたたみマークが表示されるようになっていますので、そのままでもお使いになれます。

// アーカイブリストフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする：true
// 無効にする：false
var archives = true;
 
// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives  = '▼';
var closeMarkForArchives = '▲';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

４．スクリプトのアップロード

menufolder.js を index.html のあるディレクトリにアップロードします。

５．テンプレートの修正（script タグ追加）

アーカイブリストを表示したいテンプレートの <head> ? </head> の間に下記のタグを追加します（すでに設定済の方はこの項をスキップしてください）。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

６．テンプレートの修正（折りたたみつき月別アーカイブリスト追加）

月別アーカイブリストを表示したいテンプレートに下記のタグを設定します。サンプルは公開テンプレートに設定したものです。

青色で示した部分が月別アーカイブリストの表示で使用するタグになります。タグの構造がお分かりでない場合はこの部分に修正を加えたり改行を挿入しないでください。
その他の部分はご自身のテンプレートに併せて適宜修正してください。

<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 ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Comments [35] | Trackbacks [4]

2006年6月20日

月別アーカイブリストのツリー化 for Movable Type

June 20,2006 12:55 AM
Tag：[Customize, MovableType, Tree]
Permalink

ArchiveDateHeader プラグインおよび、昨日公開した ArchiveDateFooter プラグインを利用した、月別アーカイブリストのツリー化カスタマイズを紹介します。

ツリー化にあたっては、公開テンプレートをサンプルに用いて

各年の月をツリー化
年と各年の月をツリー化

の2通りの方法を説明しています。いずれかお好きな方を選択してください。またデフォルトテンプレート等、他のテンプレートでも利用可能ですが、ツリー表示についてはスタイルシートの設定を適宜修正して調整してください。

なおツリー化の基本的なカスタマイズについてはサイドメニューのツリー化スクリプト（改）を参照してください。ここでは差分のみを記し、スクリプトおよびツリー画像の設定等については割愛しています。

さらにツリー表示を年毎に折りたたむこともできます。その場合は「月別アーカイブリストの年毎の折りたたみ for Movable Type」をご覧ください。

１．各年の月をツリー化

１項では、左のスクリーンショットのように各年の月をツリー化する方法を紹介します。

１．１テンプレートの修正

月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。

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

１．２スタイルシートの修正

下記のスタイルを 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;
}

２．年と各年の月をツリー化

２項は各年の月のツリー化だけでなく、年表示部分もツリー化する方法を紹介します。

２．１テンプレートの修正

月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。

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

２．２スタイルシートの修正

下記のスタイルを 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;
}

３．その他

すでに他でツリーの設定を行っている場合は、同じ設定を利用するか、

#archives ul.tree {
　　　　　：

という具合に、スタイルシートの該当部分に id 属性を追加して、他の設定と干渉しないようにしてください。

Comments [25] | Trackbacks [4]

2006年5月30日

エントリー・アーカイブで同一カテゴリーのトラックバックを表示する

May 30,2006 1:50 AM
Tag：[Customize, MovableType, Trackback]
Permalink

Movable Type のエントリー・アーカイブで同一カテゴリーのトラックバックだけを表示するカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。

基礎知識として、エントリー・アーカイブで MTPings タグを普通に利用するだけでは、該当エントリーのトラックバックしか表示されません（アーカイブページに「最近のコメント」「最近のトラックバック」を表示する参照）。そういう訳でプラグインをいくつか試してみましたが、そのまま使うことで表示を満足するものはありませんでした（あったらすいません）。

で、自分でプラグインを作成するスキルもないので、勝手ながら Ogawa::memoranda さんの Recently pinged on Plugin を下記の通り改変させて頂き、表示させることができました。

プラグイン：Recently pinged on Plugin
改変内容：エントリー・アーカイブで同一カテゴリーのトラックバックだけを表示する

プラグインのダウンロード、インストール等につきましては配布元の記事を参照ください。

１．プラグインの修正

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種類を挙げておきます。

２．１デフォルトテンプレートの場合

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

２．２公開テンプレートの場合

<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 ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Comments [0] | Trackbacks [0]

2006年5月29日

エントリー・アーカイブで同一カテゴリーのコメントを表示する

May 29,2006 12:38 AM
Tag：[Comment, Customize, MovableType]
Permalink

Movable Type のエントリー・アーカイブで同一カテゴリーのコメントだけを表示するカスタマイズです。ここでは MTTagInvoke プラグインを利用した方法を紹介します。

１．プラグインのインストール

下記のサイトより MTTagInvoke プラグインをダウンロードします。ダウンロードしたアーカイブを解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置（またはアップロード）、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置（またはアップロード）します。

MT Extensions：MTTagInvoke

アップロード後、Movable Type 管理画面の

メイン・メニュー > システム・メニュー > プラグイン

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

MTTagInvoke の機能については、配布サイトや個別エントリーアーカイブに同一カテゴリーのエントリーを表示の後半にある説明を参照ください。

２．テンプレートの設定

エントリー・アーカイブのサイドバーの任意の位置に「最近のコメント」を表示する下記のタグを設定します。これまで表示していた「最近のコメント」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。

注：MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。

MTTagInvoke プラグインMTタグ対応表
1.0（現在）	0.9
MTTagInvokeName	MTTagName
MTTagInvokeAttribute	MTTagAttribute
MTTagInvokeContent	MTTagContent

２．１デフォルトテンプレートの場合

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

２．２公開テンプレートの場合

<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 にあわせました。

Comments [2] | Trackbacks [2]

2006年3月29日

アーカイブページに「最近のコメント」「最近のトラックバック」を表示する

March 29,2006 2:16 AM
Tag：[Customize, MovableType, Sidebar]
Permalink

「カテゴリー・アーカイブページや月別アーカイブページで『最近のコメント』『最近のトラックバック』が正常に表示されません」という質問を時々頂くことがあります。

質問の通り、例えばこのサイトのトップページにある「最近のエントリー」「最近のコメント」「最近のトラックバック」のテンプレートをそのままアーカイブページに貼り付けても、ユーザーが期待する表示にはなりません。これはリスト表示に使われるMTタグ（MTEntries等）がアーカイブの属性に依存した振る舞いをするのが原因と思われます（下記の調査ではそうでもない結果になっていますが）。

これは不具合ではなく、Movable Type の仕様、あるいは制限事項と思って頂いて良いと思いますが、見落としていなければユーザーマニュアルには明示的な記述はありません。したがってこれらのリスト類がどのように表示されるか、実際に設定してみないと分からない訳です。

ということで、トップページに設定しているリストを各アーカイブページに設定した場合の結果と、それらを回避する方法について記します。

１．MTタグをアーカイブテンプレートに設定した場合の結果

公開テンプレートを例に、メインページに設定してある「最近のエントリー」「最近のコメント」「最近のトラックバック」と同じMTタグを各アーカイブページに設定した場合の表示がどのようになるかを、下記の一覧にまとめました。

	カテゴリー・アーカイブ	月別アーカイブ	エントリー・アーカイブ
最近のエントリー	該当カテゴリーのエントリー一覧	該当月のエントリー一覧	トップページと同様
最近のコメント	[MTEntries recently_commented_on指定] 該当カテゴリーの全エントリーのコメントをMTCommentsのlastn分表示 [MTEntries lastn指定] コメントのないエントリー含めlastn分表示	[MTEntries recently_commented_on指定] 該当月の全エントリー・コメントをMTCommentsのlastn分表示 [MTEntries lastn指定] 該当月のコメントのないエントリー含めlastn分表示	トップページと同様
最近のトラックバック	表示されない	トップページと同様	該当エントリーのトラックバック一覧

２．アーカイブページで正常に表示する方法

次にアーカイブページで「最近のエントリー」「最近のコメント」「最近のトラックバック」を表示する方法を記します。

２．１プラグインを利用する

MTCollate プラグインを利用すればカテゴリー・アーカイブ／月別アーカイブで正常に表示されるようです。設定方法はMTCollate を使って「最近のコメント」を表示するに記しています。ただしエントリー・アーカイブでは該当エントリーだけが対象になるようです。

もうひとつは Recents プラグインを利用します。

The blog of H.Fujimoto：最近のコメント／トラックバックをエントリーとともに表示するプラグイン

本プラグインであれば各アーカイブページで正常に動作します。いずれも MTCommentsRecent タグに mode="force" を付与することを忘れないでください。

２．２モジュール化する

リスト表示用タグをアーカイブテンプレートに直接貼り付けると冒頭の問題が発生しますが、リスト自体を独立したモジュール（部品）として登録すれば解消されます。
以下、インデックステンプレートに「最近のコメント」を登録して、それをアーカイブページから読み込む方法を紹介します。

２．２．１モジュール用テンプレートの作成

管理画面の「テンプレート」をクリック→右上の「テンプレートを新規作成」をクリック。次画面で下記を設定します。

テンプレート名：最近のコメント

出力ファイル名：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 等なんでも結構です。

２．２．２アーカイブテンプレートの修正

アーカイブテンプレートの編集画面に進み、２．２．１項で作った「最近のコメント」を表示する設定を行います。
Ａ/Ｂ/Ｃのいずれかを選択してください。

Ａ．MTInclude タグでインクルードする

Ｂ．PHPでインクルードする

C．JavaScriptでインクルードする

違いは、Ａは再構築を契機に「最近のコメント」を取得するのでスタティックページと同じ効果（=次に再構築が実行されるまで最近のコメントが更新されない）ですが設定が手軽に行えます。
Ｂはページビューを契機に「最近のコメント」取得します。「最近のコメント」はコメントが投稿されるたびに更新されるので、常に最新情報が反映されるというメリットがあります。ただしPHP化する必要がある・PHPがインストールされている必要がある等の条件があります。
ＣはＡ・Ｂの長所をもっています。

Ａ．MTInclude タグを利用する

「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。

<$MTInclude file="recentComments.html"$>

Ｂ．PHPを利用する

「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。

<? readfile('<$MTBlogURL$>recentComments.html')?>

Ｂの場合、はタグを記述するテンプレートの拡張子が .php であることが前提となります。また、1行目にXML宣言

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

が記述されている場合は

<? echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>

に変更してください。さらにアーカイブページのファイル（index.html）が残っていると、リンクをクリックした場合に .html ファイルを優先してアクセスする可能性があるため、全アーカイブページを一旦削除してから再構築されることを推奨します。

Ｃ．JavaScript を利用する

手順が前後してすいませんが、２．２．１の内容は下記に変更してください。

テンプレート名：最近のコメント

出力ファイル名：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ファイルだけを生成することを比較すれば、どちらが速いか感覚的にお分かりになると思います。先のプラグインと組み合わせればさらにきめこまかい表示の設定が可能になります。
トップページ等のインデックステンプレートのリスト類も同様の手法でインクルードすると良いでしょう。

最初の設定がやや手間取るかもしれませんが興味のある方はお試しください。なお当サイトでは全てのリストについてPHPモジュール化を行っています。

Comments [11] | Trackbacks [5]

2005年5月19日

MyBlogList にスクロールバーをつける（改）

May 19,2005 8:15 PM
Tag：[Customize, Link, MyBlogList, Scrollbar, SideMenu]
Permalink

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装飾にも対応できるように改良しました。
以下カスタマイズ方法です。

１．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 属性名と重複しないこと）。
追加が終わったら保存・再構築してください。

２．テンプレートにJavaScript追加

１項の 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行目の右辺（赤色）には、１項で設定した id 属性名を設定してください。またクレジットバナーに画像を用いず「by MyblogList」を表示している方は、4行目の赤色を

image = 0;

に変更してください。
追加が終わったら保存・再構築してください。

３．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」用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、２項のスクリプトに埋め込まれた３項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。

以上です。Windows2000・XPのIE6.0/Netscape7.0/Firefox1.0/Opera7.23・8.0で正常に表示されることを確認しています。

2005.05.19 追記
スクリプトに誤りがありましたので修正しました。

2005.05.20 追記
先頭に日付・時刻が表示されている場合に不具合がありましたので修正しました。これに伴い２項のスクリプトおよび説明を修正しました。またNEW装飾に画像を用いることができるように改良しました。

Comments [13] | Trackbacks [4]

2005年5月11日

BlogPeople のリンクリストにスクロールバーをつける

May 11,2005 11:58 PM
Tag：[BlogPeople, Customize, Link, Scrollbar, SideMenu]
Permalink

BlogPeople のリンクリストにスクロールバーを付与するカスタマイズを紹介します。参考記事は BlogPeople 主催者の

Modern Syntax：BlogPeopleリスト出力形式の変更のお知らせ

です。ありがとうございました。
かなり以前より色々なサイトでカスタマイズ方法が紹介されていますが、ここでは仕組みの詳細についてかみくだいて書いてみました。

１．CSSでスクロールバーを表示する方法

基本的手法として、サイドバーのメニューリストにスクロールバーを表示する方法は、

.hogehoge {
    height: 200px;
    overflow: auto;
}

というクラスセレクタを作り、メニューリストを div タグで括って

<div class="hogehoge">
　　　　　：
　（メニューリスト）
　　　　　：
</div>

とクラス属性 hogehoge（青色）を与えることで、メニューリストが200pxを超える長さになるとスクロールバーが自動的に付与されます。
overflow は指定したサイズ（ここでは200px）にコンテンツが入らない場合にはみ出した部分の表示方法を指定します。auto は「ブラウザ依存」を意味しますが一般的にはスクロールバーが表示されます。overflow: scroll; という指定も可能ですが、この指定では横スクロールも表示されるのでお勧めできません。

ただし BlogPeople のリンクリストでこの方法をこのまま適用して、リンクリスト表示用コード（青色）を

<div class="hogehoge">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

と括ってしまうと、一番下に表示されるクレジットバナーがスクロールバーの中に含まれてしまい、エレガントではありません。

現在、BlogPeople のリンクリスト用のコードには予めクラス属性が与えられています（上記の表示用コードの状態では目視できません）。具体的には、リンクリスト用のコードがHTMLとして表示される時には、

<div class="blogpeople-main">
　　　　　　：
　　　（リンクリスト）
　　　　　　：
</div>
<div class="blogpeople-powered-by">
　　　　　　：
　（クレジットバナー）
　　　　　　：
</div>

というタグに変換され、div タグには blogpeople-main と blogpeople-powered-by というクラス属性（青色）が設定されています。要するに、div タグがリンクリストとクレジットバナーでそれぞれ独立しているので、この構造を利用してリンクリストのみにスクロールバーを設定することができます。以下、設定方法です。

２．出力形式の選択とコード生成

上記のように表示にするためには、BlogPeople 会員ページで「表示形式の設定」の出力形式を「DIVタグ形式」にします。選択したら一番下にある「コードの作成／更新」をクリックします。

３．作成コードをテンプレートに設定

生成されたコードをマウスコピーし、ブログのテンプレートの任意の位置に貼り付けます。

４．CSS設定

１項で説明した、リンクリスト用のクラス属性 blogpeople-main とクレジットバナー用のクラス属性 blogpeople-powered-by に対応するクラスセレクタをスタイルシート（styles-site.css）に新たに定義します。

.blogpeople-main {
    height: 300px;
    overflow: auto;
}
 
.blogpeople-powered-by {
　　　　　　　：
　（クレジットバナー用のスタイル）
　　　　　　　：
}

この設定を行うことで３項でテンプレートに設定したコード

<script language="javascript" type="text/javascript" src="・・・"></script>

は div タグで括らなくても、リンクリストが一定の長さになるとその部分にだけスクロールバーが付与され、クレジットバナーがスクロールバーの外側に表示されます。私の場合は

<div class="side">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

とクラス属性 side で blogpeople-main 以外の全体のスタイル（フォント等）を指定しています。クレジットバナーのスタイル（margin 等）を特に定義する必要がなければ blogpeople-powered-by の定義は不要です。

Comments [20] | Trackbacks [20]

2005年5月 2日

個別エントリーアーカイブに同一カテゴリーのエントリーを表示

May 2,2005 1:38 AM
Tag：[Category, Customize, Entry, MovableType, MTTagInvoke, SideMenu]
Permalink

タイトルの通り、個別エントリーアーカイブで同一カテゴリーに属するエントリーの一覧を表示するカスタマイズです。公開テンプレートのカテゴリーアーカイブで同一カテゴリーのエントリー一覧を表示していますが、本カスタマイズを行うことで同じものを個別エントリーアーカイブに表示することができます。

一番最初にこのカスタマイズを発見したのは実はかなり昔で、下の記事です。

今日まで、そして明日から。-3rd spiral-：個別記事のページにカテゴリのエントリ一覧を表示する

87design：This Category Entries (easy)（元記事）

ご近所サイトさんでは下記がありました（とりこぼしご容赦ください）。

ぐーたら on MT：個別記事にその記事の属するカテゴリーの記事一覧を。

Magic White：個別記事にカテゴリー内記事一覧表示

Stupid Excuse：This Category Entries

やむやむ：ThisCategoryEntriesですと！？

以下、カスタマイズ方法です。

１．MTTagInvoke プラグインをダウンロード

下記のサイトよりプラグインをダウンロード・解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置（またはアップロード）、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置（またはアップロード）します。

MT Extensions：MTTagInvoke

アップロード後、Movable Type 管理画面の

メイン・メニュー > システム・メニュー > プラグイン

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

２．テンプレートの設定

個別エントリーアーカイブテンプレートのサイドバーに下記のタグを設定します。上記のサイトからの情報をまとめて3パターン用意してみました。緑色は公開テンプレート用の設定を示しています。

MTTagInvoke プラグインMTタグ対応表
1.0（現在）	0.9
MTTagInvokeName	MTTagName
MTTagInvokeAttribute	MTTagAttribute
MTTagInvokeContent	MTTagContent

２．１同一カテゴリーに属するエントリー一覧を表示

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

２．２表示するエントリー数を指定

２．１に青色部分を追加します。サンプルは最近の5件を表示する設定です。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">5</MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

２．３エントリー毎にコメントを表示

２．１または２．２に青色字部分を追加します。サンプルは最近の5コメントを表示する設定です。

<div class="sidetitle">
Entries of this Category
</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><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
<div class="side">

２．４ツリー化＆日別表示をつける

「最近のエントリー」の日別表示を適用させてみました。サンプルは最近の10件を表示する設定になっています。lastn 指定の行を外せば全エントリーが表示されます。タグは ul -li のリスト形式になっていますのでご注意ください。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">10</MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTTagInvokeContent>
</MTTagInvoke>
</div>

MTTagInvoke プラグインはMTタグのタグアトリビュート（属性）に対してさらにMTタグを利用できるというものです。一番目のサンプルを例にすると、本来書きたいMTタグは

<MTEntries category="<$MTEntryCategory$>">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>

となります。これは「最近のエントリー」表示用タグで、これに赤色部分で「表示されているエントリーのカテゴリーと同じエントリーを表示」を指定しているのですが、タグアトリビュート category の指定にMT変数タグ <$MTEntryCategory$> は指定できません（再構築でエラーとなります）。そこで MTTagInvoke プラグインを用いて、MTEntries の代わりに MTタグ名の指定

<MTTagInvoke tag_name="MTEntries">

を行い、続いて「タグアトリビュート category に <$MTEntryCategory$> を使う」という指定、

<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>

を行うことで、

<MTEntries category="<$MTEntryCategory$>">

と同じ効果を得ることができる訳です。ここではタグアトリビュートをひとつだけ指定していますが、複数指定することも可能です。

2006.05.25 追記
２．３項のタグで、コメントがないエントリーが表示される不具合を修正しました。

2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。

Comments [29] | Trackbacks [21]

2005年4月21日

BlogPeopleの「私を登録」での「サイト名」欄の改善

April 21,2005 1:25 PM
Tag：[BlogPeople, Customize, MovableType]
Permalink

BlogPeopleのリンクリストにリンクを登録する時、登録サイトに表示されているBlogPeopleの「私を登録（うちはRegister this site ?）」をクリックされると思いますが、トップページ以外、例えば個別エントリーアーカイブ等で「私を登録」をクリックすると、登録ダイアログの「サイト名」欄にエントリータイトルが表示されることがあります。
サイトを登録する時はその都度そこで削除すれば良いのですが、他サイトからリンクしてもらってそこのリンクに「サイト名＋エントリー」で表示されてしまっている場合は、コメントを出して変更してもらうという手間をかけていました。

ということで、どのページから登録されても「サイト名」欄にはサイト名だけしか表示しないカスタマイズを行いました。参考記事および元記事は下記です。ありがとうございました。

今日の覚え書き：BlogPeopleの「私を登録」を使いやすく

cocoons.org*：BPの「私を追加」をいじる

CEFA::Blog：BlogPeopleサービス「私を登録」の落とし穴

以下、参考サイト様と似たような内容になってしまって大変恐縮ですが動作説明です。
BlogPeopleの「私を登録」では「サイト名」欄名をJavaScriptの

document.title

で取得しています。Movable Type の個別エントリーアーカイブのデフォルトテンプレートでは title タグに

<$MTBlogName$>: <$MTEntryTitle$>

が設定されていますので、結果的にエントリータイトルが表示されます。
タイトルのみを取得するようにするためには「私を登録」のタグを下記のように修正します。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp??（中略）?='+escape(document.title'<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">私を登録</a>

再構築すると、変更部分のMTタグは文字列に変換されてHTMLソースに表示されますので、そういう意味では青色部分にサイト名を直接書き込んでも同じ効果が得られます。

Comments [7] | Trackbacks [1]

2005年4月 3日

トラックバック・ピープルのバナーをランダム表示する

April 3,2005 10:10 PM
Tag：[BlogPeople, Customize, TrackbackPeople]
Permalink

ダジャレ・トラックバック・ピープルは3つのバナーを登録しておりまして、時々切り替えて使おうと思っていましたが手動で設定を変更するのはやや面倒なので、自動的にランダム表示できるよう細工してみました。
下記のように生成スクリプトにPHPを埋め込んでいます。確率の問題もありますが一応1クリック毎に切り替わるようになっています。

<?php
    mt_srand((double) microtime() * 1000000);
?>
<script language="javascript">b=0<?php echo mt_rand(0, 2); ?>;</script><script type="text/javascript" src="・・・（略）・・・" ></script>

青色部分を追加します。消し線の数字はバナーの番号を示している部分で、この部分も青色のスクリプトに置き換えます。バナーが2種類の場合は

mt_rand(0, 1);

とすればOKです。
他の生成コードを利用されている場合も

b=n;

の n の部分を置き換えれば良いと思います（試していませんので間違ってたらお許しを）。

Comments [0] | Trackbacks [0]

2004年12月20日

用語集追加

December 20,2004 1:20 AM
Tag：[]
Permalink

サイドバーメニューの「Introduction」に「用語集」を追加しました。とりあえずこのサイトで用いる用語の中から分かりづらいと思われるものを選んで書いてみましたが、このページはどんどん追加していきたいと考えておりますので、追加希望等がございましたらこちらのエントリーのコメントにご記入頂ければ幸いです。
用語集をカテゴリーとして独立させる手もありますが、それについては別途検討したいと思います。

このページとは別にブログの使い方を記したページを随分前から作っておりまして、そのページとペアで公開する予定でしたがまだ陽の目を見れそうにないので、アクセス頻度の高そうなこちらのページだけ先に公開することにしました。

Comments [10] | Trackbacks [0]

2004年8月31日

QRコード設定

August 31,2004 1:38 AM
Tag：[]
Permalink

QRcode Magic WhiteさんのQRコードつけてみた。経由のurl2QRcodeで生成したQRコードをサイドメニューにつけました。QRコードにはblogの携帯用URLを変換したものが設定されています。そしてこの画面に表示されたQRコードを携帯で認識させればURLをわざわざキーで打ち込まなくても携帯用のサイトにいくことができます。使用頻度は明らかに低いと思いますがQRコードの幾何学的デザインが気に入っているので。
本当はMTQRcodeをつけてみたいのですがWindows自宅サーバ者にはかなりハードル高そうでとりあえず変換した画像を貼り付けてます。

で、「これつけても読み込めないしなー」と思っていましたが、先日購入した携帯に「バーコードリーダ」というのがあり、起動すると真四角の枠が出たので試しにQRコードを認識させたところ、見事読み込めました（マニュアル読んでない）。
Magic WhiteさんのQRcodeも正常に読み込めました。

Comments [6] | Trackbacks [3]

2004年7月16日

エントリーの画像をサイドメニューに表示

July 16,2004 1:30 AM
Tag：[]
Permalink

エントリーに携帯等で撮った画像を表示しているブログをよく見かけますが、エントリーの画像を検索してサイドバーに自動的に表示するカスタマイズをご紹介致します。具体的な動作は、エントリーの中に書かれている img 要素の src 属性を検索し、そこで指定された画像をサイドバーに表示します。Collect プラグインというものを利用しています。
以下、手順メモです。

１．プラグインのダウンロード

Collect Plugin for Movable Type の Collect より Plugin をクリックします（ソースが表示される場合は右クリックして「対象をファイルに保存」を選択）。

２．プラグインのアップロード

ダウンロードした Collect.pl を plugins ディレクトリ直下にアップロードします。

３．テンプレート修正

リスト１のタグを、画像を表示したいテンプレート（メインページ／カテゴリーアーカイブ／日付アーカイブ／個別エントリーアーカイブ等）のサイドバー部分に追加します。次のタグは最近の8エントリーより、各エントリー内にある一番最初のイメージを表示します。

<MTEntries lastn="8">
<MTCollect tags="img">
<MTCollectThis show="0">
<$MTEntryBody$>
</MTCollectThis>
<MTIfCollected tags="img">
<MTCollected tags="img" lastn="1">
<a href="<$MTEntryLink$>">
<img src="<$MTCollectedAttr attr="src"$>" style="margin:10px" />
</a><br />
</MTCollected>
</MTIfCollected>
</MTCollect>
</MTEntries>

リスト１：最近の8エントリーより各エントリー内にある一番最初のイメージを表示

リスト２のタグは、全エントリーから最新の5個のイメージを表示します。

<MTCollect tags="img">
<MTEntries lastn="5">
<MTCollectThis>
<$MTEntryBody$>
<$MTEntryMore$>
</MTCollectThis>
</MTEntries>
<MTIfCollected>
Recent Photos of all <$MTCollectedTotalCount$> photos<br />
<MTCollected tags="img" lastn="5">
<img width="100" src="<$MTCollectedAttr attr="src"$>" alt="<$MTCollectedAttr attr="alt"$>"<$MTCollectedContent$><br />
</MTCollected>
<MTElse>
No Photos
</MTElse>
</MTIfCollected>
</MTCollect>

リスト２：全エントリーから最新の5個のイメージを表示

以上です。なおこの機能については以下のサイトを参考にさせて頂きました（テンプレートもそこからの抜粋です）。

あとはカメラ付き携帯を買うだけ（爆）。

2005.08.08 追記
本文を全面修正しました。

2006.09.10 追記
マークアップ修正。

Comments [6] | Trackbacks [0]

小粋空間 - a cheap joke and a play on words site

Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法

１．日付+カテゴリー（ユーザ）アーカイブについて

２．月別カテゴリーアーカイブの作成

２．１ アーカイブテンプレートの追加

２．１．１ 既存のカテゴリー・アーカイブを利用する場合

２．１．２ 新規で作成する場合

２．２ アーカイブマッピングを追加

３．月別カテゴリーアーカイブリストへのリンクを追加

４．完成例

５．検索結果ページ数増加について

アーカイブのブログ記事一覧をサイドバーに表示する

１．月別アーカイブリストのブログ記事一覧を表示する

２．カテゴリーアーカイブリストのブログ記事一覧を表示する

月別アーカイブリストの年毎の折りたたみ for Movable Type

１．事前準備

２．スクリプトのダウンロード

３．スクリプトの修正

４．スクリプトのアップロード

５．テンプレートの修正（script タグ追加）

６．テンプレートの修正（折りたたみつき月別アーカイブリスト追加）

月別アーカイブリストのツリー化 for Movable Type

１．各年の月をツリー化

１．１ テンプレートの修正

１．２ スタイルシートの修正

２．年と各年の月をツリー化

２．１ テンプレートの修正

２．２ スタイルシートの修正

３．その他

エントリー・アーカイブで同一カテゴリーのトラックバックを表示する

１．プラグインの修正

２．テンプレートの設定

２．１ デフォルトテンプレートの場合

２．２ 公開テンプレートの場合

エントリー・アーカイブで同一カテゴリーのコメントを表示する

１．プラグインのインストール

２．テンプレートの設定

２．１ デフォルトテンプレートの場合

２．２ 公開テンプレートの場合

アーカイブページに「最近のコメント」「最近のトラックバック」を表示する

１．MTタグをアーカイブテンプレートに設定した場合の結果

２．アーカイブページで正常に表示する方法

２．１ プラグインを利用する

２．２ モジュール化する

２．２．１ モジュール用テンプレートの作成

２．２．２ アーカイブテンプレートの修正

Ａ．MTInclude タグを利用する

Ｂ．PHPを利用する

Ｃ．JavaScript を利用する

３．まとめ

MyBlogList にスクロールバーをつける（改）

１．MyBlogList 表示用タグの修正

２．テンプレートにJavaScript追加

３．CSS設定

BlogPeople のリンクリストにスクロールバーをつける

１．CSSでスクロールバーを表示する方法

２．出力形式の選択とコード生成

３．作成コードをテンプレートに設定

４．CSS設定

個別エントリーアーカイブに同一カテゴリーのエントリーを表示

１．MTTagInvoke プラグインをダウンロード

２．テンプレートの設定

２．１ 同一カテゴリーに属するエントリー一覧を表示

２．２ 表示するエントリー数を指定

２．３ エントリー毎にコメントを表示

２．４ ツリー化＆日別表示をつける

BlogPeopleの「私を登録」での「サイト名」欄の改善

トラックバック・ピープルのバナーをランダム表示する

用語集追加

QRコード設定

エントリーの画像をサイドメニューに表示

１．プラグインのダウンロード

２．プラグインのアップロード

３．テンプレート修正

リスト１：最近の8エントリーより各エントリー内にある一番最初のイメージを表示

リスト２：全エントリーから最新の5個のイメージを表示

２．１アーカイブテンプレートの追加

２．１．１既存のカテゴリー・アーカイブを利用する場合

２．１．２新規で作成する場合

２．２アーカイブマッピングを追加

１．１テンプレートの修正

１．２スタイルシートの修正

２．１テンプレートの修正

２．２スタイルシートの修正

２．１デフォルトテンプレートの場合

２．２公開テンプレートの場合

２．１デフォルトテンプレートの場合

２．２公開テンプレートの場合

２．１プラグインを利用する

２．２モジュール化する

２．２．１モジュール用テンプレートの作成

２．２．２アーカイブテンプレートの修正

２．１同一カテゴリーに属するエントリー一覧を表示

２．２表示するエントリー数を指定

２．３エントリー毎にコメントを表示

２．４ツリー化＆日別表示をつける