2006年ブログ総括
今回は色々な側面から、このブログで起きた1年を振り返ってみたいと思います。
毎日エントリー
ブログを始めて2年半余りになりますが、ついに昨年はネタが直前まで浮かばないという状態が何回が発生し、非常に焦った思いをしました。そういう苦い経験から今年は「とにかく思いついたことを未公開エントリーとして書き溜める」という自己目標をたて、ネタがなくなると書き溜めたものから使えそうなものを掘り起こすという作業を繰り返してきました。
このお陰で、今年はなんとか1エントリー/日を達成できました。ちなみに、未公開エントリーは使えるものから公開できない位寒いダジャレも含めて、まだ140ほど残ってます。
また今年は、頂いたコメントの質問・要望に対し、エントリー上で回答・公開したものがかなり多く、これには非常に助けられました。まさに「もちつもたれつ」というところでしょうか。まだ回答できていないものもあり、これらは年を越してしまうことになりますが、継続して回答したいと思います。
テンプレート・カスタマイズに対するご質問やエントリーにないご要望等は、実現の可否にかかわらず受け付けております。
はてなブックマーク
巷で流行っている「はてなブックマーク」、その「最近の人気エントリー」にいくつかエントリーされましたので、気がついたものを以下に挙げておきます。
- CSS JavaScript によるカラムレイアウト切り替え
- Amazon アソシエイト作成支援ツール一覧
- CSSで画像に影をつける（ドロップシャドウ）
- Movable Type プラグイン一覧
- Firefox 1.5 と Firefox 2.0 を共存させる
- Internet Explorer 6 と Internet Explorer 7 を共存させる
- Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その1：概要）
- CSSでブログに影をつける（ドロップシャドウ）
- JavaScript で文字をトリミングする
- RSS Feed（フィード）を表示する
その他、はてなブックマークから被ブックマークされているすべてのエントリーは「www.koikikukan.com の注目エントリー」をご覧ください。
このような瞬間風速的なアクセスは非常に嬉しく、ワクワクするのも事実ですが、長いスパンで有効な内容のエントリーについては、そのまま埋もれてしまわないよう、訪問者の方の目に触れられるような仕組みがないかと思案中です。例えばタグ等でそういう記事をうまく抜き出す仕組みができれば、数ヶ月周期で RSS で配信するという手もあるかと。
BlogPeople1200リンク
11月2日に BlogPeople の被リンク数が 1200 になりました（関連記事）。現在 1250 で、来年には是非 1400 を超えたいと思います。
まだ当サイトへリンクしていない方はどしどしリンクしてやってください（関連記事）。
紹介いただいた書籍
今年は下記の書籍で当サイト、あるいは当サイトのカスタマイズを紹介いただきました。ありがとうございました。
- 月刊 ASCII (アスキー) 04月号 [雑誌]
- Movable Typeでつくる!最強のブログサイト
- Movable Type 3.3でつくる!最強のブログサイト
- Movable Typeでつくる！最強のブログサイト プラグイン＆カスタマイズ編
- MOVABLETYPE PLUGINS DIRECTORY
テンプレート
今年は、FC2 ブログ・Seesaa ブログ・livedoor ブログの3つのブログサービスに対応したテンプレートを公開しました。ひとつのサイトで、各ブログツール・ブログサービスに対応したテンプレート配布というのは他ではあまりみかけないので、今後もこのサイトの売りのひとつにしたいと思っています（どこまでメンテナンスできるか分かりませんが…）。
とりあえず来年は WordPress 対応のテンプレートを公開したいと思っています。
YST 絶不調
今年のいつ頃からか忘れましたが、YST からのアクセスが激減し、SEO 対策をそこそこやったつもりですが、さらにアクセスが減ってしまい、現在 3% をきっている状態です。逆に Google 検索は好調です。
- YST（Yahoo! Search Technology）との戦い
- YST（Yahoo! Search Technology）との戦い：その2
- YST（Yahoo! Search Technology）との戦い：その3 ＆ Google 関連検索
Amazon の売れ筋商品
アフィリエイトでは、Amazon を利用して紹介した下記の商品が結構売れました。
こういうお小遣いは小額ながら、正直モチベーションを上げてくれます。
まとめ
とにかく無事に1年を終えることができたことが何よりの喜びです。皆様には大変お世話になりました。来年もテンプレート・カスタマイズ記事とダジャレを中心に書き続ける所存ですので、ご指導・ご鞭撻の程、どうぞよろしくお願い致します。
それでは2007年もどうぞよろしくお願い致します。そして良いお年をお迎えください。
YouTube 革命
2006 年に大ブレイクし、今年の Web2.0 を代表するサービスにとどまらず、映像の世界をも大きく揺るがそうとしている YouTube の新書が発売中です。
 | YouTube革命 テレビ業界を震撼させる「動画共有」ビジネスのゆくえ ソフトバンククリエイティブ 2006-12-16 |
YouTube（ユーチューブ）は、すでにご存知の通り、無料/大容量/タグをつけることで検索できる/動画を共有できる/ブログ等で動画を公開できる/連鎖反応（人気のある動画から新たな動画が生まれる）等、Web2.0 の特徴をもち、人気が急速に伸びた動画配信サービスです。著作権違反の動画の削除タイミングが緩やかであったことも人気に拍車をかけました。（以上、本書より引用）
この本では、
- 動画共有革命の衝撃
- ユーチューブのメディアパワー
- 方向転換を余儀なくされるテレビ業界
- 動画共有が創造するビジネスモデル
- 著作権2.0を考える
- ユーチューブ後の世界
の6章に分け、YouTube が登場したことによってもたらされた変革、インターネット広告や著作権の考え方等が語られています。
とりわけ著作権については、違反防止によって著作者の利益を守ることと、違反によって逆に著作者に得られる利益を考え、共存することについての比較は興味深いです。全ての著作物が同一の性質でないにしても、ウェブの普及が進むにしたがって、前者から後者へシフトしていくのではないかと思います。
ちなみに、YouTube の「Tube」はブラウン管を表すそうです。そういえばトレードマークの「Tube」の文字の部分がブラウン管になってました。
ドネーション（寄付）の方法
当サイトのテンプレートやカスタマイズあるいはご質問に対する回答について、以前よりドネーション（寄付）を受け付けています。送金には paypal というサービスを利用していますが、やや分かりづらく、「入金方法を教えてください」というご質問も頂きましたので、本エントリーにて説明致します。
paypal はクレジットカード決済です。銀行振込みをご希望の方は、プロフィール→メールフォームよりご連絡頂ければ入金口座をご連絡致します。
また、ドネーションのリンクで説明しております通り、将来に向けてのご寄付（例：ドネーションによる機能追加や改善要望）は、それらが実現しない可能性があるためご遠慮ください。
 テンプレートのページあるいはカスタマイズのページにある「Make a Donation」のリンクをクリック。 |
 金額が設定されていない場合は、寄付金額（単位はドル）を設定（?）して、paypal のアカウントを持っていない方は「Continue」をクリック（?）。アカウントをお持ちの方は、メールアドレス・パスワードを入力して「Log In」をクリック。 |
 金額が設定されている場合、アカウントを持っていない方は「Continue」をクリック（?）。アカウントをお持ちの方は、メールアドレス・パスワードを入力して「Log In」をクリック。 |
 アカウントを持っていない方は、「Continue」をクリックして表示された下記のページで必要項目（下記）を入力します。Adress2 以外は全て必須です。 |
| メニュー | 項目 | 設定内容 |
|---|---|---|
| ?Country | Country | 国名（Japan） |
| ?Credit or Debit Card Information | First Name | クレジットカードに記載された名 |
| Last Name | クレジットカードに記載された姓 | |
| Card Type | プルダウンメニュー（MasterCard/Visa/Discover/American Express）から利用可能な会社を選択 | |
| Card Number | カード番号（16桁・ハイフンなし） | |
| Expiration Date | 有効期限 | |
| Card Security Code | セキュリティコード（カード裏に記載された番号の下3桁） | |
| ?Billing Address | Address 1 | 町名・番地等（参考） |
| Address 2 | ビル・マンション名等、必要に応じて記入 | |
| City | 市 | |
| Prefecture | 在住する県名をプルダウンメニューから選択 | |
| Postal Code | 郵便番号（7桁） | |
| Is this your shipping address? | 入力した住所が配達先と同一の住所か、異なる住所かを選択 | |
| ?Contact Information | Email Address | メールアドレス |
| Home Telephone | 電話番号（国番号は不要で市外局番（0なし）から入力） | |
| ?Security Check | Enter the code as shown below | ページ下に表示されたセキュリティコードを入力 |
入力後、フォーム一番したの「Continue Checkout」をクリック（?）。入力項目に誤りがなければ次のような画面が表示されます。
 内容を確認して「Pay」をクリック。入力項目に誤りがある場合は警告画面が表示されるので指示にしたがって修正します。 |
