小粋空間: 2007年5月アーカイブ

Top ＞ May 2007 [全て開く]

検索結果のページ分割（3.3x 版）

May 31,2007 1:31 AM
Category：[トラブルシューティング, ページ分割, 検索]
Tag：[Counter, Customize, MovableType, MTPaginate, Plugin, SearchResult]
Permalink

MTPaginate プラグインを利用することで、テキスト検索・タグ検索のページ分割が可能ですが、Movable Type 3.3x ではメインページや他のアーカイブと同じような設定では、例えばデフォルトテンプレートでは 2カラム表示が崩れるという問題が発覚しました。*1

ということで、3.3x 版の検索結果のページ分割方法について改めて説明致します。

なお、テンプレートの修正内容が複雑なため、今回は理由を説明しながらタグの設定を行っていきます。作業をスキップしたい方は1項、２項を実施した後、５項のタグをそのまま検索結果ページの該当部分と置き換えてください。

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

プラグイン配布サイト

MT Extensions：MTPaginate

よりプラグインをダウンロードします（ページ上方にある「Download」をクリック）。

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

ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。

plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl

３．ページ分割用タグを挿入

検索結果テンプレートを修正していきます。
最初に、ページ分割用のタグ

MTPaginate
MTPaginateContent
MTPaginateSectionBreak

と、ナビゲーション表示の

MTPaginateIfMultiplePages
MTPaginateIfPreviousPage_
MTPaginateNavigator
MTPaginateIfNextPage_

を追加します（青色部分）。挿入位置は他の既存タグを参考にしてください。基本的には

<MTSearchResults> の前
</MTSearchResults> の前後

の辺りです。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
            <MTBlogResultHeader>
                <h3 class="search-results-header">
                <MTIfStraightSearch>
                    ブログ: <$MTBlogName$> での検索結果
                </MTIfStraightSearch>
                <MTIfTagSearch>
                    <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
                    </MTIfTagSearch>
                </h3>
                <div class="search-results-container">
            </MTBlogResultHeader>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <MTBlogResultFooter>
                </div>
            </MTBlogResultFooter>
 
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTPaginateContent の max_sections 属性（赤色部分）の「3」が1ページの表示件数です。この部分はお好みの値に変更してください。

ナビゲーションを後方に表示したい場合は、<MTPaginateIfMultiplePages>～</MTPaginateIfMultiplePages> を </MTPaginate> の直前に追加してください。

４．検索結果ヘッダおよび検索結果フッタ用タグを削除

MTSearchResults の中に記述された検索結果ヘッダおよび検索結果フッタ用タグ

MTBlogResultHeader
MTBlogResultFooter

を削除します（赤色部分）。タグで括られた内容は後で利用しますので、メモ帳にでもペーストしておいてください。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
            <MTBlogResultHeader>
                <h3 class="search-results-header">
                <MTIfStraightSearch>
                    ブログ: <$MTBlogName$> での検索結果
                </MTIfStraightSearch>
                <MTIfTagSearch>
                    <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
                    </MTIfTagSearch>
                </h3>
                <div class="search-results-container">
            </MTBlogResultHeader>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <MTBlogResultFooter>
                </div>
            </MTBlogResultFooter>
 
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

この2つのタグは、検索結果全体の最初と最後に1度しか実行されません。ページ分割処理に含めると、1ページ目の最初と最後のページの最後にしか適用されないため、削除します。

５．検索結果ヘッダと検索結果フッタを移動

４項で削除した検索結果ヘッダと検索結果フッタの内容を MTPaginateContent の外側に設定します（青色部分）。注：</MTPaginateContent> の下にもあります。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
 
    <h3 class="search-results-header">
    <MTIfStraightSearch>
        ブログ: <$MTBlogName$> での検索結果
    </MTIfStraightSearch>
    <MTIfTagSearch>
        <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
        </MTIfTagSearch>
    </h3>
    <div class="search-results-container">
 
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
 
    </div>
 
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTPaginateContent の外側に設定することで、検索結果ヘッダと検索結果フッタがページ分割に依存せず常に表示されるようになります。

６．検索結果ヘッダと検索結果フッタに MTSearchResults を適用

５項で設定した検索結果ヘッダと検索結果フッタを MTSearchResults で括ります。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
 
    <MTSearchResults>
        <h3 class="search-results-header">
        <MTIfStraightSearch>
            ブログ: <$MTBlogName$> での検索結果
        </MTIfStraightSearch>
        <MTIfTagSearch>
            <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
            </MTIfTagSearch>
        </h3>
        <div class="search-results-container">
    </MTSearchResults>
 
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
 
    <MTSearchResults>
        </div>
    </MTSearchResults>
 
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTSearchResults で括らないと、検索文字列がヒットしなかった場合や、検索文字列が設定されていない場合にも検索結果ヘッダと検索結果フッタが表示されてしまうためです。

７．検索結果ヘッダと検索結果フッタに Counter プラグインを適用

６項で設定した検索結果ヘッダと検索結果フッタを、さらに Counter プラグインのタグを追加します（青色部分）。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
 
    <MTCounter>
    <MTSearchResults>
        <$MTCounterPlus$>
        <MTCounterIfEqual value="1">
            <h3 class="search-results-header">
            <MTIfStraightSearch>
                ブログ: <$MTBlogName$> での検索結果
            </MTIfStraightSearch>
            <MTIfTagSearch>
                <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
                </MTIfTagSearch>
            </h3>
            <div class="search-results-container">
        </MTCounterIfEqual>
    </MTSearchResults>
    </MTCounter>
 
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
 
    <MTCounter>
    <MTSearchResults>
        <$MTCounterPlus$>
        <MTCounterIfEqual value="1">
            </div>
        </MTCounterIfEqual>
    </MTSearchResults>
    </MTCounter>
 
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTSearchResults はループ処理用のタグで、上記までの設定ではヒットした回数分タグの内容が繰り返して表示されるためです。

Counter プラグインについては「Counter プラグイン」を参照してインストールまで行ってください。
カウンタ系のプラグインは他にも出回ってますので、そちらを利用しても構いません。

これでページ分割の設定は完了です。

８．その他

ナビゲーションを後方に設定した場合は下マージンが若干少ないので適宜追加してください。
検索で「現在検索中です。検索が終わるまでお待ちください。」というメッセージが表示されて困る方は「Movable Type の検索でエラーになる問題について」を参照願います。

*1：以前の検索結果ページは 1カラムであったため、たまたま正常に動作しているようにみえていただけかもしれません。

Comments [0] | Trackbacks [0]

