2004年08月26日 (木)

iblogPatcher 用カスタマイズ済みテンプレート(BlogPage.txt)

iblogPatcher を 1.3 にバージョンアップさせてからそのための解説をほとんど書いていませんでした。このため新規に導入をされる方、新たな blog を立ち上げる方、テンプレートの大幅な改造をする方などにはわかりにくい状況になっていました。

私の労力をあまり使わずに少しでも緩和しようと「僕は見ていた」で使用しているテンプレートセット、スタイルシート、ブログ定義ファイルの実例を同梱していますが、これはかなり iBlog オリジナルから離れたカスタマイズをしているので、ブログ定義ファイル以外は参考程度にしかなっていませんでした。

これを解消するために何回かに分けて iblogPatcher 用にカスタマイズされたテンプレート(デザインはオリジナルと同じ)を掲載していきます。最後にこれらのためのブログ定義ファイルも掲載します。このとおりにやればよいようになります。

今日はその第一回。BlogPage.txt です。

[追記 2004.08.27]解説を加えました。
[追記 2004.08.28]テンプレートから環境依存を排除しました。
[追記 2004.08.29]<$LinkRev$> を <$LinkMade$> に改めました。

今日は第一回目なので全体に渡った説明を述べておきます。
  • 元にするテンプレートセットは ValidRightNavigation です。
    iblogPatcher をダウンロードした方ならご存知だと思いますが、これは iBlog オリジナルの RightNavigation に含まれる間違いを修正したものです。これを更に iblogPatcher をほぼフル活用するように変更したものを掲載していきます。
    LeftNavigation 系はナビゲーションエリアを囲む td 要素とメインコンテンツを囲む td 要素の順序を逆にしただけなので LeftNavigation 系が欲しい方はご自分で入れ替えてください。
  • HaloScan の利用を前提
    一応このブログは .Mac がテーマなので「CGI 抜きでもここまでできるんだ!」ということに執念を燃やしています。(^o^)
  • 次のプラグインは使用しません。
    各プラグインについては iblogPatcher の中の Plugins.txt をご覧下さい。
    CHANGE_ENCODE.plugin
    デフォルトの文字コードにしておいたほうが処理が速く終わりますし、私が Web 系では UTF-8 が好きなので。
    ADD_DATE.plugin
    iBlog では BlogPage や CategoryPage における日付を見出しとし、同じ日のエントリ達はその見出しで代表されるセクションのサブセクション達という文書構成になっています。
    このシリーズではオリジナルのデザインを変更しないので、この文書構成を正しく維持すべきだと考えています。
    この他にも iblogPatcher に参考として付属しているプラグインやエントリの書き方にのみ作用するプラグインなどもここでは使用しません。
  • Valid なだけでなくアクセシビリティも考慮に
    Valid なテンプレートである上になるべくアクセシビリティにも考慮したテンプレートを掲載していきます。
  • 全くの未検証
    何か間違いがあったらコメントなどでフィードバックをお願いします。
    自分だけにとっては全く無意味なので、下を見てお分かりのように各自で書き換える箇所があり、それを書き換えて試すのも面倒なのです。このテンプレートを作るところまでで勘弁してください。