Movable Type wheeljack の新機能（その2：Assets関連MTタグ）
2006年12月27日現在の Movalbe Type wheeljack Assets 関連タグ一覧です。Asstes 以外にもいくつかの新しい MT タグが追加されています。
| タグ種別 | タグ名 | 意味 |
|---|---|---|
| コンテナ | MTAssets | Asset の一覧 |
| MTAsset | 一意の Asset を表示（id 属性必須） | |
| MTAssetTags | Asset のタグ一覧 | |
| MTAssetsHeader | Asset リストの最初だけ実行 | |
| MTAssetsFooter | Asset リストの最後だけ実行 | |
| 条件 | MTAssetIfTagged | Asset がタグ付けされている場合に実行 |
| MTAssetIsFirstInRow | 不明 | |
| MTAssetIsLastInRow | 不明 | |
| 変数 | MTAssetID | Assetに割り当てられる ID |
| MTAssetFileName | Asset のファイル名 | |
| MTAssetURL | Asset のURL | |
| MTAssetType | Asset のタイプ | |
| MTAssetMimeType | Asset のマイムタイプ | |
| MTAssetFilePath | Asset のパス | |
| MTAssetDateAdded | Asset をアップロードした日付？ | |
| MTAssetAddedBy | Asset をアップロードしたユーザ？ | |
| MTAssetProperty | Asset のプロパティ | |
| MTAssetFileExt | Asset の拡張子 | |
| MTAssetThumbnailURL | Asset のサムネイルURL | |
| MTAssetLink | Asset のリンク（a要素で表示） | |
| MTAssetThumbnailLink | Asset のサムネイルへのリンク（a + img 要素で表示） | |
| MTAssetCount | Asset 数 |
また MTAssets には下記の属性が付与できるようです。
- author
- type
- file_ext
- tag
- tags
その他、MTEntries と同じ振る舞いが可能な属性も使えるようです。これらを用いれば、MT のデフォルト機能として、最近アップロードした画像（サムネイル）リストをサイドバーに表示することも可能になるでしょう。
MTEntries タグの lastn 属性と sort_order 属性（ascend）の同時指定が有効にならない件について
Category：[トラブルシューティング]
Tag：[MovableType, MTEntries, TroubleShooting]
Permalink
テンプレートに対し、一番古いエントリータイトルを取得するタグ（下記）を設定しても、最新のエントリータイトルが取得されます。
<MTEntries lastn="1" sort_order="ascend"><$MTEntryTitle$></MTEntries>この問題は「『Ajax月送りカレンダー』でデフォルト表示を一番過去の月にしたい」というご質問で発覚しました。
とりあえずネットで類似情報がないか検索したところ、Movable Type Community Forum で下記の記事を発見。
Sort_order Ascend Not Working In 3.33?
lastn 属性は、MTEntries タグで指定された sort_order 属性をくつがえす、内部の「sort_order="descend"」を持っています。 この振舞いのため、lastn 属性が指定された場合、sort_order 属性は無視されます
と、Nov 3 2006, 07:54 PM の回答で書かれています。たしかに lib/MT/Template/ContextHandlers.pm の 1333 行にそのような実装がありました。
仕様か不具合かという話は別として、とりあえず lastn 属性が指定された場合でも sort_order 属性を有効にするためのパッチを作ってみました。
--- lib/MT/Template/ContextHandlers.pm.bak Fri Aug 4 12:31:56 2006
+++ lib/MT/Template/ContextHandlers.pm Wed Dec 27 00:47:35 2006
@@ -1330,7 +1330,7 @@
}
}
$args{'sort'} = 'created_on';
- $args{direction} = 'descend';
+ $args{direction} = $args->{sort_order} ? $args->{sort_order} : 'descend';
if (!@filters) {
if (my $last = $args->{lastn}) {
$args{limit} = $last;が、このパッチは他の属性と競合した場合の問題等を考慮していません。ご指摘ならびに改善案をお待ち申し上げます（他力本願）。
タグ検索でエントリーの画像を表示する
Category：[エントリー・タグ, 検索]
Tag：[Customize, MovableType, SearchResult, Tag]
Permalink
Movable Type のタグ検索機能で、エントリータイトル・概要の代わりに、エントリーに含まれる画像を検索結果画面に表示するカスタマイズです。
下のスクリーンショットは、デフォルトテンプレートで、"image" というタグを与えた3つのエントリーにそれぞれ異なる画像を表示させ、"image" タグで検索した検索結果画面のサンプルです。
デザインが大雑把で申し訳ありませんが、以前このカスタマイズについてのご質問を頂いていてからかなり時間が経ってしまいましたので、取り急ぎの公開です。
試してみたところ、Collect プラグインを利用すれば、タグ検索による画像表示が行えることが判明しました。
１．プラグインのダウンロード
下記のサイトにある「Download」のリンクをクリックして、Collect Plugin をダウンロード
staggernation.com：Collect Plugin for Movable Type
解凍した中にある Collect.pl を plugins フォルダ直下にアップロード。
２．検索結果テンプレートの修正
ここでは、デフォルトテンプレートを例にして <MTSearchResults>～</MTSearchResults> の修正箇所を示します。
リスト1 のように、赤色を削除して青色を追加します。
リスト1 検索結果テンプレート修正箇所
<MTSearchResults>
<MTBlogResultHeader>
<h3 class="search-results-header">
<MTIfStraightSearch>
ブログ: <$MTBlogName$> での検索結果
</MTIfStraightSearch>
<MTIfTagSearch>
<$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
</MTIfTagSearch>
</h3>
<div class="search-results-container">
<MTIfTagSearch>
<ul>
</MTIfTagSearch>
</MTBlogResultHeader>
<MTIfStraightSearch>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
</MTIfStraightSearch>
<MTIfTagSearch>
<div class="entry-tags">
<h4 class="entry-tags-header">タグ:</h4>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
<MTCollect tags="img">
<MTCollectThis show="0">
<$MTEntryBody$>
</MTCollectThis>
<MTIfCollected tags="img">
<MTCollected tags="img" lastn="1">
<li style="display:inline"><a href="<$MTEntryPermalink$>"><img src="<$MTCollectedAttr attr="src"$>" /></a></li>
</MTCollected>
</MTIfCollected>
</MTCollect>
</MTIfTagSearch>
<MTIfStraightSearch>
<p class="entry-footer">
<span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$> </MTIfNonEmpty>日時: <$MTEntryDate$></span>
</p>
</MTIfStraightSearch>
<MTBlogResultFooter>
<MTIfTagSearch>
</ul>
</MTIfTagSearch>
</div>
</MTBlogResultFooter>
</MTSearchResults>ここで行っている修正は主に下記の通りです。
- タグ表示部分に Collect プラグインの MT タグを挿入
- タグ検索は順序なしリスト（ul - li）で表示
- タグ検索結果の ul 要素の開始タグは
MTBlogResultHeaderに、終了タグはMTBlogResultFooterに埋め込み（ここに埋め込まないと、検出されたエントリー数分表示されるため） - エントリータイトルおよび投稿者情報部分は通常検索時のみ表示されるよう、
<MTIfStraightSearch>～<MTIfStraightSearch>で括る
修正方法は他にも色々ありますので、お試しになってください
３．エントリーに含まれる画像の表示数を変更する
エントリーに含まれる画像の件数を設定しているリスト2 の赤色部分を変更します。
リスト2 画像表示数変更方法
<MTCollected tags="img" lastn="1">なお、エントリー表示数を制御することはできません（検索されたエントリー数分を全て表示）。
記事（エントリー）に絵文字を使う for Serene Bach
Serene Bach の記事（エントリー）およびコメント欄に絵文字を入力できるようにするカスタマイズです。
これは「公開テンプレートのコメントに絵文字を使う for SereneBach」のテクニックを記事部分に適用させたものです。
記事に絵文字を入力するカスタマイズは stroll::blog さんの「sb絵文字入力支援スクリプト」がポピュラーですが、「ブラウザに依存しないで入力する方法はないですか？」という質問を頂いたので、本エントリーにて紹介致します。
設定方法は当サイトで公開しているテンプレートを例にしていますが、一部修正すれば他のテンプレートでも利用可能です。
なお「公開テンプレートのコメントに絵文字を使う for SereneBach」と設定内容が若干異なるため、記事とコメントの両方に絵文字と併用したい場合は、本エントリーのカスタマイズを行ってください（本記事はコメントの絵文字にも対応しています）。
１．記事投稿画面の修正
Serene Bach をインストールしている配下にある、
lib/resource/ja/entry.html
をダウンロードして、任意のエディタで開き、１．１～１．３項の修正を行ないます。
修正する自信のない方は、下記のリンクから修正済の entry.zip（または entry.lzh） をダウンロードして解凍し、２項に進んでください。なお、EUC-JP 版とUTF-8 版でダウンロードするファイルが異なりますのでご注意ください。
このファイルは 2.05R をもとに修正したものです（2.09R2.12R まで確認済）。Serene Bach バージョンアップには対応できていないかもしれませんので予めご了承ください。
１．１ script 要素の追加
ファイルの一番先頭に下記を追加します。
<script type="text/javascript" src="emoji.js" charset="utf-8"></script>１．２ 「本文」への絵文字一覧表示スクリプトの追加
「本文」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。
<div class="entry_tool">
<!-- BEGIN sb_entry_extool_body -->
<a href="#" onclick="return addHtmlTag('entry_body','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>
<!-- END sb_entry_extool_body -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 5.5em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_body');
</script>
</dd></dl>
<textarea name="entry_body" id="entry_body" rows="{sb_entry_body_rows}" cols="40" class="text">{sb_entry_body}</textarea>１．３ 「続き」への絵文字一覧表示スクリプトの追加
「続き」部分も絵文字を使いたい場合は、「続き」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。
<div class="entry_tool">
<!-- BEGIN sb_entry_extool_more -->
<a href="#" onclick="return addHtmlTag('entry_more','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>
<!-- END sb_entry_extool_more -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 8.1em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_more');
</script>
</dd></dl>
<textarea name="entry_more" id="entry_more" rows="15" cols="40" class="text">{sb_entry_more}</textarea>２．ファイルのアップロード
修正した entry.html を元のディレクトリにアップロードします。
３．スクリプトのダウンロード
下記のリンクより emoji.js をダウンロードしてください。
この emoji.js は「公開テンプレートのコメントに絵文字を使う for SereneBach」で配布しているものと若干異なります。
「公開テンプレートのコメントに絵文字を使う for SereneBach」で配布している emoji.js をお使いの場合は、下記の修正を行ってください。上記のリンクよりダウンロードしてお使いになる場合は、そのまま４項へ進んでください。
３．１ 絵文字一覧表示部分（赤色を削除し、青色を追加）
function writeCustmizeEmojiTagList(textarea) {
// コメントを入力するテキストエリアを指定
var textarea = 'document.mainform.entry_body';
// ***************** 設定ここまで *****************３．２ 絵文字表示部分（赤色を削除し、青色を追加）
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag(commentAreaIdName, commentAreaTag, commentBodyClassName) {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();４．スクリプトに絵文字URLの追加
emoji.js を任意のエディタで開き、ご自身のお好きな絵文字を下記の青色のように挿入してください。
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('00a', 'http://yourhost/images/pp_00a.gif');
list[list.length] = new Array('01a', 'http://yourhost/images/pp_01a.gif');
list[list.length] = new Array('02a', 'http://yourhost/images/pp_02a.gif');
：
return list;
}ちなみに、冒頭のスクリーンショットに表示させている画像は下記のサイトよりお借りしました。ありがとうございました。
.:. PEPPER .:. FREE GRAPHICS FOR WEB SITE
注：この emoji.js のファイルの文字コードは UTF-8 です。EUC-JP 版の Serene Bach をお使いでも、ファイルの文字コードは UTF-8 のままお使いください。
５．スクリプトのアップロード
修正した emoji.js を、index.html と同じディレクトリにアップロードします。
６．テンプレートの修正
</head> の直前に下記のタグを追加します。
<script type="text/javascript" src="{site_top}emoji.js" charset="utf-8"></script>そして記事関連ブロック終了の直前に、記事に表示された、絵文字に対応する記号を実際の絵文字に変換するためのスクリプト（青色部分）を追加します。
<!-- BEGIN entry -->
<h2 id="entry{entry_id}" class="date">{entry_date}</h2>
<div class="entry">
<h3 class="entry-header">●<a href="{entry_permalink}">{entry_title}</a></h3>
<div class="entry-content">
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
</div>
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} | {trackback_num}
</div>
</div>
{trackback_auto_discovery}
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('content', 'div', 'entry_body'); // 本文に絵文字を表示する
changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示する
// -->
</script>
<!-- END entry -->赤色部分はご利用のテンプレートによって異なります、それぞれの意味は下記の通りです。
- content：中央カラム全体を括っている div 要素の id 属性（一例として "main" という設定のテンプレートが結構あるようですが、ご利用のテンプレートをよくご確認ください）
- div：記事またはコメント本文全体を括っているタグ
- entry_body / entry_more：記事またはコメント本文全体を括っているタグの class 属性
要するに画像を変換する場所を絞り込んでいる訳です。この部分でつまづく場合が多いようですが、ご利用のテンプレートおよび本エントリーのコメント欄等で不具合をよくご確認の上、どうしても分からない場合のみご質問ください。
changeCustmizeEmojiTag の起動は、「本文「用と「続き」用の2行があります。「続き」に絵文字を使わない場合は
changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示するを削除してください。
記事に絵文字を表示するカスタマイズは以上です。
- 管理画面の新規記事および記事編集画面に絵文字が表示されること
- 絵文字をクリックすると、テキストエリアに絵文字に対応した値が設定されること
- 記事を公開すると、ブログの記事部分に絵文字が表示されること
を確認してください。
コメントにも絵文字を利用する場合は次項のカスタマイズを行ってください。
７．コメント部分にも絵文字を利用する場合
まずコメントの form 属性に name 属性を追加してください。
<form name="comform" action="{site_cgi}" method="post">
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">Comment form</h2>
<div class="comments-open-content">
<div id="comments-open-data">次に、テンプレートのコメント部分に絵文字を表示するためのタグを追加します。
<dl>
<dt><label for="name" id="labelname">name:</label></dt>
<dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" size="20" /></dd>
<dt><label for="email" id="labelemail">email:</label></dt>
<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" size="30" /></dd>
<dt><label for="url" id="labelurl">url:</label></dt>
<dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" size="30" /></dd>
<dt><label id="cookie_label" for="set_cookie">cookie:</label></dt>
<dd><input type="checkbox" tabindex="4" name="set_cookie" value="1" id="set_cookie" /></dd>
<dt>icons:</dt><dd style="margin-left: 5.5em;">
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList('document.comform.description');
// -->
</script>
</dd>
<dt><label for="description" id="labeldescription">comments:</label></dt>
<dd><textarea tabindex="5" id="description" name="description" rows="8" cols="45"></textarea></dd>
</dl>最後にコメント関連ブロック終了の直前に青色のタグを追加します。
</form>
</div>
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('comments', 'div' ,'comment');
// -->
</script>
<!-- END comment_area -->「公開テンプレートのコメントに絵文字を使う for SereneBach」のカスタマイズを行っている場合は設定内容が微妙に異なるので、以前の設定は一旦削除した方がいいかもしれません。
８．CSS 設定
絵文字とテキストがきれいに並ばない場合は、下記のCSSを追加してください。
.emoji{
vertical-align: middle;
}必要に応じて margin / padding プロパティも加えてください。
2007.01.09 追記
６項の説明を追加しました。
2007.01.25 追記
EUC-JP 版に対応しました。
2007.03.10 追記
挿入される絵文字の img タグに class 属性を付与しました。それに伴い８項を追加しました。
2007.03.20 追記
green lettuce さんより頂いたコメントより、適用可能バージョンを 2.12R に修正しました。
サンタクロース
YST（Yahoo! Search Technology）との戦い：その3 ＆ Google 関連検索
最近、Yahoo 検索で当サイトに訪れる方がさらに減りました。
下は Google Analytics による当サイトの昨日（12/21）の「ソース別の訪問数」です。
- 64.95%：google
- 8.05%：(direct)
- 2.87%：msn
- 2.51%：yahoo
- 1.09%： yujiro.dyndns.org
- 20.52%：(other)
Yahoo はこれまで第3位（4～5%）でしたが、ついに msn に抜かれて 4位になりました。トップは変わらず Google で、相対的に比率が上がって 64.95% です。
気になるのは、旧サイトのドメインを検索結果から除外するために、旧ドメインのウェブサーバのトップディレクトリに robots.txt を置いているのですが、相変わらず検索結果に反映されてしますようです。
下記の説明を読むと、ドメイン変更前にテンプレートをご利用になっているサイトのバナーやパーマリンクに残っているのが原因に思われます。
Yahoo!検索：特定のページ、キャッシュを検索結果から削除したい
設定を行うと、ページ内のテキストの内容はデータベースに登録されませんが、ページのURLがほかの公開されているウェブページからの参照リンクとして、データベースに残る可能性はあります。
説明では検索結果に表示されることは名言されていませんが、上記の検索結果より、「データベースに残る=検索結果に反映される」という風に解釈しています。
ディレクトリ自体を削除するという手もありますが、もう少し様子を見てみたいと思います。
これまでの経緯は下記のページをどうぞ。
上記とは別に Google では「関連検索」なるものが表示されるようになりました。当サイト名で検索すると、ページ下に下記のような検索結果が表示されます。
Simply Threaded プラグイン
 投稿されたコメントに対しリプライをする際、「＞hogehoge さん」という元コメント情報を表示することができる Movable Type プラグインです。また、元コメントへのページ内リンクも自動的に設定してくれます。 |
１．インストール
Movalog：Simply Threaded 1.0へアクセス
 「Getting Simply Threaded」に名前とメールアドレスを入力して、Submit をクリック。右側に「sent!」と表示されたら届いたメールに記載されているURLにアクセスします。 |
 開いたページに「Download」のフォームがありますので、適宜ダウンロードします。商用の場合は最低 $20 のドネーションが必要です。 |
ダウンロードアーカイブを解凍して、php ディレクトリ、plugins ディレクトリにそれぞれアップロードします（詳細な配置はダウンロードページ下に記載されています）。
 mt.cgi 実行時、アップグレード画面が表示されます。これはDBに情報を追加するためと思われますので慌てずそのまま実行。 |
 実行後、管理画面にログインします。 |
 プラグイン一覧に「Simply Threaded」が表示されればOKです。 |
２．テンプレート修正
エントリー・アーカイブに下記の設定を行います。コメントプレビューにも同じ追加を行うと思いますが試しておりません。
まず、リプライ用のリンクを表示する MTCommentReplyLink タグをコメント投稿者情報の末尾に追加します。
<p class="comment-footer">
投稿者:
<$MTCommentAuthorLink default_name="匿名"$> <$MTCommentAuthorIdentity$> |
<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> |
<MTCommentReplyLink>
</p> 埋め込んだタグは、スクリーンショットのように「Reply」が表示されます。 |
MTCommentReplyLink タグにはオプションで text 属性が用意されています。これで表示テキストを変更できます。
<MTCommentReplyLink text="Reply to this comment">リプライ先を表示する場合は、上記のタグに、さらに MTRepliedComment タグを追加します（英語表記ですいません）。
<p class="comment-footer">
<MTRepliedComment>Posted, in reply to <a href="#c<MTCommentID>"><MTCommentAuthor>'s comment</a>, by<MTElse>Posted by</MTElse></MTRepliedComment>
<$MTCommentAuthorLink default_name="<MT_TRANS phrase="Anonymous">"$> <$MTCommentAuthorIdentity$> |
<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> |
<MTCommentReplyLink>
</p>この設定を行えば、リプライコメントの場合、投稿者情報欄に
Posted, in reply to X's comment, by Yと表示され、通常の新規投稿であれば、
Posted by Yと表示されます。
個人的には下記のような形式がお勧めです。
<div class="comment-content">
<MTRepliedComment><p>><a href="#c<MTCommentID>"><MTCommentAuthor></a>さん</p></MTRepliedComment>
<$MTCommentBody$>
</div>
<p class="comment-footer">
Posted by <$MTCommentAuthorLink default_name="Anonymous"$> <$MTCommentAuthorIdentity$> |
<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> |
<MTCommentReplyLink>
</p>| こうすると、リプライした時にコメント内容の先頭に引用元の名前を表示することができます。 |
最後に、リプライする・しないを決めるチェックボックスを、コメント欄に追加します。
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
この情報を登録しますか?</label>
</p>
<MTCommentReplyField> 前に設定した「Reply」のリンクをクリックすると、コメント投稿欄に追加したMTタグ（後述）の位置に、リプライ元の情報を引用するチェックボックスが表示されます。 |
Creative Commons Licence のライセンス・マーク変更
 久しくチェックしていなかった「Creative Commons」のライセンス・マークが変更されていたので、右サイドバー下部に表示しているバナーを変更しました。また、分かりにくかったライセンスマーク名称も変更されています。 |
クリエイティブ・コモンズ：ライセンス・マーク名称の変更について
CCライセンスが普及するにつれて、皆様から、「帰属」「同一条件」などの名称は一見して内容が分かりにくい、とのご意見を多数いただくようになり、このような状況を受けてCCJP事務局内で熟考のうえ討議した結果、ライセンス・マーク名称をより判別しやすく使いやすいものへと変更することと致しました。
新名称と旧名称の対応は下記の通りです。
| 新 | 旧 | 意味 |
|---|---|---|
| 表示 | 帰属 | 原著作者のクレジットを表示しなければなりません |
| 非営利（変更なし） | 作品を営利目的で利用してはなりません | |
| 改変禁止 | 派生禁止 | 作品を改変、変形または加工してはなりません |
| 継承 | 同一条件許諾 | 作品を改変、変形または加工した場合、あなたはその結果生じた作品をこの作品と同一の許諾条件の下でのみ頒布することができます |
なお「名称変更により各マークの機能が変わることはありません」ということです。
その他、「公開する」のリンクをクリック→「ライセンスを選ぶ」のフォームをクリックした先のページに、（ウェブサイトを持っていない場合）ライセンス付きファイルをホストできるサイトでクリエイティブ・コモンズ・ライセンスを適用する方法が掲載されています（英語ですが）ので、一部抜粋しておきます。
1番目と3番目のものは ccPublisher というものをダウンロードして適用させるようです。
公開テンプレートのサイドバーのカラム幅を変更する
公開テンプレートのサイドバーのカラム幅の変更方法についてご質問を頂いておりますので、本エントリーで変更方法をご紹介致します。
CSSは公開しているテンプレートで（多分）共通ですので、テンプレート配布のブログ（Movable Type / Serene Bach / FC2 ブログ / Seesaa ブログ / livedoor ブログ等）をお使いでしたらどれでも適用可能と思われます。
修正するのはスタイルシートのみです。スタイルシートを修正する箇所には似たようなセレクタが並んでおりますので、修正する際には、下記の該当する修正リストのセレクタ名の部分をマウスコピーして、編集画面（またはエディタ）上で検索すると良いでしょう。
なお、固定レイアウトの場合は下記のツールを是非ご利用ください。
テンプレートカスタマイズ支援ツール Column Resizer
１．固定レイアウト
１．１ 3カラムレイアウト
スタイルシート後方に出現する、リスト1.1 の赤色部分（2ヶ所）を変更します。
リスト1.1 固定レイアウト・3カラムの変更箇所
.layout-three-column #box {
width: 850px;
margin-right: auto;
margin-left: auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
text-align: left;
background-color: #ffffff;
}
：
（中略）
：
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 185px;
}上の 850px は3カラム全体（左・中央・右）の幅、そして下の 185px が左右サイドバーの幅です。ということで、まず 185px をお好みの幅に変更してください。ここでは 15px 加えて 200px にひろげる例で進めます。
そして、この値を元に上の 850px の部分を修正します。算出式は
元の値 + サイドバー幅の増分×2
になります。今回の例では、
850px + (200px - 185px) ×2 = 880px
となるので、880px を設定します。
サイドバーの幅をデフォルト値より少なくした場合は、逆に 850px から減算します。
ちなみにサイドバーの全体幅は 185px ですが、余白を左右 15px とっているので、実際に表示される幅はデフォルトで 155px です。Google Adsense のキーワード広告等、160px で設定されている部品をおさめるには、5px 加えて 190px にすれば（多分）大丈夫だと思います。
１．２ 2カラムレイアウト（左サイドバー/右サイドバー）
左サイドバーの場合、スタイルシート後方に出現する、リスト1.2 の赤色で示したサイドバーの幅を、お好みの値に変更します。
リスト1.2 固定レイアウト・2カラム（左サイドバー）の変更箇所
.layout-two-column-left #links-left-box {
float: left;
width: 185px;
}右サイドバーの場合、左サイドバー同様、リスト1.3 の赤色で示したサイドバーの幅を、お好みの値に変更します。
リスト1.3 固定レイアウト・2カラム（右サイドバー）の変更箇所
.layout-two-column-right #links-right-box {
float: left;
width: 185px;
}そして、左サイドバー・右サイドバー、いずれの場合もリスト1.4 の赤色部分を併せて変更してください。
リスト1.4 固定レイアウト・2カラム（左サイドバー・右サイドバー共通）の変更箇所
/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
width: 665px;
margin-right: auto;
margin-left: auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
text-align: left;
background-color: #ffffff;
}665px は 2カラム全体の幅を示しており、変更したサイドバー幅の値を元に、665px の部分を修正します。算出式は
元の値 + サイドバー幅の増分
となります。
例えば、サイドバー幅 185px を 200px にひろげた場合は、
665px + (200px - 185px) = 680px
となるので、680px を設定します。
２．リキッドレイアウト
２．１ 3カラムレイアウト
スタイルシート後方に出現する、リスト2.1 の赤色部分（3ヶ所）を変更します。
リスト2.1 リキッドレイアウト・3カラムの変更箇所
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
margin: 0 185px 10px;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
position: absolute;
width: 155px;
top: 95px;
left: 15px;
color: #ffffff;
}
.layout-three-column-liquid #links-right{
position: absolute;
width: 155px;
top: 95px;
right: 15px;
color: #ffffff;
}ちょっとややこしいですが、155px はサイドバーに実際に表示される部分の幅、最初の185px がサイドバー全体の幅が設定されています。
まず、サイドバーの表示部分 155px の値を変更した後、
元の値 + サイドバー幅の増分
を加算してください。例えばサイドバーの表示部分の幅を 155px から 160px に変更した場合、185px の部分は、
185px + (160px - 155px) = 190px
となり、190px を設定します。
２．２ 2カラムレイアウト（左サイドバー）
スタイルシート後方に出現する、リスト2.2 の赤色部分（2ヶ所）を変更します。
リスト2.2 リキッドレイアウト・2カラム（左サイドバー）の変更箇所
/* 2カラム(リキッドレイアウト：左サイドバー) */
.layout-two-column-liquid-left #content {
margin: 0 0 10px 185px;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
position: absolute;
width: 155px;
top: 95px;
left: 15px;
color: #ffffff;
}値の変更方法は２．１項を参考にしてください。
２．３ 2カラムレイアウト（右サイドバー）
スタイルシート後方に出現する、リスト2.3 の赤色部分（2ヶ所）を変更します。
リスト2.3 リキッドレイアウト・2カラム（右サイドバー）の変更箇所
/* 2カラム(リキッドレイアウト：右サイドバー) */
.layout-two-column-liquid-right #content {
margin: 0 185px 10px 0;
border-bottom: 1px solid #666699;
border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
position: absolute;
width: 155px;
top: 95px;
right: 15px;
color: #ffffff;
}値の変更方法は２．１項を参考にしてください。
３．中央カラム幅も変更する（固定レイアウトの場合のみ）
３．１ 3カラムの場合
中央カラムの幅を変更する場合は下記の赤色部分を修正します。増加分はリスト1.1 の 850px の部分に、さらに追加します。
リスト3.1 固定レイアウト・3カラムの変更箇所
.layout-three-column #content {
float: left;
width: 478px;
margin: 0 0 10px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
}３．２ 2カラム（左サイドバー）の場合
下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。
リスト3.2 固定レイアウト・2カラム（左サイドバー）の変更箇所
/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
float: left;
width: 478px;
margin: 0 0 10px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
}
３．３ 2カラム（右サイドバー）の場合
下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。
リスト3.2 固定レイアウト・2カラム（右サイドバー）の変更箇所
/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
float: left;
width: 478px;
margin: 0 0 10px 0;
border-bottom: 1px solid #666699;
border-right: 1px solid #666699;
}
中央カラム幅のみ変更する場合は「中央カラムにバナー広告を表示する」を参照願います。
Movable Type Wheeljack の新機能（その1：Assets）
 現在、Six Apart では、Wheeljack というプロジェクトで Movable Type の開発が進んでいます。 |