BlognPlus（ぶろぐん+）スキン

May 30,2007 2:25 AM
Category：[テンプレート]
Tag：[BlognPlus, Template]
Permalink

BlognPlus（ぶろぐん+）用のスキン（テンプレート）を作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

OS：Windows2000/XP
ブラウザ：IE6/IE7/Firefox2/Opera9

Mac環境はありませんので Safari での確認はできておりません。予めご容赦ください。

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します

３．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

3カラム（カラム幅固定）
3カラムリキッドレイアウト（中央カラム幅可変）
2カラム（右サイドバー：カラム幅固定）
2カラム（左サイドバー：カラム幅固定）
2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
1カラム（カラム幅固定）
1カラムリキッドレイアウト（カラム幅可変）

の計8種類を用意しています（それぞれのサンプルはちょっと下にある画像をご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

3カラム

<body class="layout-three-column-liquid">

3カラム・リキッドレイアウト

<body class="layout-two-column-left">

2カラム（左サイドバー）

<body class="layout-two-column-liquid-left">

2カラム・リキッドレイアウト（左サイドバー）

<body class="layout-two-column-right">

2カラム（右サイドバー）

<body class="layout-two-column-liquid-right">

2カラム・リキッドレイアウト（右サイドバー）

<body class="layout-one-column">

1カラム

<body class="layout-one-column-liquid">

1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

カラム数を変更、例えば3カラムから2カラム（左サイドバー）に変更した場合、管理メニューの「デザイン」→「コンテンツ」で右サイドバーに表示するものがなくなれば自動的に2カラム表示になります。
非表示にするサイドバーにコンテンツが残っている場合は、

<!-- 右カラム開始 -->
<div id="links-right-box">
<dl id="links-right">
　　　　　　　　　：
</dl><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

を丸ごと削除してください。1カラムに変更される場合は左右両方のカラムをごっそり削除してください（いずれもサイドバーの復活が面倒なのでお勧めできません）。

４．1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）がアーカイブページ等のリンクは考慮しておりませんのでご注意ください。

５．クレジットバナーについて

当サイトのクレジットバナーはデフォルトで右サイドバー下に表示するようにしています。バナー画像は別のサイトから取得するようにしていますが、テンプレートのページよりダウンロードしてお使いくださっても結構です（src 属性は適宜修正してください）。なお右カラムを削除される場合は、下記のタグを左サイドバーに挿入してください。

<dd class="powered">
<ul><li>Powered by<br />
<a href="http://www.blogn.org/" target="_blank"><img src="images/blogn3.gif" alt="BLOGNPLUS（ぶろぐん＋）" border="0" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><p><br /></p></li></ul>
</dd>

６．その他

基本的な動作は確認したつもりですが、ぶろぐんの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

７．テンプレート

HTML

<?xml version="1.0" encoding="{CHARSET}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta name="generator" content="Blogn Plus" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" href="{CSSNAME}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{HOMELINK}?mode=rss" />
<link rel="index" href="{HOMELINK}" />
<link rev="made" href="mailto:user@domain" />

<title>{SITETITLE}</title>

</head>

<body class="layout-three-column">

<div id="box">

<!-- タイトル -->
<div id="header">
<h1 id="blog-name"><a href="{HOMELINK}">{SITENAME}</a></h1>
<p class="blog-description">{SITEDESC}</p>
</div>

<!-- 左カラム開始 -->
<div id="links-left-box">
<dl id="links-left">

<!-- カレンダー開始 -->
<dd class="side" id="calendar">
<table summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead">{CDCTRLBACK}&laquo;{/CDCTRLBACK} {CDYM}Y年m月{/CDYM} {CDCTRLNEXT}&raquo;{/CDCTRLNEXT}</caption>
<tr>
<th abbr="Sunday"><span class="holiday">Sun</span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="saturday">Sat</span></th>
</tr>
</table>
{CALENDARBOX}
</dd>
<!-- カレンダー終了 -->

<!-- エントリーリスト開始 -->
{NE}
<dt class="sidetitle">
Recent Entries
</dt>

<dd class="side">
<ul>
{NELOOP}
  <li>{NELINK}{NETITLE} ({NEYMD}m/d{/NEYMD}){/NELINK}</li>
{/NELOOP}
</ul>
</dd>
{/NE}
<!-- エントリーリスト終了 -->

<!-- 最近のコメント開始 -->
{RC}
<dt class="sidetitle">
Recent Comments
</dt>

<dd class="side">
<ul>
{RCLOOP1}
<li>{RCTITLE}
<ul>
{RCLOOP2}
<li>{RCLINK}{RCNAME}({RCYMD}m/d{/RCYMD}){/RCLINK}</li>
{/RCLOOP2}
</ul>
</li>
{/RCLOOP1}
</ul>
</dd>
{/RC}
<!-- 最近のコメント終了 -->

<!-- 最近のトラックバック開始 -->
{RT}
<dt class="sidetitle">
Recent Trackbacks
</dt>

<dd class="side">
<ul>
{RTLOOP1}
<li>{RTTITLE}<br>
<ul>
{RTLOOP2}
<li>{RTLINK}{RTNAME}({RTYMD}m/d{/RTYMD}){/RTLINK}</li>
{/RTLOOP2}
</ul>
</li>
{/RTLOOP1}
</ul>
</dd>
{/RT}
<!-- 最近のトラックバック終了 -->

</dl><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">

<!-- リンク -->
<p class="content-nav">
   {NEXTPAGE} &laquo; 次の記事{/NEXTPAGE} | <a href="{HOMELINK}">メイン</a> | {BACKPAGE}前の記事 &raquo; {/BACKPAGE}
</p>

{SEARCH}
<div class="entry">
<div class="date">サイト内検索結果一覧</div>
   {SEARCHLOOP}
   <h2 class="entry-header">{SEARCHLIST}</h2>
   {/SEARCHLOOP}
</div>
{/SEARCH}

{PROFILES}
<div class="date">プロフィール</div>
<h2 class="entry-header">{PROFILENAME}</h2>
<div class="entry-content">
   <div class="entry_body">{PROFILEMES}</div>
</div>
{/PROFILES}

{LOG}
{LOGLOOP}
<div class="entry">

   <!-- エントリー日付開始 -->
   <div class="date">{LOGYMD}Y年m月d日（l）{/LOGYMD}</div>
   <!-- エントリー日付終了 -->

   <!-- エントリータイトル -->
   <h2 class="entry-header">{LOGTITLE}</h2>

   <!-- エントリー -->
   <div class="entry-content">
      <div class="entry-body">{LOGBODY}</div>

      <!-- 追記 -->
      {MOREMARK}
      <div class="entry-more">
         <a href="{LOGURL}#more">続きを読む &raquo;</a>
      </div>
      {/MOREMARK}
      <div id="more" class="entry-more">{LOGMORE}</div>

   </div><!-- /entry-content -->

   <!-- 投稿者情報開始 -->
   <div class="entry-footer">