$DocumentRoot$ を囲む [ ] は全角にしてあります。半角に置き換えてください。また a タグの < と a の間にスペースを入れています。このスペースは取り除いてください。強調された黄色い部分が iblogPatcher に依存した部分です。各所の解説は後述します。 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP" xml:lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="<$MetaKeywords$>" />
    <meta name="description" content="<$BlogDescription$>" />
    <meta name="author" content="<$MetaAuthor$>" />
    <meta name="copyright" content="<$MetaCopyright$>" />
    <link rel="contents" href="<$BlogBaseURL$>archive.html" />
    <link rel="start" href="<$BlogBaseURL$>index.html" />
    <link rel="alternate" type="application/rss+xml" title="RSS 0.92" href="［$DocumentRoot$］/rss.xml" />
    <link rel="stylesheet" href="<$BlogBaseURL$>styles-site.css" type="text/css" />
    <link rev="made" href="mailto:<$LinkMade$>" />
    <script language="JavaScript1.2" src="<$BlogBaseURL$>CommonLib.js" type="text/javascript"></script>
    <$AuthenticationLink$>
    <title><$BlogName$></title>
    <script type="text/javascript" src="unyo.js"></script>
    <script type="text/javascript">
      ShowString = '続きを表示&gt;&gt;';
      HideString = '&lt;&lt;続きを隠す';
    </script>
    <script type="text/javascript" src="http://www.haloscan.com/load.php?user=<$HaloScanID$>"> </script>
  </head>
  <body>
    <div id="banner">
      <h3><script language="JavaScript1.2" type="text/javascript">getBlogName();</script></h3>
      <noscript>
        <em>このサイトでは JavaScript を利用しています。コンテンツを意図通りにご覧になるためには JavaScript が使用できるブラウザで JavaScript 機能を有効にしてご覧下さい。</em>
      </noscript>
    </div>
    <table border="0" cellpadding="1" cellspacing="0" summary="Navigation Bar - Main Contents">
      <tr>
        <!-- Main content -->
        <td valign="top" width="<$ContentAreaWidth$>%">
          <div id="container">
            <div class="blog">
              <ForEachEntry>
              <h2 class="date"><!-- BEGIN EntryPostDate --><$EntryPostDate$><!-- END EntryPostDate --></h2>
              <div class="blogbody">
                <h3 class="title"><$CategoryImage$> < a id="<$EntryUUID$>" name="<$EntryUUID$>"><$EntryTitle$></a></h3><br />
                <$EntryAbstractOrBody$><br />
                <ReadMoreLink>
                <script type="text/javascript">
                  WriteUnyo('<$EntryUUID$>');
                </script>
                <!-- WriteUnyo End -->
                </ReadMoreLink>
                <EntryTimestamp>Posted at <!-- BEGIN EntryTimestamp --><$EntryTimestamp$><!-- END EntryTimestamp -->&nbsp;</EntryTimestamp>
                < a href="<$EntryCategoryUUID$>/index.html"><script language="JavaScript1.2" type="text/javascript">getCategoryName("<$EntryCategoryUUID$>");</script></a>&nbsp;
                <ReadMoreLink>< a href="<$EntryCategoryUUID$>/<$EntryUUID$>/index.html">Read More<span style="display: none">(<$EntryUUID$>)</span></a>&nbsp;</ReadMoreLink>
                <$EmailFeedback$>&nbsp;
                | < a href="http://www.haloscan.com/comments/<$HaloScanID$>/<$EntryUUID$>" title="Thread <$EntryUUID$>" onclick="HaloScan('<$EntryUUID$>'); return false;" onkeypress="HaloScan('<$EntryUUID$>'); return false;"><script type="text/javascript">postCount('<$EntryUUID$>');</script></a>
                <noscript>
                  < a href="http://www.haloscan.com/comments/<$HaloScanID$>/<$EntryUUID$>" title="Thread <$EntryUUID$>" target="Comment">Comments</a>
                </noscript>&nbsp;
                | < a href="http://www.haloscan.com/tb/<$HaloScanID$>/<$EntryUUID$>" title="Trackbacks for <$EntryUUID$>" onclick="HaloScanTB('<$EntryUUID$>'); return false;" onkeypress="HaloScanTB('<$EntryUUID$>'); return false;"><script type="text/javascript">postCountTB('<$EntryUUID$>');</script></a>
                <noscript>
                  < a href="http://www.haloscan.com/tb/<$HaloScanID$>/<$EntryUUID$>" title="Trackback for <$EntryUUID$>" target="Trackback">Trackbacks</a>
                </noscript>&nbsp;
              </div>
              </ForEachEntry>
            </div>
          </div>
        </td>
        <!-- Navigation bar -->
        <td valign="top" width="<$NavigationAreaWidth$>%">
          <div id="links">
            <$NavigationItems$>
            <div class="sidetitle">
              Statistics
            </div>
            <div class="side">
              Total entries in this blog: <script language="JavaScript1.2" type="text/javascript">getBlogEntriesCount();</script><br />
              <script language="JavaScript1.2" type="text/javascript">getCategoryStatistics();</script><br />
              Published On: <!-- BEGIN PublishDate --><$PublishDate$><!-- END PublishDate -->
            </div>
            <div class="powered">
              < a href="http://homepage.mac.com/yuji_okamura/iblog/DotMac/Tips/C1592201073/E1898506484/index.html" title="iblogPatcher-1.3.1">iblogPatcher</a><br />
              Powered by<br />
              < a href="http://www.lifli.com/Products/iBlog/main.htm">iBlog</a>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <div class="footer">
      <hr noshade="noshade" size="1" />
      <div align="center">
        &#169; <script language="JavaScript1.2" type="text/javascript">getUsername();</script>
      </div>
    </div>
  </body>