Six Apart：Tech Talk Blog：Movable Type Wheeljackで遊ぼう
上記の記事にしたがって、Windows 上でソースコードのダウンロード・ビルドを行うことで、Movable Type Wheeljack を入手でき、Movable Type のインストールすることで実際に使ってみることができます。
注：正規のライセンスをお持ちでない場合、Wheeljackをダウンロードして運用することはできません。個人ライセンスも同様です。
ということで、Wheeljack で新たに追加された機能についてご紹介します。今回紹介する内容は下記のサイトでも紹介されています。
Assets
 3.33 の管理メニューにあった「ファイルのアップロード」は「ASSETES」に変わっています。現状では和訳されていませんが、Asset は「資産・財産」という意味ですが、ここでは Movable Type にアップロードするファイル類を指すようです。推測ですが、エントリーと同じ感覚でアップロードしたファイルを管理できるようになると思われます。管理できるメリットは色々あると思いますが、例えば公開したエントリーを削除した時、エントリーに紐付いたファイルを管理画面から削除するというケースが考えられます。実際にエントリーとファイルの関連付けまで管理されるかどうかは不明ですが、利便性が高くなることは間違いないでしょう。 |
 ASSETS のページ。まだファイルがひとつもアップロードされていない状態です。ファイルをアップロードするには右上の「Upload New File」をクリックします。 |
 Ajax を利用したファイルのアップロード画面が表示されます（Windows 自宅サーバ環境+IE6では正常に動作せず）。この画面ではこれまでの通り、アップロードするファイルとアップロード先を指定し、「Upload」をクリックします。 |
 アップロードすると、オプションとして新しいエントリーの作成／エントリーへの画像表示／表示位置（左・中央・右）／サムネイル作成／ポップアップへのリンク／設定内容の保存、等が表示されます。この画面では全て表示されていますが、「表示オプション」はチェックボックスのチェック状態で非表示になり、ユーザビリティが考慮されています。 |
 エントリーを作成する場合、エントリー画面へジャンプします（これは 3.3 で実装済）。 |
 ファイルをいくつかアップロードした後の ASSETES のページ。「Type」欄にはファイルの種類が表示され、サイズも分かります。 |
 「Filename」欄をクリックすると、画像ファイルであればイメージとURL、アップロード先のパス等が表示されます。 |
 Assets にはタグを付与できます。Assets のページでタグを付与したいファイルを選択し、右上にあるプルダウンメニューで「タグの追加...」を選択して「Go」をクリック。 |
 ここでは「picture」を入力します。 |
 入力したタグが反映されました。 |
 タグは Assets の検索条件として利用できます。 |
JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ
さらに、年毎のツリー化リストに折りたたみマークを与えるために「月別アーカイブリストの年毎の折りたたみ for Movable Type」もエントリーしました。この複合技が左のスクリーンショットになります。 上記とは別に、ツリー化をより簡単に実現するテクニックとして、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」をエントリーしました。 |
月別アーカイブのリスト表示は、Movable Type のデフォルト機能では全ての年月を連続で表示することしかできませんが、プラグインを利用することで年毎の表示が可能になり、これを利用して、以前「ということで、本エントリーで、月別アーカイブリストの
- 年別ツリー化
- 年別折りたたみ
- 全体の折りたたみ
について、まとめてカスタマイズする手順を紹介致します。
以前、ご質問を頂いていた回答ですが、公開が遅くなり申し訳ございませんでした。この場をお借りしてお詫び申し上げます。
１．プラグインのダウンロード・アップロード
下記のリンクよりプラグインをそれぞれダウンロードしてください。
- ArchiveDateHeader プラグイン
- ArchiveDateFooter プラグイン
ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします（詳細はそれぞれのエントリーを参照ください）。
管理メニューの
メイン・メニュー > システム・メニュー > プラグイン
で、それぞれのプラグイン名が表示されればOKです。
２．スクリプトのダウンロード
下記のリンクより menufolder.js をダウンロードしてください。
３．スクリプトの修正
menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を必要に応じて適宜変更してください。デフォルトの状態では各年の最後尾に折りたたみマークが表示される設定になっています。
リスト3.1 menufolder.js の修正箇所
// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives = '▼';
var closeMarkForArchives = '▲';
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;４．スクリプトのアップロード
menufolder.js を index.html のあるディレクトリにアップロードします。
５．テンプレートの修正（script タグ追加）
月別アーカイブリストを表示したいテンプレートに、 </head> の直前にリスト5.1 のタグを追加します（すでに他の折りたたみで設定済の方はこの項をスキップしてください）。
リスト5.1 script タグの追加
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>６．ツリー画像のダウンロード・アップロード
下記のツリー画像をダウンロードしてください。画像は、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
ダウンロードした画像ファイルのファイル名をそれぞれ
- tree_lst.gif
- tree_end.gif
に変更して、サーバにアップロードします。アップロード先は任意ですが、ここでは index.html と同じディレクトリにアップロードしてください。
７．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定
月別アーカイブの年別ツリー化表示＋折りたたみができるタグ（リスト7.1）を、表示させたいテンプレートのサイドバー部分に貼り付けます。div 要素は当サイトで公開しているテンプレートに合わせたものですので、設定は任意です。お好みに応じて修正してください。
リスト7.1-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（div要素を利用）
<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" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$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>リスト7.1-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（dl/dt/dd要素を利用）
<dt class="sidetitle">
Monthly Archives
</dt>
<dd 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" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
</dd>メニューリスト全体を折りたたみたい場合は、リスト7.1-1 または7.1-2 に、下記の青色部分 *1 を追加してください。
リスト7.2-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（div要素を利用）
<div class="sidetitle" id="monthlyname">
Monthly Archives
</div>
<div class="side" id="monthlylist">
<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" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$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>
FoldNavigation('monthly','off',false);
//]]>
</script>リスト7.2-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（dl/dt/dd要素を利用）
<dt class="sidetitle" id="monthlyname">
Monthly Archives
</dt>
<dd class="side" id="monthlylist">
<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" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>
</dd>８．CSS
リスト8.1 をスタイルシートに追加してください。
リスト8.1 CSS
ul.tree {
margin: 0 0 0 15px;
padding: 0;
font-size: 9px;
list-style: none;
}
ul.tree ul {
margin: 0 0 0 10px;
padding: 0;
}
ul.tree li {
margin: 0;
padding: 0 0 0 11px;
background-image: url(tree_lst.gif);
background-repeat: no-repeat;
list-style: none;
}
ul.tree li.tree_end {
background-image: url(tree_end.gif);
list-style: none;
}*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
Seesaa ブログテンプレート更新（タグリスト・タグクラウド対応）
現在配布中の Seesaa ブログテンプレートを、タグリスト・タグクラウド対応にしました。
タグリストは、まず「記事投稿」または「記事一覧」で記事を編集する際に「記事のタグ」欄があり、この部分に任意のタグ名を設定すると、ブログで表示される記事の下に「タグ」が表示されます。表示されたタグ名のリンクをクリックすると同一タグ名を割り振った記事リスト（タグリスト：左スクリーンショット）が表示されます。
このタグリストのページの HTML およびスタイルシートを追加しました。
またサイドバーの「タグクラウド」に対応するスタイルシートも追加しました。デフォルトテンプレートで配布されているスタイルシートには説明がないため、一部コメントで補足しております。タグ部分のスタイルを変更される場合の参考になれば幸いです。
元記事はすでに修正済ですが、2006年12月16日以前に Seesaa ブログテンプレートをご利用になっている方は、下記のテキストエリアに表示している差分を、現在ご利用中の HTML およびスタイルシートに追加してください。HTML の挿入位置はリスト 1 の通りです。
リスト1 HTML挿入部分 ：
<% if:page_name eq 'search' -%>
<% loop:list_article %>
<div class="blog">
<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<div class="text"><% article.entire_body | text_summary(240) %></div>
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%></div>
</div>
</div>
<% /loop %>
<% /if -%>
ここに下記のテンプレートを挿入
</div><!-- /content -->
<!-- 中央カラム終了 -->
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
：スタイルシートの追加分は最後の方に追加してください。
HTML
スタイルシート
上記の差分 HTML（あるいは改修後の配布テンプレート） をそのまま利用した場合、タグリストのページには記事のタイトルと投稿時間のみが表示されます。冒頭のスクリーンショットのように、記事本文の一部を表示させたい場合は、HTML に含まれる、
リスト2 タグリストに記事本文を表示する場合の修正箇所 ：
<!--<div class="tag-article-summary"><% article.entire_body | text_summary(40) | tag_strip %></div>-->
：の赤色部分を削除してください。(40)になっている数字を変更すると表示文字数を変更できます。
タグリストのテキスト表示については大体確認したつもりですが、表示に不具合がある場合はお知らせください。なお画像・音声・動画についての HTML タグも一応追加しておりますが、これらについては全く試していません。予めご了承ください。
2006.02.28 追記 タグクラウド用スクリプトのマークアップが誤っていたので修正しました。ついでに language 属性を削除しました。「Movable Type コンテスト2006」にエントリー
以前エントリーした「Movable Type コンテスト2006」が本日で締め切りとなりました。一応18:00 までの受付ですが忘れてしまいそうなので、先程慌ててエントリー。
折角エントリーするならサイトのデザインを若干見直そう、と企んでいたのですが、結局カラムレイアウトの変更のみにとどまっています。
前回のユーザビリティ・アクセシビリティ等のアピールは「Web2.0」の前に全く歯がたたなかったので、今回はコンテンツでアピールしてみました。
とはいえ昨年のような意気込みはありません。
問題なければ数日中に「2006-エントリーサイト一覧」に掲載されると思います。
新着表示プラグイン（投稿者情報版） for Serene Bach
記事に新着コメントまたは新着トラックバックがあった時に、記事本文下の投稿者情報に「New!!」というテキストや画像を表示するプラグインを作成しました。
本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「コメント投稿（またはトラックバック受信）後 n 時間以内」という指定を行うことで、該当記事の投稿者情報欄に任意のテキスト（または画像）を表示することができます。スクリーンショットは公開テンプレートに適用した完成イメージですが、どのテンプレートでも利用可能です。
動作の仕組みは、プラグインを用いて、最新記事リストの各エントリーの右側にエントリー投稿時間を span 要素で予め埋め込んでおき、CSSで非表示の状態にします。そしてページ表示時に JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であれば投稿時間の部分をテキストまたは画像に置き換えて表示する、という仕組みです。
プラグインの他に、ベースHTMLテンプレートに JavaScript を設定する必要がありますが、ページを読み込む毎に現在時刻との差を計算するので、誤差の少ない表示が可能です。なおサブカテゴリーリスト版をお使いの場合、JavaScript の設定が共用できるので設定不要です。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。
以下カスタマイズ方法です。
１．プラグインのダウンロード・アップロード
下記の RecentDate.zip または RecentDate.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。
ダウンロードしたアーカイブを解凍し、中にある RecentDate.pm を plugins ディレクトリ直下に、resource/ja/recentdate.txt を、同じディレクトリの構成があると思いますので、recentdate.txt のみを ja 配下にアップロードしてください。
アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RecentDate.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
２．テンプレートの修正
ベースHTMLテンプレートに対し、下記の新着表示用の独自タグ
- コメント用：{recent_comment_date}
- トラックバック用：{recent_trackback_date}
とスクリプトを entry ブロックの中に追加してください。リスト1 に公開テンプレートへの設定例を示します（スクリーンショットと同じ設定）。
リスト 1 独自タグの追加
<!-- BEGIN entry -->
：
（中略）
：
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} {recent_comment_date} | {trackback_num} {recent_trackback_date}
</div>
</div>
{trackback_auto_discovery}
<!-- END entry -->また、</body> の直前に下記のスクリプトを追加します。
リスト2 スクリプトの追加
<script type="text/javascript">
//<![CDATA[
// passage time
var pass = 24;
// display content
var content = 'New!!';
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
if(spans[i].getAttribute('class') == 'new' ||
spans[i].getAttribute('className') == 'new') {
var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
now = Math.ceil(now);
if(-now <= pass){
spans[i].innerHTML = content;
spans[i].style.display = 'inline';
}
}
}
//]]>
</script>他の新着表示プラグイン（サブカテゴリーリスト版等）をすでにご利用の場合は、リスト2 を追加する必要はありません。
３．新着表示のチェック時間変更
デフォルトは 24時間以内のコメント・トラックバックに新着表示を行ないます。この時間を変更する場合は、リスト2 の最初の方の部分を、リスト3 の赤色部分のように変更してください。
リスト3 チェック時間変更
// passage time
var pass = 24;設定する単位は「時間」です。（例は24時間）。
４．表示内容変更
新着表示の内容を変更する場合は、リスト2 の最初の方の部分を、リスト4 の赤色部分のように変更してください。
リスト4 スクリプトの追加
// display content
var content = 'New!!';HTMLタグも大丈夫ですので、リスト5 のように、
リスト5 スクリプトの追加
var content = '<img src="http://～/hogehoge.gif" style="vertical-align: middle" />';とすれば画像を表示することもできます。
５．スタイルシートの設定
スタイルシートに下記の設定を追加します。最初の display プロパティで２項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。
リスト6 CSSの追加
span.new {
display: none;
color: red;
font-weight: bold;
}プロパティは適宜変更して、お好みのデザインに仕上げてください。他の新着表示プラグイン（サブカテゴリーリスト版等）をすでにご利用の場合は、リスト6 を追加する必要はありません。
以上です。不具合等ございましたらご連絡ください。
Movable Type で全エントリーを表示する方法
Movable Type のエントリーリストで、全てのエントリーを表示するための Tips です。
基礎知識として、MTEntries タグに属性を何も設定せずに使用すると、管理画面の[設定]-[全般]-[表示に関する初期設定]-[表示数]に依存することになります。したがって全ての公開されたエントリーを表示するには何らかの属性を設定しなければなりません。
先日投稿した「Sitemaps 0.90 用テンプレート」でも少し紹介致しましたが、巷で紹介されているサイトマップ用テンプレートでは全エントリーリスト表示で、
<$MTEntries lastn="9999"$>という設定を多くみかけます。
これはこれで良いのですが、MTのパワーユーザーとしては、よりスマートな設定方法を紹介したいと思った次第です。
１．lastn 属性による表示
lastn 属性は「最新のエントリーより指定された件数を表示する」場合に用いますが、属性値に "0" を設定することで全エントリーが表示されます。
リスト1 lastn 属性による表示
<ul>
<MTEntries lastn="0">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>２．offset 属性による表示
offset 属性は「最新のエントリーの指定件数を除いて表示する」場合に用います。厳密には lastn 属性と併用して、それぞれの属性で指定された範囲のエントリーを表示します。この offset 属性値に "0" を設定することで全エントリーが表示されます。
リスト3 offset 属性による表示
<ul>
<MTEntries offset="0">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>３．all 属性による表示
MTEntries タグにこのような属性は存在しません。ただし、このような処理されない属性を設定することで全エントリーが表示されます（とりあえず 3.33 では OK）。all="1" というのは直感的に分かりやすいと思い、例として挙げてみました。hoge でも何でもいいです。
リスト3 all 属性による表示
<ul>
<MTEntries all="1">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>４．属性を設定しない方法
先の[設定]-[全般]-[表示に関する初期設定]-[表示数]に "0" を設定します。単位は「エントリー」「日分」のどちらでも大丈夫のようです。ただし表示数を制限すべき箇所には必ず属性を設定してください。
５．MTArchiveList による表示
上記と主旨が異なりますが、MTArchiveList タグを用いる手もあります。archive_type 属性には "Individual" を設定します。
ただし各アーカイブ共通のタグですので、使用可能な属性は lastn と sort_order に限られます。
リスト4 MTArchiveList による表示
<ul>
<MTArchiveList archive_type="individual">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>６．再構築のパフォーマンス
当サイトのエントリーで試してみたところ、ほんの僅かながら１?４、つまり MTEntries が早いようです（3秒程度で完了）。ただしタイトルのみ・リンクなしというケースでの実験ですので、実際には大差ないと思います。
RSS Feed（フィード）を表示する（サービス利用編）
Feed2JS はフリーのサービスです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。 なおこのサービスで日本語を利用する場合は UTF-8 での出力が前提とするため、他の文字コードで出力する場合は、前回の「RSS フィードをブログに表示する」で文字コードを変更する必要があります。 |
昨日紹介した「１．Feed2JS へのアクセス
 Feed2JS のサイトにあるナビゲーションバーの「Build」をクリック。 |