Posted by {LOGAUTHOR} at {LOGHMS}h:i A{/LOGHMS} | Category : {LOGCATEGORY} | {LOGCOMMENT} | {LOGTRACKBACK} | {LOGMODE "","非公開記事"}
   </div><!-- /entry-footer -->
   <!-- 投稿者情報終了 -->

</div><!-- /entry -->

{TRACKBACK}
<div id="trackbacks" class="trackbacks">
   {TRACKBACKINPUT}
   <h3 id="trackback" class="trackbacks-header">トラックバックURL</h3>
   <!-- トラックバックURL -->
   <div id="trackbacks-info">
      <p>この記事のトラックバックURL:<br />{TRACKBACKURL}</p>
   </div>
   {/TRACKBACKINPUT}

   {TRACKBACKNOINPUT}
   <h3 id="trackback" class="trackbacks-header">この記事へのトラックバック受付は終了しています</h3>
   {/TRACKBACKNOINPUT}

   <h3 class="trackbacks-header">トラックバック</h3>

   {TRACKBACKLOOP}
   <div class="trackbacks-content">

      <!-- トラックバック本文 -->
      <div class="trackback" id="p<$MTPingID$>">
         <div class="trackback-content">
            <p>
               &raquo; {TRACKBACKTITLE} from {TRACKBACKUSER}<br />
               {TRACKBACKBODY}
            </p>
         </div>
         <p class="trackback-footer">
            Tracked on {TRACKBACKYMD}Y/m/d h:i A{/TRACKBACKYMD}
         </p>
      </div>
   </div>
   {/TRACKBACKLOOP}
</div>
{/TRACKBACK}

{TRACKBACKNEW}
<div id="trackbacks" class="trackbacks">
   <h3 id="trackback" class="trackbacks-header">トラックバックURL</h3>
   <div id="trackbacks-info">
      <p>この記事のトラックバックURL:<br />{TRACKBACKURL}</p>
   </div>
   <h3 class="trackbacks-header">新着トラックバック</h3>
   {TRACKBACKNEWLOOP}
   <div class="trackbacks-content">

      <!-- トラックバック本文 -->
      <div class="trackback" id="p<$MTPingID$>">
         <div class="trackback-content">
            <p>
               &raquo; {TRACKBACKTITLE} from {TRACKBACKUSER}<br />
               {TRACKBACKBODY}
            </p>
         </div>
         <p class="trackback-footer">
            Tracked on {TRACKBACKYMD}Y/m/d h:i A{/TRACKBACKYMD}
         </p>
      </div>
   </div>
   {/TRACKBACKNEWLOOP}
</div>
{/TRACKBACKNEW}

{TRACKBACKLIST}
<div id="trackbacks" class="trackbacks">
   <h3 id="trackback" class="trackbacks-header">トラックバックURL</h3>
   <div id="trackbacks-info">
      <p>この記事のトラックバックURL:<br />{TRACKBACKURL}</p>
   </div>
   <h3 class="trackbacks-header">トラックバック一覧</h3>
   {TRACKBACKLISTLOOP}
   <div class="trackback" id="p<$MTPingID$>">
      <div class="trackback-content">
         <p>
            {TRACKBACKTITLE}
         </p>
         <p class="trackback-footer">
            Tracked on {TRACKBACKYMD}Y/m/d h:i A{/TRACKBACKYMD}
         </p>
      </div>
   </div>
   {/TRACKBACKLISTLOOP}
</div>
{/TRACKBACKLIST}

{COMMENT}
<div id="comments" class="comments">
   <div class="comments-content">

      {COMMENTNOINPUT}
      <h3 class="comments-header">この記事に対するコメントの受付は終了しています。</h3>
      {/COMMENTNOINPUT}

      <h3 class="comments-header">コメント</h3>
      {COMMENTLOOP}
      <div class="comment" id="cmt{COMMENTID}">

         <!-- コメント本文 -->
         <div class="comment-content">{COMMENTBODY}</div>

         <!-- コメント投稿者情報 -->
         <p class="comment-footer">
            Posted by:
            {COMMENTUSER} |  {COMMENTEMAIL}E-mail{/COMMENTEMAIL} | {COMMENTURL}URL{/COMMENTURL} | {COMMENTYMD}Y/m/d h:i A{/COMMENTYMD}
         </p>
      </div>
      {/COMMENTLOOP}
   </div><!-- /comments-content -->

   {COMMENTINPUT}
   <div class="comments-open" id="comments-open">
      <h3 class="comments-open-header">コメントする</h3>

      <div class="comments-open-content">
         <form action="index.php?mode=comment" method=post>
            <input type="hidden" value="{CEID}" name="blogn_cid">
            <div id="comments-open-data">
               <p>
                  <label for="comment-author">名前:</label>
                  <input id="comment-author" name="blogn_cname" tabindex="7" accesskey="n" size="30" value="{CNAME}" />
               </p>
               <p>
                  <label for="comment-email">メールアドレス:</label>
                  <input id="comment-email" name="blogn_cemail" tabindex="8" accesskey="m" size="30" value="{CEMAIL}" />
               </p>
               <p>
                  <label for="comment-url">URL:</label>
                  <input id="comment-url" name="blogn_curl" tabindex="9" accesskey="u" size="30" value="{CURL}" />
               </p>
               <p>
                  <label for="comment-bake-cookie"><input id="comment-bake-cookie" type="checkbox" tabindex="10" accesskey="r" value="on" name="set_cookie" />情報を保存する</label>
               </p>
            </div>
            <p id="comments-open-text">
               <label for="comment-text">コメント:</label>
               <textarea id="comment-text" name="blogn_cmes" tabindex="11" accesskey="t" rows="10" cols="30"></textarea>
            </p>
            <div id="comments-open-footer" class="comments-open-footer">
               <input type="submit" tabindex="12" accesskey="s" value="投稿" />
            </div>
         </form>
      </div>
   </div>
   {/COMMENTINPUT}

</div><!-- /comments -->
{/COMMENT}