</html>
<$MetaKeywords$>
MY_REPLACE.plugin を用いた独自 REPLACE <$MetaKeywords$> です。ブログ定義ファイルでこれの値を設定します。(sample に例がある)
テンプレートに直接書いてもよいのですが、ブログ定義ファイルで値を設定しておいて <$MetaKeywords$> をテンプレートに用いることで、異なるブログ間で共通のテンプレートを用いやすくなります。
MY_REPLACE.plugin のためのブログ定義ファイルの設定については「独自 REPLACE を定義するプラグイン」をご覧下さい。
<$MetaAuthor$>
MY_REPLACE.plugin を用いた独自 REPLACE <$MetaAuthor$> です。ブログ定義ファイルでこれの値を設定します。
テンプレートに直接書いてもよいのですが、ブログ定義ファイルで値を設定しておいて <$MetaAuthor$> をテンプレートに用いることで、異なるブログ間で共通のテンプレートを用いやすくなります。
MY_REPLACE.plugin のためのブログ定義ファイルの設定については「独自 REPLACE を定義するプラグイン」をご覧下さい。
<$MetaCopyright$>
MY_REPLACE.plugin を用いた独自 REPLACE <$MetaCopyright$> です。ブログ定義ファイルでこれの値を設定します。
テンプレートに直接書いてもよいのですが、ブログ定義ファイルで値を設定しておいて <$MetaCopyright$> をテンプレートに用いることで、異なるブログ間で共通のテンプレートを用いやすくなります。
MY_REPLACE.plugin のためのブログ定義ファイルの設定については「独自 REPLACE を定義するプラグイン」をご覧下さい。
［$DocumentRoot$］
[ ] を全角にして書いてます。実際には半角にしてください。
MY_REPLACE.plugin を用いた独自 REPLACE ［$DocumentRoot$］です。これは本来 FeedPage.txt で使用可能な REPLACE ですが、ブログ定義ファイルでこれの値を設定します。(sample に例がある)
こうすることで次のメリットが生まれます。
  • どこでも使用できるようになる。
  • RSS のリンク切れを防止できる。
    publish after の処理でリンク切れは解消されますが、publish after を忘れたり、しないことにしていたりしたときに有効です。
  • エントリへのリンクを書くときに公開場所に依存しないで書ける。
    エントリの中に同じブログの他のエントリへのリンクを付けたりするときに ［$DocumentRoot$］/{カテゴリUUID}/{エントリUUID}/index.html と書けば公開場所が変更になっても、ブログ定義ファイルの中で［$DocumentRoot$］の値を書き換えるだけでリンク先の変更ができます。
ただし、エントリの中で本当に［$DocumentRoot$］と書きたいときでも置き換えられてしまいます。私のように全角を混ぜたりして防止しなければなりません。
MY_REPLACE.plugin のためのブログ定義ファイルの設定については「独自 REPLACE を定義するプラグイン」をご覧下さい。
<$LinkMade$>
MY_REPLACE.plugin を用いた独自 REPLACE <$LinkMade$> です。ブログ定義ファイルでこれの値を設定します。
テンプレートに直接書いてもよいのですが、ブログ定義ファイルで値を設定しておいて <$LinkMade$> をテンプレートに用いることで、異なるブログ間で共通のテンプレートを用いやすくなります。
MY_REPLACE.plugin のためのブログ定義ファイルの設定については「独自 REPLACE を定義するプラグイン」をご覧下さい。
<script type="text/javascript" src="unyo.js"></script>
「うにょうにょ Read More」のための JavaScript をロードしているところです。
<script type="text/javascript"
  ShowString = '続きを表示&gt;&gt;';
  HideString = '&lt;&lt;続きを隠す';