２．RSSの設定
以下、設定項目について解説します。 |
- URL
- 表示させたい RSSフィードの URL を記入します。例えば、はてなブックマークの「最近の人気エントリー」の RSS であれば
を入力します。Atom も可能です。http://b.hatena.ne.jp/hotentry?mode=rss
- Show channel?
- フィード公開元の情報（RSSタイトルと説明）の表示方法を設定します
- yes：タイトルと説明を表示
- title：タイトルのみ表示
- no：表示しない
- Number of items to display
- 記事の表示件数を設定します。0 の場合は RSS に記述された全てを表示します。
- Show/Hide item descriptions? How much?
- 各記事概要の表示文字数を設定します。
- 0：表示しない
- 1：全て表示
- 2 以上：設定文字数を表示
- -1：表示しない（タイトルのリンクもなし）
- Use HTML in item display?
- 内容中の HTML の処理の仕方
- yes：HTML を有効にする
- no：テキストのみ表示
- paragraphs：HTML は無効にする（改行のみ <br> に変換）
- Show item posting date?
- 日付表示
- yes：表示する
- no：表示しない
- Time Zone Offset
- タイムゾーンの設定。日本の場合は、"+9" を設定。RSS のタイムゾーンを使用する場合、"feed" を設定。
- Target links in the new window?
- リンク先ページを表示するウィンドウを設定。
- n：同一ウィンドウに表示
- y：新しいウィンドウに表示
- 任意の文字列：その名前のついたウィンドウに表示（フレームの場合）
- popup：JavaScript の popupfeed() を用いてポップアップ表示
- UTF-8 Character Encoding
- UTF-8 エンコードの可否。
- Podcast enclosures
- RSS 2.0 フィードの enclosure 要素について、メディアファイルのリンクを表示
- yes：表示する
- no：表示しない
- Custom CSS Class
- ページに複数のRSSを表示し、それぞれに異なるスタイルを適用させたい場合、任意のクラス属性名を設定するとができます。rss-box-XXXX というクラス属性名が付与され、その XXXX の部分を入力します。
３．プレビュー
前項のページ右側にある「Preview Feed」をクリックすれば実際の表示を別ウィンドウで確認できます。表示を確認しながら設定を変更すると良いでしょう。
 左のスクリーンショットは、はてなブックマークの「最近の人気エントリー」を5件表示させた場合のプレビューです。 |
４．JavaScript 生成
設定が完了したらページ右側にある「Generate JavaScript」をクリックしてください。設定が確定していない場合でも、次のページで変更できますのでご安心ください。
 このページで表示された「Get Your Code Here」の下にある JavaScript をコピーして、ご自身のブログで表示したい位置に貼り付ければ完成です。 |