{COMMENTNEW}
<div id="comments" class="comments">
   <div class="comments-content">
      <h3 class="comments-header">新着コメント</h3>
      {COMMENTNEWLOOP}
         <div class="comment" id="cmt{COMMENTID}">
            <div class="comment-content">{COMMENTBODY}</div>
            <p class="comment-footer">
            Posted by {COMMENTUSER} |  {COMMENTEMAIL}E-mail{/COMMENTEMAIL} | {COMMENTURL}URL{/COMMENTURL} | {COMMENTYMD}Y/m/d h:i A{/COMMENTYMD}
            </p>
         </div>
      {/COMMENTNEWLOOP}
   </div>
</div>
{/COMMENTNEW}

{COMMENTLIST}
<div id="comments" class="comments">
   <div class="comment-list">
      <h3 class="comments-header">コメント一覧</h3>
      <ul>
      {COMMENTLISTLOOP}
         <li>
         {COMMENTUSER} at {COMMENTYMD}Y/m/d h:i A{/COMMENTYMD}
         </li>
      {/COMMENTLISTLOOP}
      </ul>
   </div>
</div>
{/COMMENTLIST}

{/LOGLOOP}
{/LOG}

</div><!-- /blog -->

<!-- 1カラム用フッタ
<div id="footer">
<a href="http://www.koikikukan.com/"><img src="http://user-domain/images/koikikukan.gif" alt="小粋空間" width="128" height="22" /></a> 
<a href="http://www.movabletype.jp"><img src="" alt="Movable Type " width="128" height="22" /></a>
</div>
-->

</div><!-- /content -->
<!-- 中央カラム終了 -->

<!-- 右カラム開始 -->
<div id="links-right-box">
<dl id="links-right">

<!-- 検索開始 -->
<dt class="sidetitle">
Search this site
</dt>
 
<dd class="side">
<form action="./" method="get">
<fieldset>
<input type="text" id="search" name="s" />
<input type="submit" value="検索" />
</fieldset>
</form>
</dd>
<!-- 検索終了 -->

<!-- カテゴリーリスト開始 -->
{CA}
<dt class="sidetitle">
Categories
</dt>

<dd class="side" id="categories">
<ul>
{CALOOP1}
<li>{CALINK1}{CATITLE1} [{CACOUNT1}]{/CALINK1}
{CALOOP2}
<ul><li>{CALINK2}{CATITLE2} [{CACOUNT2}]{/CALINK2}</li></ul>
{/CALOOP2}
</li>
{/CALOOP1}
</ul>
</dd>
<!-- カテゴリーリスト終了 -->
{/CA}

<!-- 月別アーカイブリスト開始 -->
{AR}
<dt class="sidetitle">
Monthly Archives
</dt>

<dd class="side">
<ul>
{ARLOOP}
<li>{ARLINK}{ARYM}Y年m月{/ARYM} [{ARCOUNT}]{/ARLINK}</li>
{/ARLOOP}
</ul>
</dd>
{/AR}
<!-- 月別アーカイブリスト終了 -->

<!-- リンク開始 -->
{LI}
<dt class="sidetitle">
Links
</dt>

<dd class="side">
<ul>
{LILOOP1}
  <li>{LICATEGORY}
    <ul>
      {LILOOP2}
        <li>{LINAME}</li>
      {/LILOOP2}
    </ul>
  </li>
{/LILOOP1}
</ul>
</dd>
{/LI}
<!-- リンク終了 -->

<!-- RSSフィード -->
<dt class="sidetitle">
RSS
</dt>
<dd class="side">
<ul>
<li><a href="{HOMELINK}?mode=rss">RSS 1.0</a></li>
</ul>
</dd>
<!-- RSSフィード終了 -->

<!-- プロフィール -->
{PR}
<dt class="sidetitle">
プロフィール
</dt>

<dd class="side">
<ul>
{PRLOOP}
<li>{PRLINK}{PRNAME}{/PRLINK} [{PRCOUNT}]</li>
{/PRLOOP}
</ul>
</dd>
{/PR}
<!-- プロフィール終了 -->

<!-- クレジットバナー -->
<dd class="powered">
<ul><li>Powered by<br />
<a href="http://www.blogn.org/" target="_blank"><img src="images/blogn3.gif" alt="BLOGNPLUS（ぶろぐん＋）" border="0" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><p><br /></p></li></ul>
</dd>

</dl><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

</div><!-- /box -->

<script type="text/javascript">
//<![CDATA[
var elements = document.getElementsByTagName('div');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    if (elements[i].className == 'date') {
        work = elements[i].innerHTML;
        if(work == work_old){
            elements[i].style.display = 'none';
        }
        work_old = work;
    }
}
//]]>
</script>

</body>
</html>

スタイルシート

/*
 * File      : style.css
 * Version   : 1.00
 * Update    :
 *
 * Copyright (C) 2005-2007 www.koikikukan.com All rights reserved.
 */

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* リンク */
a,
a:link,
a:visited {
    color: #069;
    text-decoration: none;
}
a:hover {
    color: #069;
    text-decoration: underline;
}
a:active {}

/* リンクつき画像 */
a img {
    border: 0;
}