</script>
「うにょうにょ Read More」のための設定をしているところです。詳しいことは「新プラグインを加えて完全版?うにょうにょ Read More 提供開始(2/2)」をご覧下さい。
<$HaloScanID$>
MY_REPLACE.plugin を用いた独自 REPLACE <$HaloScanID$> です。ブログ定義ファイルでこれの値を設定します。
テンプレートに直接書いてもよいのですが、ブログ定義ファイルで値を設定しておいて <$HaloScanID$> をテンプレートに用いることで、異なるブログ間で共通のテンプレートを用いやすくなります。
MY_REPLACE.plugin のためのブログ定義ファイルの設定については「独自 REPLACE を定義するプラグイン」をご覧下さい。
<!-- BEGIN EntryPostDate -->, <!-- END EntryPostDate -->
日付の書式を変更するための ReformatDateTime.plugin の設定です。このコメントで囲まれた <$EntryPostDate$> が書式変更対象です。
Mac OS X 10.3 以上をご利用の方は ReformatDateTime.plugin をエディタで開いて 44 行目の 'panther' => 0, を 'panther' => 1, に書き換えてください。
ReformatDateTime.plugin デフォルトから書式を変えたい方は ReformatDateTime.plugin をエディタで開いてみてください。コメントになってサンプルが書いてあります。
< a id="<$EntryUUID$>" name="<$EntryUUID$>">, </a>
< と a の間のスペースを取り去って使用してください。
「うにょうにょ Read More」のために BlogPage で表示されているエントリを列挙するのに BLOGPAGE_ACTION.plugin が使用します。
<ReadMoreLink>
<script type="text/javascript">
  WriteUnyo('<$EntryUUID$>');
</script> <!-- WriteUnyo End -->
</ReadMoreLink>
「うにょうにょ Read More」のコードです。「続きを表示」とか「続きを隠す」が書き込まれる部分です。
<!-- WriteUnyo End --> は UNYO_DISABLE.plugin のためのものです。UNYO_DISABLE.plugin については Junさん の旧ブログのエントリ「 うにょうにょ機能をエントリー毎にコントロールするプラグイン」をご覧下さい。
<!-- BEGIN EntryTimestamp -->, <!-- END EntryTimestamp -->
時刻の書式を変更するための ReformatDateTime.plugin の設定です。このコメントで囲まれた <$EntryTimestamp$> が書式変更対象です。
Mac OS X 10.3 以上をご利用の方は ReformatDateTime.plugin をエディタで開いて 44 行目の 'panther' => 0, を 'panther' => 1, に書き換えてください。
ReformatDateTime.plugin デフォルトから書式を変えたい方は ReformatDateTime.plugin をエディタで開いてみてください。コメントになってサンプルが書いてあります。
<!-- BEGIN PublishDate -->, <!-- END PublishDate -->
日時の書式を変更するための ReformatDateTime.plugin の設定です。このコメントで囲まれた <$PublishDate$> が書式変更対象です。
Mac OS X 10.3 以上をご利用の方は ReformatDateTime.plugin をエディタで開いて 44 行目の 'panther' => 0, を 'panther' => 1, に書き換えてください。
ReformatDateTime.plugin デフォルトから書式を変えたい方は ReformatDateTime.plugin をエディタで開いてみてください。コメントになってサンプルが書いてあります。

Posted: 20:13    | Comment | Trackback

以下、類似エントリです。

CacheUpIt

iblogPatcher

Weblog Commenting and Trackback by HaloScan.com

iBlog

Copyright © 2003-2006 OKAMURA Yuji, All rights reserved.