生成されたスクリプトにある language="JavaScript" は非推奨ですので、貼り付けた後で削除しておくと良いでしょう。
５．HTML
Feed2JS で表示されるリストの HTML は下記のようなマークアップになっています。HTML 上は script 要素しか表示されませんので、CSS を設定する場合は下記のリストを参考にしてください。
リスト 5.1 HTMLマークアップ
<div class="rss-box">
<p class="rss-title"><a class="rss-title">タイトル</a><br><span class="rss-item">説明</span></p>
<ul class="rss-items">
<li class="rss-item"><a class="rss-item">記事名1</a></li>
<li class="rss-item"><a class="rss-item">記事名2</a></li>
：
<li class="rss-item"><a class="rss-item">記事名n</a></li>
</ul>
</div>６．CSS
冒頭のスクリーンショットの「はてなブックマーク：最近の人気エントリー」リストの CSS を掲載しておきます。
リストは「タイトル説明なし」「5件表示」「記事概要表示なし」という設定で、公開テンプレートに下記のセレクタを追加しています。
リスト 6.1 CSS
.rss-items,
.side {
margin: 3px 0 20px;
background: none;
color: #444444;
font-size: 10px;
_font-size: 9px;
line-height: 150%;
}タイトル部分は手抜きで、手書きで、
<div class="sidetitle">はてぶ 最近の人気エントリー</div>としていますがタイトル表示をさせて .rss-title を利用するのが良いでしょう。
７．表示の遅延を解消する
サービスとして利用するため、サーバのレスポンス等によっては表示が遅延する可能性があります。そういう場合は「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」を試してみてください。
RSS Feed（フィード）を表示する
Feed2JS はフリーのツールです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。 Feed2JS はサービスとして利用することもできますが、このエントリーでは公開されているソースをご自身がご利用されているサーバにインストールして利用するカスタマイズについて説明します。したがってサーバ上で PHP が動作可能であることが条件です。 |
１．Feed2JS のダウンロード
 Feed2JS のサイトにあるナビゲーションバーの「Download」をクリック。 |
 次のページで「Installation」の「1. Get the Latest Source Code now available on eduforge」の eduforge をクリック。 |
 feed2js.zip をクリックして任意のフォルダに保存。 |
２．Magpie RSS のダウンロード
*この作業は Magpie RSS のアップグレードが必要な場合のみ（Magpie RSS は FeedRS に同梱されています）ですのでスキップしてください。
| １項の最初のページにある「2. Download and install the Magpie RSS」の Magpie RSS をクリック。 |
 「DOWNLOAD」のリンクをクリック。 |
 「Download」のリンクをクリック。 |
 ページ後方にある「magpierss-0.72.tar.gz」のリンクをクリック（0.72 の部分は変わるかもしれません）。 |
３．アップロード
 １項でダウンロードした feed2js.zip を解凍し、その中にあるファイルをそのままの構成でサーバにアップロードします。ここでは「feed2js」というディレクトリを作成した例で進め、その配下にアップロードした場合、リスト3.1 の、 |
リスト 3.1 アップロード後のディレクトリ構成
/feed2js
/magpie
/style
build.php
：という構成になります。
２項の magpie をアップグレードする場合は、feed2js 配下にある magpie ディレクトリ配下のファイルを入れ替えます。
４．パーミッションの変更
４．１ ファイルのパーミッション変更
feed2js 直下にあるファイルで、拡張子が ".php" のファイル（下記）のパーミッションを 755 等（値はご利用のサーバによって異なりますので、適宜ご確認ください）に変更してください。
リスト 4.1 パーミッションを変更するファイル
build.php
feed2js.php
feed2js_config.php
magpie_debug.php
magpie_simple.php
nosource.php
preview.php
style.php
style_preview.php先頭が "._" で始まっているファイルのパーミッションは変更する必要はありません。
４．２ ディレクトリのパーミッション変更
magpieディレクトリにある cache と cache_utf8 のパーミッションを 777に変更します。
５．Feed2JS の動作テスト
Feed2JS が正常に動作することをテストします。ブラウザに下記のURLを入力して実行してください。
リスト 5.1 動作テスト用URL
http://[user-domain]/feed2js/magpie_debug.phpuser-domain の部分はご自身のURLを設定してください。
 OKであればスクリーンショットのようなメッセージが表示されます。 |
これがOKであれば、インストール完了です。
実際に RSS フィードから JavaScript を生成する方法については次項の内容にしたがってください。
６．RSSの設定
ブラウザに下記のURLを入力して実行してください。
リスト 6.1 Feed2JS実行用URL
http://[user-domain]/feed2js/build.php
以下、設定項目について解説します。 |
- URL
- 表示させたい RSSフィードの URL を記入します。例えば、はてなブックマークの「最近の人気エントリー」の RSS であれば
を入力します。Atom も可能です。http://b.hatena.ne.jp/hotentry?mode=rss
- Show channel?
- フィード公開元の情報（RSSタイトルと説明）の表示方法を設定します
- yes：タイトルと説明を表示
- title：タイトルのみ表示
- no：表示しない
- Number of items to display
- 記事の表示件数を設定します。0 の場合は RSS に記述された全てを表示します。
- Show/Hide item descriptions? How much?
- 各記事概要の表示文字数を設定します。
- 0：表示しない
- 1：全て表示
- 2 以上：設定文字数を表示
- -1：表示しない（タイトルのリンクもなし）
- Use HTML in item display?
- 内容中の HTML の処理の仕方
- yes：HTML を有効にする
- no：テキストのみ表示
- paragraphs：HTML は無効にする（改行のみ <br> に変換）
- Show item posting date?
- 日付表示
- yes：表示する
- no：表示しない
- Time Zone Offset
- タイムゾーンの設定。日本の場合は、"+9" を設定。RSS のタイムゾーンを使用する場合、"feed" を設定。
- Target links in the new window?
- リンク先ページを表示するウィンドウを設定。
- n：同一ウィンドウに表示
- y：新しいウィンドウに表示
- 任意の文字列：その名前のついたウィンドウに表示（フレームの場合）
- popup：JavaScript の popupfeed() を用いてポップアップ表示
- UTF-8 Character Encoding
- UTF-8 エンコードの可否。
- Podcast enclosures
- RSS 2.0 フィードの enclosure 要素について、メディアファイルのリンクを表示
- yes：表示する
- no：表示しない
- Custom CSS Class
- ページに複数のRSSを表示し、それぞれに異なるスタイルを適用させたい場合、任意のクラス属性名を設定するとができます。rss-box-XXXX というクラス属性名が付与され、その XXXX の部分を入力します。
７．プレビュー
前項のページ右側にある「Preview Feed」をクリックすれば実際の表示を別ウィンドウで確認できます。表示を確認しながら設定を変更すると良いでしょう。
| 左のスクリーンショットは、はてなブックマークの「最近の人気エントリー」を5件表示させた場合のプレビューです。 |
８．JavaScript 生成
設定が完了したらページ右側にある「Generate JavaScript」をクリックしてください。設定が確定していない場合でも、次のページで変更できますのでご安心ください。
 このページで表示された「Get Your Code Here」の下にある JavaScript をコピーして、ご自身のブログで表示したい位置に貼り付ければ完成です。 |