/* 段落 */
p {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* フォーム */
form {
    margin: 0px;
}
#search-options,
input {
    padding: 1px;
    font-size: 12px;
}

/* 引用 */
blockquote {
    width: auto;
    margin: 15px 20px 0 20px;
    padding: 10px;
    border: 1px solid #666;
    background: #f6f6f6;
    font-size: 10px;
    line-height: 150%;
}
.quotetitle { /* 引用文タイトル */
    font-size: 10px;
    border-bottom: 1px solid #666;
    padding: 3px;
}

/* タイトルバナー */
#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}

#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}

/* タイトルバナー下の説明 */
.blog-description {
    margin: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

/* エントリー全体 */
.blog {
    padding: 10px 15px;
}

/* エントリー日付 */
.date {
    margin: 8px 0;
    padding-left: 5px;
/*    background-position: left; 
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    font-size: 83.3%;
    font-weight: bold;
    line-height: 2.0;
}

/* エントリー日付・コメントタイトル・トラックバックタイトルの配色 */
.date,
.trackbacks-header,
.comments-header,
.comments-open-header {
    color: #fff;
    background: #8fabbe;
}

/* エントリー */
.entry {
    width: auto;
    margin: 0 3px 15px;
    color: #36414d;
    background: #fff;
/*    background-position: right; 
    background-repeat: repeat-y; 
    background-image: url(".gif");*/
    font-size: 83.3%;
    line-height:1.5;
    word-break: break-all;
}

/* 段落 */
.entry p {
    margin: 15px 0;
}

/* 順序なしリスト */
.entry ul,
.entry ol {
    padding-left: 16px;
}
.entry ul li {
    list-style-type: circle;
}

/* 定義リスト */
.entry dl {}
.entry dt {}
.entry dd {
    padding-left: 8px;
}

/* テキストエリア */
.entry textarea {
    width: 97%;
}

/* 引用 */
blockquote {
    width: auto;
    margin: 15px 20px 0;
    padding: 10px;
    border: 1px solid #666;
    background: #f6f6f6;
    font-size: 83.3%;
    line-height: 1.5;
}
.quotetitle { /* 引用文タイトル */
    font-size: 83.3%;
    border-bottom: 1px solid #666;
    padding: 3px;
}

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #f6f6f6;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}
html>body pre {
    width: 87%;
}

/* 追記 */
.entry-more {}

/* エントリータイトル */
.entry-header {
    margin: 15px 0;
    padding-left: 5px;
    border-left: 3px solid #999;
    color: #444;
    font-size: 100%;
    font-weight: bold;
}

/* 投稿者 */
.entry-footer {
    margin: 10px 0 0;
    padding-top: 3px;
    border-top: 1px dotted #36414d;
    text-align: right;
    font-size: 83.3%;
}

/* 前後記事のリンク */
.content-nav {
    margin: 10px;
    text-align: center;
/*    font-size: 12px;*/
}

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444444;
    background: none;
}
table .calendar {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    width: 19px;
    font-size: 8px;
    text-align: center;
}
.cell,
.cell_saturday,
.cell_sunday,
.cell_today {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
    width: 23px;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: blue;
}

#links-left-box dl,
#links-right-box dl {
    margin: 0;
    padding: 0;
}
#links-left-box dd,
#links-right-box dd {
    font-size: 75%;
}

.side dt,
.side dd {
    margin: 0;
    padding: 0;
}

/* サイドメニュータイトル */
.sidetitle {
    margin-top: 3px;
    border: 1px solid  #666666;
    color: #444;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #444;
    font-size: 75%;
    line-height: 1.5;
}
.side ul,
.side ol {
    padding-left: 18px;
}
html>body .side ul {
    padding-left: 14px;
}
.side ul li {
    list-style-type: circle;
}
.side ul li ul {
    padding-left: 0px;
}
.side li li {
    list-style-type: none;
}

/* サイドメニュー(サブカテゴリー用) */
.side #categories ul {
    padding-left: 16px;
}
.side #categories ul ul {
    padding-left: 10px;
}
.side #categories li {
    list-style-type: circle;
}

/* 検索 */
fieldset {
    border: none;
}

/* カウンター */
.counter {
    margin: 8px 0 25px;
    padding: 2px;
    background: none;
    font-size: 9px;
}

/* クレジットバナー */
.powered {
    margin-top: 50px;
    text-align: left;
    color: #666666;
    font-size: 75%;
    line-height: 1.5;
}
.powered img {
    margin-top: 3px;
}
.powered ul,
.powered li {
    list-style: none;
}

/* コメント・トラックバック */
#comments-open-data p {
    margin-bottom: 10px;
}

#comment-post {
   font-weight: bold;
}

#comment-author, #comment-email, #comment-url, #comment-text {
   width: 220px;
}

#comment-text {
    width: 266px;
}

#comment-bake-cookie {
   margin-left: 2px;
   vertical-align: middle;
}

#comments-open-footer {
    text-align: center;
}

.trackbacks,
.comments {
    margin: 10px 5px;
    color: #36414d;
}

.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
    padding-left: 5px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 83.3%;
    font-weight: bold;
    line-height: 2.0;
}

#trackbacks-info,
.trackback-content,
.comment-content,
.comments-open-content {
    margin: 0;
    padding: 0;
    font-size: 83.3%;
    line-height: 1.5;
    word-break: break-all;
}

.trackback-content p,
.comment-content p {
    margin-top: 10px;
    margin-bottom: 5px;
}

.trackback-footer,
.comment-footer {
    font-size: 9px;
    border-top: 1px dotted #36414d;
    text-align: right;
    padding-top: 3px;
    margin-right: 2px;
}

.comments-open label {
    display: block;
}

.comments-head {
    font-size: 11px;
    color: #ffffff;
    background: #8fabbe;
    padding: 2px 0 2px 5px;
    margin: 15px 0;
}

.comment-list {
    margin: 0 0 20px 3px;
}
.comment-list li {
    font-size: 10px;
}

/* カラム切り替え */

/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
.layout-three-column #container,
.layout-two-column-left #container,
.layout-two-column-right #container {
    margin-bottom: 10px;
}
.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;
}

/* 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;
}

/* 2カラム用 */
.layout-one-column #container {
    margin-bottom: 0;
}

/* 1カラム用 */
.layout-one-column #box {
    width: 478px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

/* 1カラム・リキッドレイアウト用 */
/* タイトルバナー */
.layout-one-column-liquid #banner {
    margin-right: 100px;
    margin-left : 100px;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
body.layout-one-column-liquid {
    background: #36414d;
}

/* フッタ */
.layout-one-column #footer {
    text-align: center;
}
.layout-one-column-liquid #footer {
    padding-bottom: 15px;
    text-align: center;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 1カラム(リキッドレイアウト) */
.layout-one-column-liquid #content {
    margin: 0 100px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background: #ffffff;
}

/* 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;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
    color: #ffffff;
}

/* 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;
}
.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
}
.layout-two-column-right #links-right {
    padding: 15px 15px 0;
    color: #ffffff;
}

/* 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;
}
.layout-two-column-left #links-left-box {
    float: left;
    width: 185px;
}
.layout-two-column-left #links-left {
    padding: 15px 15px 0;
    color: #ffffff;
}

/* 1カラム */
.layout-one-column #content {}

input,textarea {
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif;
}

#box::after {
    height: 0;
    display: block;
    content: ".";
    visibility: hidden;
    clear: both;
}
#box {
    width: 100%
    /*\*/*/
    overflow: hidden;
    /**/
}

Comments [4] | Trackbacks [0]

ブログを続けるための3つのポイント

May 29,2007 2:17 AM
Category：[blog]
Tag：[Blog, Knowhow]
Permalink

このサイトもとりあえず3年続いたので、続かなくなる前に（笑）ブログを続けるためのノウハウを書いてみることにしました。3年の経験にもとづいているので、まあまあの信憑性かもしれません。

ブログを始めた時は「楽しい」という気持ちが強いので「続かない」というケースは少ないと思いますが、書き始めてしばらく経ち、続けることへの意欲がなくなりかけてきた頃に思い起こしてもらえると有難いです。