生成されたスクリプトにある language="JavaScript" は非推奨ですので、貼り付けた後で削除しておくと良いでしょう。
９．HTML
Feed2JS で表示されるリストの HTML は下記のようなマークアップになっています。HTML 上は script 要素しか表示されませんので、CSS を設定する場合は下記のリストを参考にしてください。
リスト 9.1 HTMLマークアップ
<div class="rss-box">
<p class="rss-title"><a class="rss-title">タイトル</a><br><span class="rss-item">説明</span></p>
<ul class="rss-items">
<li class="rss-item"><a class="rss-item">記事名1</a></li>
<li class="rss-item"><a class="rss-item">記事名2</a></li>
：
<li class="rss-item"><a class="rss-item">記事名n</a></li>
</ul>
</div>１０．CSS
冒頭のスクリーンショットの「はてなブックマーク：最近の人気エントリー」リストの CSS を掲載しておきます。
リストは「タイトル説明なし」「5件表示」「記事概要表示なし」という設定で、公開テンプレートに下記のセレクタを追加しています。
リスト 10.1 CSS
.rss-items,
.side {
margin: 3px 0 20px;
background: none;
color: #444444;
font-size: 10px;
_font-size: 9px;
line-height: 150%;
}タイトル部分は手抜きで、手書きで、
<div class="sidetitle">はてぶ 最近の人気エントリー</div>としていますがタイトル表示をさせて .rss-title を利用するのが良いでしょう。
１１．文字コードについて
このツールでの日本語表示は UTF-8 での出力が前提となっているため、他の文字コードで出力する場合は、feed2js.php の 136 行目辺り（リスト11.1）のすぐ下に、１１．１項（リスト11.2）、または１１．２項（リスト11.3）の 1行を追加するといいようです。
指定行数はバージョンによって異なる可能性がありますのでご了承ください（リストの文字列で検索すると良いでしょう）。
リスト 11.1 文字コード変更ポイント
$rss = @fetch_rss( $src );１１．１ 文字コードを EUC-JP にする場合
リスト 11.2 文字コードを EUC-JP にする場合
$rss = @fetch_rss( $src );
mb_convert_variables("EUC-JP","UTF-8",$rss);１１．２ 文字コードを Shift_JIS にする場合
リスト 11.3 文字コードを Shift_JIS にする場合
$rss = @fetch_rss( $src );
mb_convert_variables("SJIS","UTF-8",$rss);１１項の参考サイトは下記です。ありがとうございました。
サンウェーブ CM 「パタパタくん」の変拍子を探る
TVで時々みかける、サンウェーブのCM「サンヴァリエ〈ピット〉」のテーマソングの拍子が以前から気になって仕方ありません。
- サンヴァリエ〈ピット〉 ： 「パタパタ・カンガルー」篇
- YouTube：patapatakun（こちらの方がお勧め）
「拍子」とは「4分の4拍子」や「8分の3拍子」のように、拍の一定のまとまりを表すものですが、気になる理由は、この曲の拍子が途中で頻繁に変化するからです。
そのため、一緒に口ずさもうと思っても合わせられない方がほとんどではないでしょうか。
この曲はCM用に作曲されたもののようで、楽譜は出回っていません。ということで、メロディ部分＋αを採譜（耳コピー）してみました。
楽譜をクリックすると拡大表示されます。拍子は実際に作曲された楽譜とは異なるかもしれません。
ついでに MIDI 音源と着メロ用音源（.mmf）も作ってみました。
「きっとまんぞく」の部分は 2/4拍子×2 ではなく、下のような「きっとまんぞ」を 6/8拍子での表記
がわかりやすいのですが、最後の「く」が字余りになってしまうので、とりあえず 2/4拍子にしています（4/4拍子、または 8/8 拍子として、8分音符の旗を 3+3 で連結すると分かりやすいかもしれません）。
1-2小節目は前奏なので楽譜より1オクターブ下げましょう。ギターで演奏する場合は3小節目以降を1オクターブ上げてください。
非常にスッキリしました。（笑）
この布で
FC2ブログテンプレート修正
現在公開中のFC2ブログテンプレートに不具合がありましたので修正致しました。
不具合の内容は下記の通りです。
- 同一日に複数投稿がある場合、タイトル上部に表示される投稿日をひとつしか表示しないようにスクリプトで制御していますが、その制御が正常に行われていない
- 同一日に同じタイトルの投稿があった場合、後方のタイトルが表示されない
原因は、以前見出しレベル（hx 要素）の修正を行った際に、スクリプトの修正を行っていなかったためで、日付部分の見出しレベル（h2 → div に変更）をタイトル部分（h3 → h2 に変更）に移動したために上記の問題が発生します。
この不具合は、2006年8月13日以降に本サイトよりテンプレートをコピーしてご利用になっている場合に発生します。不具合が発生している場合、ご利用のHTMLテンプレートの後方にあるスクリプト（リスト1）を、リスト2の内容に変更してください。
参考までに、修正箇所を赤色（削除は消し線つき）、修正後（または追加）を青色で示しています。
リスト1 修正前
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
work = elements[i].innerHTML;
if(work == work_old){
elements[i].style.display = 'none';
}
work_old = work;
}
elements = document.getElementsByTagName('h3');
work;
work_old = '';
for (i=0; i<elements.length; i++) {
work = elements[i].innerHTML;
if(work == work_old){
elements[i].style.display = 'none';
}
work_old = work;
}
if (document.getElementById('nav_previous') ||
document.getElementById('nav_next')) {
document.getElementById('nav_main').style.display = 'inline';
} else {
document.getElementById('nav_main').style.display = 'none';
}
//-->
</script>リスト2 修正後
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('div');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
if((elements[i].getAttribute('class') == 'date') ||
(elements[i].getAttribute('className') == 'date')) {
work = elements[i].innerHTML;
if(work == work_old){
elements[i].style.display = 'none';
}
work_old = work;
}
}
if (document.getElementById('nav_previous') ||
document.getElementById('nav_next')) {
document.getElementById('nav_main').style.display = 'inline';
} else {
document.getElementById('nav_main').style.display = 'none';
}
//-->
</script>以上です。
ご利用くださっている皆様にはご迷惑をおかけ致しまして申し訳ございません。この場をお借りしてお詫び申し上げます。
JavaScript で文字をトリミングする（改善版）
JavaScript を用いてエントリータイトル等の文字をトリミング（指定した文字数だけ表示する）するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字（2バイト）を1文字としてカウントします。
左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。
さらにスクリプトを修正すれば、特定の半角文字（"M"とか"W"のような幅の広い文字）を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。
今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列をトリミングする、JavaScript を書いてみました。
Windows + IE6/Firefox 2 で実験した限りでは、全角・半角いずれも1文字で計算してトリミングしてくれるようですが、コードに不具合等ありましたらお知らせください。
１．スクリプトの追加
次のリストを </head> の直前に追加します。外部ファイルにしても構いません。
<script type="text/javascript">
var rest = '...';
function cutStringById(id, size) {
var str = document.getElementById(id).innerHTML;
if(str.length > size){
document.getElementById(id).innerHTML = str.substring(0, size) + rest;
}
}
function cutStringByTagNameAndClassName(tagName, className, size) {
var elements = document.getElementsByTagName(tagName);
for (i=0; i < elements.length; i++) {
if (elements[i].className == className) {
var str = elements[i].innerHTML;
elements[i].innerHTML = trim(str,size);
}
}
}
function cutStringByIdAndTagName(id, tagName, size) {
var element = document.getElementById(id);
var elements = element.getElementsByTagName(tagName);
for (i=0; i < elements.length; i++) {
var str = elements[i].innerHTML;
if(str.length > size){
elements[i].innerHTML = trim(str,size);
}
}
}
function cutStringByClassNameAndTagName(className, tagName, size) {
var elements = document.getElementsByTagName(tagName);
for (i=0; i < elements.length; i++) {
if (elements[i].parentNode.className == className) {
var str = elements[i].innerHTML;
elements[i].innerHTML = trim(str,size);
}
}
}
function trim(str, size) {
if(str.length > size){
var cutstring = str.substring(0, size);
var byte = countByte(cutstring);
var tmp = "";
if (byte < size*2) {
for(k=0; k < (size*2-byte)*2; k++){
tmp = str.substring(0,size + k);
if (countByte(tmp) >= size*2) {
break;
}
}
}
if(tmp){
return tmp + rest;
} else {
return str.substring(0, size) + rest;
}
} else {
return str;
}
}
function countByte(str) {
var byte = 0;
for (j=0; j < str.length; j++) {
str.charCodeAt(j) < 0x100 ? byte++ : byte += 2;
}
return byte;
}
</script>２．スクリプトを起動する
スクリプトを起動するため、２．１～２．４のいずれかの script 要素を 、トリミングしたい文字列の直後、または </body> の直前に追加します。
２．１ 要素名+ class 属性名で指定
<script type="text/javascript">
cutStringByTagNameAndClassName('[要素名]', '[class 属性名]', トリミングサイズ);
</script>２．２ id 属性名で指定
<script type="text/javascript">
cutStringById('[id 属性名]', トリミングサイズ);
</script>２．３ id 属性名+ 要素名で指定
<script type="text/javascript">
cutStringByIdAndTagName('[id 属性名]', '[要素名]', トリミングサイズ);
</script>２．４ 親要素の class 属性名+ 要素名で指定
<script type="text/javascript">
cutStringByClassNameAndTagName('[親要素の class 属性名]', '[要素名]', トリミングサイズ);
</script>具体的な起動方法は３項をご覧ください。
３．サンプル
３．１ 要素名+ class 属性名で指定
次の(X)HTMLマークアップ、
<a href="http://domain.com/" class="hoge">文字をトリミングする</a>の「文字をトリミングする」の文字を先頭から 5 文字だけ表示（「文字をトリ...」にする）する場合は、２．１のリストを利用し、赤色部分を、
cutStringByTagNameAndClassName('a', 'hoge', 5);とします。
３．２ id 属性名で指定
次の(X)HTMLマークアップ、
<p id="hoge">文字をトリミングする</p>の「文字をトリミングする」の文字を先頭から 5 文字だけ表示（「文字をトリ...」にする）する場合は、２．２のリストを用い、その赤色部分を
cutStringById('hoge', 5);とします。
３．３ id 属性名+ 要素名で指定
次の(X)HTMLマークアップ、
<div id="hoge"><a href="http://domain.com/">文字をトリミングする</a></div>の「文字をトリミングする」の文字を先頭から 5 文字だけ表示（「文字をトリ...」にする）する場合は、２．３のリストを利用し、赤色部分を、
cutStringByIdAndTagName('hoge', 'a', 5);とします。
３．４ 親要素の class 属性名+ 要素名で指定
次の(X)HTMLマークアップ、
<div class="hoge"><a href="http://domain.com/">文字をトリミングする</a></div>の「文字をトリミングする」の文字を先頭から 5 文字だけ表示（「文字をトリ...」にする）する場合は、２．４のリストを利用し、赤色部分を、
cutStringByClassNameAndTagName('hoge', 'a', 5);とします。
４．トリミング後の追加文字列を変更する
トリミング後の追加文字列を変更するには、冒頭のリスト2 行目を他の文字に変更してください。何も表示させたくない場合は赤色部分を削除してください。
var rest = '...';５．特定の半角文字のバイト数を変更する
１項のスクリプトに青色のような行を追加します（間違ってたらすいません）。赤色部分は "0xXX" という、16進数を設定します。
function countByte(str) {
var byte = 0;
for (j=0; j < str.length; j++) {
str.charCodeAt(j) < 0x100 ? byte++ : byte += 2;
if(str.charCodeAt(j) == [該当文字の16進数]) byte++;
}
return byte;
}charCodeAt は指定した文字の Unicode を返却する関数です。JavaScript 1.2 と 1.3 で振る舞いが異なるようです。
2006.12.28
id 属性名+要素名で検索できるコードを、スクリプトおよびリスト２．３項に追加しました。
2007.02.15
トリミング文字列が短い場合に正常に表示されない不具合を修正しました。
2008.08.03
cutStringByClassNameAndTagName を追加しました。
Sitemaps 0.90 用テンプレート（Google・Yahoo!・MSN サポート）
少し前の話ですが、Google sitemaps 0.84 として Google がサポートしていた Sitemaps が、0.90 より Yahoo! MSN のサポートが表明されました。
注：本記事は Movable Type 3.x の内容です。Movable Type 4 対応の Sitemaps 0.90 用テンプレートについては「Sitemaps 0.90 用テンプレート（MT4対応）」をご覧ください。
- グーグル、ヤフー、MSが提携--ウェブインデックス作成機能を共通化へ
- Googleなど3社、Sitemapsをサポート - サイト管理者は要注目
- サイトマップで検索エンジンフレンドリーなサイト - Sitemaps 0.90 XMLファイルの書き方
ということで、以前作成して放置状態だった 0.84 用のサイトマップ用テンプレートを 0.90 対応に作り直してみました。
１．テンプレート設定方法
管理画面の[テンプレート]-[インデックス]タブ（デフォルトはこのタブになっています）-[テンプレートを新規作成]をクリック
- テンプレート名：サイトマップ（名前は何でもいいです）
- 出力ファイル名：sitemap.xml
- このテンプレートにリンクするファイル：（設定不要）
- インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する：チェックする
- テンプレートの内容：リスト1 の内容をコピー＆ペースト
リスト1 Sitemaps テンプレート
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<MTIgnore>メインページ</MTIgnore>
<url>
<loc><$MTBlogURL encode_xml="1"$></loc>
<lastmod><$MTDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
<changefreq>daily</changefreq>
</url>
<MTIgnore>エントリー・アーカイブ</MTIgnore>
<MTIfArchiveTypeEnabled archive_type="Individual">
<MTEntries offset="0">
<url>
<loc><$MTEntryPermalink encode_xml="1"$></loc>
<lastmod><$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
<priority>1.0</priority>
</url>
</MTEntries>
</MTIfArchiveTypeEnabled>
<MTIgnore>カテゴリー・アーカイブ</MTIgnore>
<MTIfArchiveTypeEnabled archive_type="Category">
<MTCategories>
<url>
<loc><$MTCategoryArchiveLink encode_xml="1"$></loc>
<MTEntries lastn="1" sort_by="modified_on">
<lastmod><$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
</MTEntries>
</url>
</MTCategories>
</MTIfArchiveTypeEnabled>
<MTIgnore>月別アーカイブ</MTIgnore>
<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly">
<url>
<loc><$MTArchiveLink encode_xml="1"$></loc>
<MTEntries lastn="1" sort_by="modified_on">
<lastmod><$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
</MTEntries>
</url>
</MTArchiveList>
</MTIfArchiveTypeEnabled>
<MTIgnore>週別アーカイブ</MTIgnore>
<MTIfArchiveTypeEnabled archive_type="Weekly">
<MTArchiveList archive_type="Weekly">
<url>
<loc><$MTArchiveLink encode_xml="1"$></loc>
<MTEntries lastn="1" sort_by="modified_on">
<lastmod><$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
</MTEntries>
</url>
</MTArchiveList>
</MTIfArchiveTypeEnabled>
<MTIgnore>日別アーカイブ</MTIgnore>
<MTIfArchiveTypeEnabled archive_type="Daily">
<MTArchiveList archive_type="Daily">
<url>
<loc><$MTArchiveLink encode_xml="1"$></loc>
<MTEntries lastn="1" sort_by="modified_on">
<lastmod><$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
</MTEntries>
</url>
</MTArchiveList>
</MTIfArchiveTypeEnabled>
<MTIgnore>アーカイブページ</MTIgnore>
<url>
<loc><$MTLink template="アーカイブページ" encode_xml="1"$></loc>
<lastmod><$MTDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
</url>
</urlset>上記を設定後、保存・再構築します。
これでメインページと同じディレクトリに sitemaps.xml が生成されていればOKです。確認方法は、ブラウザから sitemaps.xml をURL指定して実行してみるか、FTPツールでメインページと同じディレクトリに sitemaps.xml があることを探してください。
２．テンプレートの改善点
他のサイトでもサイトマップ用テンプレートは数多く公開されていますが、当サイトでは下記の点を改善しています。
２．１ エントリー数設定
エントリー・アーカイブでの全エントリー数取得は offset 属性を用いています（適正な利用方法ではないかもしれませんが）。これにより、lastn="9999" という設定を不要にしています。
２．２ アーカイブの選択
各アーカイブ（カテゴリー／エントリー／月別／週別／日別）の表示は MTIfArchiveTypeEnabled を用いているので、使用中のアーカイブのみを自動的に対象に含めます。
つまりデフォルトテンプレートの運用であれば、サイトマップテンプレートの修正は不要です。
２．３ ファイルの最終更新日
カテゴリー・アーカイブ／月別アーカイブ／週別アーカイブ／日別アーカイブの更新日時は、下記の設定により、更新順に並べ替えた最新の1件を用いるようにしています。これにより過去のエントリーを修正した場合も、その時刻が反映されます。
Google の説明では、静的ファイルは「ファイルを実際に更新した日付」とありますが、Movable Type の静的ファイル生成、つまり再構築はアーカイブ別に行われるため、MTEntryModifiedDate が適正と思われます（間違ってたらすいません）。これにより、更新されていない URL はクロールしなくなるらしいので、サーバー負荷や CPU 使用量を軽減できます。
リスト2 改善点2 - 適正な最終更新日取得
<MTEntries lastn="1" sort_by="modified_on">
<lastmod><$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
</MTEntries>下の設定では、該当するアーカイブに属する最新エントリーの更新時刻しか収集されません。つまり、過去のエントリーを修正した時刻が反映されないという欠点があります。
リスト3 modified_on 属性を用いない場合のMTタグ
<MTEntries lastn="1">
<lastmod><$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>
</MTEntries>ただし、インデックステンプレート（メインページ／アーカイブページ）については正確な更新日を取得する手段がないため、MTDate（再構築日時）を利用しています。
２．４ タイムゾーン
タイムゾーンに MTBlogTimeZone を用いています。現地時刻表記の場合は MTBlogTimeZone を用いてタイムゾーン・オフセットを付与するのが適切と思われます。
リスト4 改善点3 - タイムゾーンの設定1
<lastmod><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>utc 属性を用いれば協定世界時になるので、MTBlogTimezone の代わりに下記の設定でも大丈夫なようです。
リスト5 改善点3 - タイムゾーンの設定2
<lastmod><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></lastmod>W3C Datetime によれば、青色部分の「Z」は時刻をUTC (協定世界時) で表記した場合に付与する特別な指定子です。
なお、utc 属性は MTEntryModifiedDate / MTDate タグで適用することができます（3.3 公式マニュアルには掲載されていません）。
２．５ 優先度
インデクシングして欲しい（と思われる）エントリー・アーカイブに priority を設定し、相対値を少し高くしています。
３．注意事項
Sitemap ファイル（sitemaps.xml）は UTF-8 で保存する必要があります。ブログの文字コードが UTF-8 以外の場合は下記のプラグインを用いて、Sitemaps の文字コードを UTF-8 で出力しましょう。
MT-I18Nプラグインをインストールした後、Sitemaps のテンプレート全体を MTEncodeText タグで括ります（リスト1）。
リスト6 MT-I18Nプラグインによる文字コード変換
<MTEncodeText from="[ブログの文字コード]" to="utf8">
：
[Sitemap の内容]
：
</MTEncodeText>日本一の本屋・Amazon の巨大倉庫
はてなブックマークをご覧の方はすでにご存知と思われますが、Amazon の倉庫を公開しているTV放送の YouTube 動画がありました。
規模はもちろんのこと、「ロボットより人間の方が効率が良い」という手作業によるピックアップ、そしてジャンルがごちゃ混ぜに置かれた書籍の在庫管理方法が興味深いです。簡単ながら Amazon からの注文方法も紹介されています。
それより、倉庫の場所が家から比較的近い場所だったことに驚いてます。まさに「すぐそーこ」。
Movable Type 3.x デフォルト・テンプレートのAtomフィードの不具合について
Movable Type のデフォルトテンプレート Atom フィード（atom.xml）に軽微な不具合があるようです。
Movable Type 3.x デフォルト・テンプレートのAtomフィードの不具合について
Movable Type 3.0以降にデフォルト・テンプレートとして含まれている、atom.xmlを生成するテンプレートをそのまま利用していると、2007年に入ってから再構築したときに内容が変わってしまい、ブログの購読者（あなたのブログのAtomフィードを購読している読者）の側で、未読ではない記事が未読として表示されてしまうなどの軽微な問題が起こる可能性があります。
この不具合を解消するためには、リスト1（atom.xml より抜粋）の赤色部分を、リスト2の青色に変更します。
リスト1 atom.xml 修正前
<id>tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,<$MTDate format="%Y"$>:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$></id>リスト2 atom.xml 修正後
<id>tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,2006:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$></id>修正は年内に行ないましょう。
なお 2007年以降に Movable Type を使い始めてこの記事に辿り着いた方は、"2006" の代わりに開始年（"2007" とか）を記述するか、リスト3の内容に変更すると良いでしょう。
リスト3 atom.xml 修正後（2007年以降に使用開始した場合）
<id>tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,<MTArchiveList archive_type="Monthly" sort_order="ascend" lastn="1"><$MTArchiveDate format="%Y"$></MTArchiveList>:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$></id>参考：drry+@->：Movable Type のデフォルト Atom フィードテンプレートを駄目出し
なお、当サイトでは FeedBurner を利用している（=atom.xml は未使用）ので、この修正は行っておりません。
JavaScript で文字をトリミングする
JavaScript を用いてエントリータイトル等の文字をトリミング（指定した文字数だけ表示する）するカスタマイズです。
以前、「Movable Type のようなトリミングを、他のブログで実現できないでしょうか」というご質問の回答です。大変遅くなりましたが、このエントリーで回答に替えさせて頂きます。
ここでは文字数でトリミングする方法を紹介していますが、半角・全角が混在している場合のサイズを調整したい場合は、下記のエントリーを参照ください。
とりあえず「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列をトリミングする、簡単な JavaScript を書いてみました。
Windows + IE6/Firefox 2 で実験した限りでは、全角・半角いずれも1文字で計算してトリミングしてくれるようですが、コードに不具合等ありましたらお知らせください。
１．スクリプトの追加
リスト 1.1 のリストを </head> の直前に追加します。外部ファイルでも構いません。
リスト 1.1 トリミング用スクリプト
<script type="text/javascript">
var rest = '...';
function cutStringById(id, size) {
var str = document.getElementById(id).innerHTML;
if(str.length > size){
document.getElementById(id).innerHTML = str.substring(0, size) + rest;
}
}
function cutStringByTagNameAndClassName(tagName, className, size) {
var elements = document.getElementsByTagName(tagName);
for (i=0; i < elements.length; i++) {
if (elements[i].getAttribute('class') == className ||
elements[i].getAttribute('className') == className) {
var str = elements[i].innerHTML;
if(str.length > size){
elements[i].innerHTML = str.substring(0, size) + rest;
}
}
}
}
</script>２．スクリプトを起動する
リスト 2.1 またはリスト 2.2 のいずれかを 、トリミングしたい文字列の直後、または </body> の直前に追加します。
要素名+ class 属性名で指定
リスト 2.1 要素名+ class 属性名で指定
<script type="text/javascript">
cutStringByTagNameAndClassName('[要素名]', '[class 属性名]', トリミングサイズ);
</script>id 属性名で指定
リスト 2.2 id 属性名で指定
<script type="text/javascript">
cutStringById('[id 属性名]', トリミングサイズ);
</script>具体的な起動方法は３項をご覧ください。
３．サンプル
リスト 3.1 のようにHTMLマークアップされた文字列
リスト 3.1 サンプル1
<a href="http://domain.com/" class="hoge">文字をトリミングする</a>の「文字をトリミングする」の文字を先頭から 5 文字だけ表示（「文字をトリ...」にする）する場合は、リスト 2.1 を利用し、その赤色部分を、
リスト 3.2 サンプル2
cutStringByTagNameAndClassName('a', 'hoge', 5);とします。
リスト 3.3 のようにHTMLマークアップされた文字列
リスト 3.3 サンプル2
<p id="hoge">文字をトリミングする</p>の「文字をトリミングする」の文字を先頭から 5 文字だけ表示（「文字をトリ...」にする）する場合は、リスト 2.2 を用い、その赤色部分を
リスト 3.4 サンプル2
cutStringById('hoge', 5);とします。
４．トリミング後の追加文字列を変更する
リスト 1.1 の 2 行目（リスト 4.1 の赤色部分）を他の文字に変更してください。何も表示させたくない場合は赤色部分を削除してください。
リスト 4.1 トリミング後の文字列
var rest = '...';MOVABLETYPE PLUGINS DIRECTORY
Movable Type 関連書籍として、初めての「プラグイン集」が発売されました。
 | MOVABLETYPE PLUGINS DIRECTORY 関根 元和 藤本 壱 みらの 毎日コミュニケーションズ 2006-11 売り上げランキング : 1957 Amazonで詳しく見る by G-Tools |
画像では分かりにくいのですが、黒を基調としたお洒落なブックカバー。その中にはアルファベット順に Movable Type 3.3 対応の 81 個の名だたるプラグインが紹介されています。その他、StyleCatcher 等、インストール済プラグインの利用方法も掲載されています。*1
また、本書のコラム欄に「プラグイン紹介サイト」ということで、「Six Apart：プラグイン・ディレクトリ」「米Six Apart：Movable Type Plugins」に加え、当サイトの「Movable Type プラグイン一覧」を紹介くださっています。
掲載頂けたこと、および見本誌を贈呈くださったことに対し、この場をお借りしてお礼申し上げます。ありがとうございました。
その「Movable Type プラグイン一覧」は手作業で随時更新中です。サイト内エントリーとしては随一の更新率をマークしておりますが、「まだ掲載されていない」という国内のプラグインがありましたら、ご連絡お待ち申し上げます（海外のプラグインはいずれまた）。
*1：3.3x 以前の BigPAPI プラグインは対象外となっています。
「書ける人」になるブログ文章教室
小説家でアメーバブックス取締役編集長・山川健一の著書です。
 | 「書ける人」になるブログ文章教室 山川健一 ソフトバンククリエイティブ 2006-11-16 売り上げランキング : 7556 Amazonで詳しく見る by G-Tools |
まだ全部読んでいないのですが、例えば冒頭の章では「文学というものが非常に高度で難解なものになった?（中略）?以前にもっと豊穣な平仮名の世界が広がっており、今の日本のブログは近代文学を超えてそこに直結している?（中略）?ブログの爆発的な広がりは日本文学が経験している大きな揺り戻し現象なのだ。」と、非常に興味深い切り口で語られています。
「教室」というタイトルですが堅苦しい内容ではなく、ブログを書くためのちょっとしたポイントが、小説家の視点で読みやすく書かれた1冊です。
しまりのない文章ですいませんがご紹介まで。