続けるための観点は人によって違うと思います。ここでは経験上「こうしておけば続けやすい」というものをまとめてみました。「3つのポイント」というタイトルは、たまたま思いついたのが3つだった、というだけです。思いついたらまたエントリーします。

またアクセスを増やす方法については言及していませんので、「アクセスが増えないので続かない」という対処について触れてません。アクセスについては別の機会にエントリーします。

１．続けることに対する目標を作る

「ブログをX日続ける」という目標を作りましょう。

「続ける」ということは日々の積み重ねの結果ですので「目標にするのはちょっと…」と思われるかもしれませんが、「日々積み重ねる」ということは継続するという行為のミクロな視点である訳なので、個人的には違和感ありません。

それはさておき、目標はいきなり「3年」とか、そんな大きな目標は立てる必要はありません。例えば「1週間」という目標を立てます。そうすることで、直近のスケジュールをどうすれば良いかという、具体的な行動が起こせるきっかけになります。

私の場合、まず日曜の夜に5日?1週間分のおぼろげなエントリー予定を立てるようにしています。とりあえず週末はダジャレの日が1回あるので（笑）、それを除いた残りの日のエントリーのスケジュールを考えます。これまでの下書きの公開や、頂いたご質問の情報展開、新ネタ等。
アクセスは週明けが多いので、読んで欲しい記事はできるだけ月・火に出すようにしています。

そして週の間にまた別のネタが見つかるかもしれません。それは緊急性の高い情報であれば優先して投稿し、スケジュールから外れたエントリー予定だった分は次週回しにします。最近はこういうサイクルでやりくりしています。

話を戻して、「10年続ける」といった壮大な目標でも構わないのですが、大きい目標に対しては必ず「小さい目標」も同時にたてて、それを繰り返すようにしましょう。あるマラソン選手（誰か失念）も「42.195km走る切るために『次の電柱まで』を繰り返して走っている」と言ってました。
小さいことの積み重ねが大きな結果に結びつきます。

それから、目標を達成する直前に次の目標を立てることも大事です。例えば「3年続けました！」という達成感で満足してしまうと、そこで立ち止まってしまう可能性があります。
目標達成目前のところで次の目標を決めておけば、達成感を味わいながら、同時に次の目標に向かって心の準備も整っているという訳です。

２．ネタはできるだけ溜めておく

私の場合、2年経った頃、「今日は何を書こう？」という、いわゆるネタ切れの状態がよくおきました。前の日のエントリーに注力し過ぎて、次の日に時間的余裕がない場合がそうです。

そういう訳で3年目から、とにかく思いついたネタは極力メモすることにしました。例えばカスタマイズ記事であれば、グダグダなタグまたはソースコードでもとりあえず本文に貼り付けておき、未公開状態のエントリーとして保存しておきます。
ダジャレも同じで、どんなくだらないものでも忘れないうちに書き留めておきます。

そうこうするうちに、ピンキリの内容ながらかなりの量の未公開エントリーが溜まりまして、ネタ切れで悩むというストレスからはほぼ解放されました。

また予めエントリーを書く時間がとれないことが分かっている時は、公開できる状態までエントリーをまとめて書き溜めておき、指定日投稿をしています。最大で5日分書いたこともあります。
飲み会等で、その日の晩はパソコンに向かう状態ではない、という時も事前にエントリーを書くようにしています。

タイムリー性が問われる記事についてはこのテクニックを適用できませんが、例えば日常の出来事などは、その日に起こったことをまとめて投稿せず、小出しにする手もあります。また投稿日をずらせば、後から投稿する分については推敲することが可能です。

今更ですが今年の3月頃、風邪をひいて39度の高熱で寝込んでいたことがありました。その時は事前の準備をしていなかったため、その時だけはさすがに参りました（それでもエントリーしましたが）。「備えあれば憂いなし」です。

３．マイナス要因はうまく対処する

楽しく続けているブログも、コメントやソーシャルブックマークに誹謗・中傷が起きると、正直凹みます。あるエントリーに対して100件がプラス評価でも、1件のマイナス評価で全てを覆しかねません。それが原因でエントリーする意欲がなくなってしまうのが一番良くないことです。
ちなみに、「アドバイス」的な内容はマイナス評価とは別物なので、その点は誤解なきようお願い致します。

対処法は、エントリーの内容にもよるので一意の解ではありませんが、仮にマイナスな評価が多数ではなく一部であれば、その評価に対して過敏に反応しない、あるいは大人の対応をすること。逆に多数の場合は記事の内容が誤っている可能性があるので、冷静に受け止め、相当の対応をすることが最善策と思います。

いずれにしても、そのことによるストレスはブログ上ではなく、リアルの世界でお酒でも飲んで発散しましょう。

またこういう時も、投稿するだけの状態になっているエントリーが用意されていれば「今日は書く気分にならない」という精神状態でも、表向きにブログは粛々と続けることができます。

Comments [2] | Trackbacks [0]

「最近のエントリー」に経過日数を表示する

May 28,2007 1:20 AM
Category：[最近のエントリー, 経過日数表示]
Tag：[Customize, Entry, MovableType]
Permalink

「最近のエントリー」の各エントリーの右側に「X日前」という経過日数をするカスタマイズです。

経過日数を表示したエントリーリスト

指定した経過日数を超えたエントリーに対し、任意のテキストをエントリーリスト横に表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。

動作はエントリーの投稿時間を span で予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算し、テキストに置き換えて表示するという仕組みです。

Windows2000/XPのIE6/7・Firefox2.0・Opera9.0で動作確認しています。また XHTML1.0 valid です。

なお、本カスタマイズは以前ご要望を頂いていたもので、公開が大変遅くなりましたこと、この場をお借りしてお詫び申しあげます。

１．テンプレートの修正

「最近のエントリー」にテキストを表示したいテンプレートに、span 要素（青色部分）を追加します。

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
      <ul class="module-list">
      <MTEntries lastn="10">
         <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
      </MTEntries>
      </ul>
      <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
      [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
   </div>
</div>

２．スクリプトの追加

１項と同じテンプレートについて、body 要素の終了タグの直前に、下記のスクリプトを追加します。

<script type="text/javascript">
//<![CDATA[
// passage day
var pass = 1;
 
// display content
var content = '日前';
  
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0, len = spans.length; len > i; i++) {
    if (spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now/24);
        if (-now > (pass - 1)) {
            spans[i].innerHTML = -now + content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

３．CSS設定

スタイルシートに下記の設定を追加します。

span.new {
    display: none;
    color: red;
}

最初の display プロパティで１項の要素に設定したタイムスタンプを非表示にします。その下の color プロパティは、「X日前」という文字が表示された場合に適用される設定です。

４．表示開始日数を変更する

表示開始日数を変更するには、

// passage time
var pass = 1;

の赤色部分の値を変更してください。

デフォルトの「1」は、投稿後1日経過分からのエントリーが表示対象となります。「10」にすると10日経過したものから表示対象になります。
数字は必ず半角文字で設定してください。

５．表示文字列を変更する

表示内容を変更するには、

// display content
var content = '日前';

の赤色部分を変更してください。

Comments [0] | Trackbacks [0]

検索結果画面のページ分割が正常に動作しない不具合を解消する

May 27,2007 1:23 AM
Category：[検索]
Tag：[MTPaginate, SearchResult, TroubleShooting]
Permalink

Movable Type では MTPaginate を利用して、各アーカイブをページ分割することが可能ですが、MTPaginate は検索結果画面のページ分割も可能です。

関連記事：検索結果ページのページ分割

ですが、デフォルトテンプレートの検索結果画面にある検索フォームから検索を実行した場合、その後のページ分割機能が有効にならない、というご質問を頂きました。ご本人は既にお分かりのようでしたが、折角なので情報展開しておきます。

１．問題

下記のような検索結果画面の状態から、ページ送りのリンク（赤枠部分）をクリックすると、

下のように、検索文字列が何も設定されていない状態で検索した結果画面になります。

２．対処方法

検索結果テンプレートの form の method 属性、

<form method="post" action="<$MTCGIPath$><$MTSearchScript$>" id="search-form">

を

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>" id="search-form">

に変更するだけです。これで正常にページ送りができるようになります。

なおメインページの検索フォームは get になっていますので、修正の必要はありません。

３．原因

フォームの method 属性が get の場合は、フォームデータを URL の後ろにクエリー（URLエンコードしたデータ）として送信します。つまり post になっていたため、ページ送り時に検索文字列やブログID等、必要な情報が全て欠落していた、というのがこの問題の原因です。

GET と POST については下記のページが参考になるでしょう。

フォームデータの送信

４．その他

ということで、GET メソッドを用いれば問題は解消しますが、フォームデータを URL として表示させたくない場合は post にしてください（ページ分割が機能しないとう制約が残りますが）。

また、Movable Type の検索はどちらの method 属性も対応しているということが分かりました。

Comments [0] | Trackbacks [0]

いつまで経っても

May 26,2007 12:22 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

慣れない

続きを読む ≫

Comments [0] | Trackbacks [0]

図解・トラックバック処理

May 25,2007 2:10 AM
Category：[blog]
Tag：[Trackback]
Permalink

「トラックバック」とは Web サイト間のピアツーピア通信/通知のためのフレームワークです。

技術仕様書「TrackBack Technical Specification（日本語訳）」

もう少し分かりやすく説明すると、

リンク元サイトに「このような記事からリンクを張った」という情報を通知する仕組み

です（これも分かりにくいですが）。
ちなみに「トラックバック Ping」とは「トラックバック Ping URL に対する HTTP POST リクエスト」です。

それはともかく、ブログを始めた時に最初に戸惑うのがこの「トラックバック」で、実際にトラックバック機能を利用して一番不思議に思われる事象が、

「エラーになったのに相手のブログにちゃんと送信されている」

ことではないでしょうか。

その結果、誤解してトラックバックを重複送信したり、Movable Type では送信失敗したトラックバックURLを再送信用に保存するため、それに気づかず記事を再保存すると、誤って送信するといったケースが絶えません。*1

このエントリーでは、そのようなケースを引き起こす原因を理解できるよう、トラックバックの動作について図解します。

１．トラックバック処理（正常）

ブログAからブログBにトラックバックを送信すると、ブログBはトラックバック受信処理を開始します。送信したブログAはタイマを起動して、ブログBからの完了通知を待ちます。
ブログBが受信処理を終えるとブログAに完了通知を送信します。ブログAがタイマ起動中に完了通知を受信するとタイマを解除し、ブログAは「トラックバックを正常に送信した」と判断します。

２．トラックバック処理（異常）

ブログAからブログBにトラックバックを送信して、何らかの原因でブログBにトラックバックが到達しなかった場合、ブログAが起動したタイマがタイムアウトし、その契機にブログAは「トラックバックを正常に送信できなかった」と判断します。このケースではブログBは何も受信していません。

３．トラックバック処理（準正常１）

このケースは、ブログAからブログBにトラックバックを送信して、１と同様にブログBでトラックバック受信処理を開始、完了通知を送信したにもかかわらず。何らかの原因でブログAに完了通知が到達しなかった場合です。
ブログAが起動したタイマがタイムアウトし、その契機にブログAは「トラックバックを正常に送信できなかった」と判断します。ただしこのケースでは、ブログAには「エラー」と見えるにも関わらずブログBはトラックバックを正常に受信しています。

４．トラックバック処理（準正常２）

３のケースとほぼ同じですが、ブログBの処理が遅延してブログAのタイムアウトにひっかかってしまう場合です。「エラーになったのに相手のブログに送信されている」というのは、このケースが一番多いのではないでしょうか。

その他、トラックバック先のファイルが見つからない、ブログBで受信してエラーレスポンスを返却した等のケースが考えられます。

なお説明では便宜上、「正常・異常・準正常」と分けていますが、個人的な解釈に基づいています。

*1：ただし自ブログで「トラックバック成功」と認識させるには、重複送信する手しかありません（ブログによって動作は異なるかもしれません）

Comments [0] | Trackbacks [0]

HighSlide JS と prototype.js の競合を解消する

May 24,2007 1:50 AM
Category：[JavaScript]
Tag：[Highslide, JavaScript]
Permalink

サムネイル画像を拡大させる HighSlide JS（関連記事「Highslide JS でサムネイル画像を拡大表示する」）には、

ブラウザのウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示）

という機能があり、この場合、拡大した画像の右下に最大化するアイコンが表示されます。

拡大した画像

このアイコンをクリックすると、ブラウザのウィンドウサイズに関わらず画像が最大化されます。最大化された画像は最大化前と同じようにドラッグや縮小することができます。

１．問題点

この最大化をすると別のページにジャンプをして元画像が表示されてしまうケースがあります。

２．原因

Highslide JS と prototype.js を同時に利用している場合、prototype.js が Array に対して拡張を行っているため、Highslide JS で使用している配列が汚染され、

for (var i in array) {
　　　　：
}

の処理で余計なものが含まれてしまうようです。
これが原因で最大化処理に不具合が発生します。

具体的には、highslide.js の下記の部分が汚染されている模様です。

// reposition overlays
for (x in this.overlays) {
	hs.purge(this.overlays[x]);
	this.overlays[x].parentNode.removeChild(this.overlays[x]);
}

３．対処方法

for 文を

for (var i = 0; i  < array.length; i++) {
　　　　：
}

に変更すると解消するらしいので、問題となる処理が含まれる関数のみをオーバーライドしてみました。

まず、下記の内容を丸コピーし、highslide-custom.js という名称で highslide.js と同じディレクトリに保存してください。

HsExpander.prototype.doFullExpand = function () {
    try {
        hs.purge(this.fullExpandIcon);
        this.fullExpandIcon.parentNode.removeChild(this.fullExpandIcon);
        this.focus();
        this.x.min = parseInt(this.wrapper.style.left) - (this.fullExpandWidth - this.content.width) / 2;
        if (this.x.min < hs.marginLeft) this.x.min = hs.marginLeft;        
        this.wrapper.style.left = this.x.min +'px';
        var borderOffset = this.wrapper.offsetWidth - this.content.width;        
        this.content.width = this.fullExpandWidth;
        this.content.height = this.fullExpandHeight;
        this.x.span = this.content.width;
        this.wrapper.style.width = (this.x.span + borderOffset) +'px';
        this.y.span = this.wrapper.offsetHeight - 2 * this.offsetBorderH;
        this.positionOutline(this.x.min, this.y.min, this.x.span, this.y.span);
        // reposition overlays
        for (x = 0; x < this.overlays.length; x++) {
            hs.purge(this.overlays[x]);
            this.overlays[x].parentNode.removeChild(this.overlays[x]);
        }        
        if (hs.showCredits) this.writeCredits();
        this.createCustomOverlays();
        this.redoShowHide();
    } catch (e) {
        window.location.href = hs.expanders[this.key].content.src;
    }
};

そして、ご利用のサーバにアップロードして、テンプレートに下記の青色の行を追加してください。

　　　　　　　　　　　：
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript" src="highslide/highslide-custom.js"></script>
　　　　　　　　　　　：

この1行は、元の highslide.js を読み込む script 要素の後に記述してください。
また、src 属性部分の記述は例ですので、ご利用になっている highslide を読み込んでいる script 要素の src 属性に合わせてしてください。
例は highslide というディレクトリ配下にある場合を想定しています。

４．注意事項

IE6/iE7 では2回目以降の拡大処理がスムーズに動作しない事象が確認されています（Firefox / Opera は OK）。
またこの対処はサンプルを作って実験したものですので、動作しない場合があるかもしれません。適正な対処方法がありましたらご教示ください。

Comments [2] | Trackbacks [1]

Movable Type でコメント投稿・トラックバックが重くなる事象を解消する

May 23,2007 9:35 PM
Category：[トラブルシューティング]
Tag：[Comment, MovableType, Trackback, TroubleShooting]
Permalink

Movable Type 3.2 / 3.3 で、コメント投稿および、トラックバック送信のレスポンスが遅くなる事象が発生しています。原因は、標準プラグイン「SpamLookup」がデフォルトで参照しているサーバーのひとつ、「opm.blitzed.org」が停止したためです。

Six Apart - Movable Type サポート: コメントの投稿が急に遅くなりました

標準プラグイン「SpamLookup」がデフォルトで参照しているサーバーのひとつ、「opm.blitzed.org」が停止したため、コメントの投稿の際、非常に長い時間がかかったり、タイムアウトとなる現象が発生しています。

具体的には、コメント投稿や、他のブログから Movable Type のブログにトラックバックを送信した際、このサーバに対し、受信したコメントやトラックバックがブラックリストに含まれているかどうか問い合わせるのですが、サーバーからの応答がない（アクセスできない）ため、処理遅延が発生し、結果的にコメント・トラックバック処理が遅延します。

上記の引用記事に修正方法が掲載されていますが、当サイトでも修正手順を下記に記しておきます。

修正手順

管理画面にログインして、右側にあるメニューより「プラグイン」をクリック。

プラグイン一覧の後方にある「SpamLookup - Lookups」の右側にある「設定を表示」をクリック。

設定画面に切り替わるので、一番上の「アドレスのチェック」欄の「ブラックリスト」に記載された「opm.blitzed.org」と、その前にあるカンマを削除。

削除するとこのようになります。

削除したら、少し下にある「変更を保存」をクリック。再構築する必要はありません。

以上です。なお、

ブログごとにSpamLookupの設定を変更している場合は、上記手順での修正がそれぞれのブログに反映されません。念のため、各ブログの「設定」>>「プラグイン」から、変更が反映されているかを確認してください。また、ブログの設定に変更が反映されていない場合には、各ブログについても上記手順での修正を行ってください。

とのことです。

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

検索結果のページ分割（3.3x 版）

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

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

３．ページ分割用タグを挿入

４．検索結果ヘッダおよび検索結果フッタ用タグを削除

５．検索結果ヘッダと検索結果フッタを移動

６．検索結果ヘッダと検索結果フッタに MTSearchResults を適用

７．検索結果ヘッダと検索結果フッタに Counter プラグインを適用

８．その他

BlognPlus（ぶろぐん+）スキン

１．動作確認環境

２．利用規定

３．カラムレイアウト変更方法

<body class="layout-three-column">

<body class="layout-three-column-liquid">

<body class="layout-two-column-left">

<body class="layout-two-column-liquid-left">

<body class="layout-two-column-right">

<body class="layout-two-column-liquid-right">

<body class="layout-one-column">

<body class="layout-one-column-liquid">

４．1カラムレイアウトについて

５．クレジットバナーについて

６．その他

７．テンプレート

ブログを続けるための3つのポイント

１．続けることに対する目標を作る

２．ネタはできるだけ溜めておく

３．マイナス要因はうまく対処する

「最近のエントリー」に経過日数を表示する

１．テンプレートの修正

２．スクリプトの追加

３．CSS設定

４．表示開始日数を変更する

５．表示文字列を変更する

検索結果画面のページ分割が正常に動作しない不具合を解消する

１．問題

２．対処方法

３．原因

４．その他

いつまで経っても

図解・トラックバック処理

１．トラックバック処理（正常）

２．トラックバック処理（異常）

３．トラックバック処理（準正常１）

４．トラックバック処理（準正常２）

HighSlide JS と prototype.js の競合を解消する

１．問題点

２．原因

３．対処方法

４．注意事項

Movable Type でコメント投稿・トラックバックが重くなる事象を解消する

修正手順