2004年08月31日 (火)

iblogPatcher 用ナビゲーション項目

テンプレートシリーズが一巡しましたが、iblogPatcher のプラグインやその使用例にはナビゲーション項目にカスタマイズを加えて効果を発揮するものもあります。これの解説も今までは旧バージョン用のプラグインの公開や更新のときに随時解説したもののみの状態で情報が散在していて、探すのに苦労をおかけしていました。

そこで iblogPatcher に依存したナビゲーション項目のカスタマイズ例をここに集約してみます。

[追記 2004.09.02]Recent Entries を追加


ナビゲーション項目として掲載しますが、ナビゲーション項目としてしか使えないわけではありません。テンプレートに直接埋め込んでもよいです。また、オリジナルと変わらない項目については省略します。ここでも HaloScan を利用しているものとします。文言などは各自で工夫してください。
Calendar
このカスタマイズは必須扱いです。iBlog オリジナルの XHTML としての間違いの補正だからです。
[コンテンツ] の内容を次のようにしてください。
<div class="side">
  <div align="center" class="calendar">
    <script type="text/javascript" language="JavaScript">
      WriteCalendar();
    </script>
  </div>
</div>
実はこれは iblogPatcher を必要としません。同梱されている CommoLib.js を使うだけです。
Categories
このカスタマイズはオプションです。各カテゴリの右にエントリ数が表示されるようになります。
[コンテンツ] の内容を次のようにしてください。
<div class="side">
  <script type="text/javascript">WriteCategories();</script>
</div>
実はこれは iblogPatcher を必要としません。同梱されている CommoLib.js を使うだけです。
Archives
このカスタマイズはオプションです。月毎のエントリ一覧へのリンクとエントリ一覧のための条件指定フォームが表示できます。
[コンテンツ] の内容を次のようにしてください。
<div class="side">
  < a href="<$ArchivesLink$>">日付けによるアーカイブを参照</a>
  <hr noshade="noshade" size="1" width="50%" />
  月毎のエントリ一覧
  <div style="text-align: center;">
    <script type="text/javascript">
      BlogStartMonth = new Date({ブログ開始の年}, {ブログ開始の月}-1, {ブログ開始の日});
      WriteMonthryArchiveLinks(-1, '<$BlogBaseURL$>', true);
    </script>
  </div>
  <hr noshade="noshade" size="1" width="50%" />
  <div style="text-align: left;">
    <script type="text/javascript" src="<$BlogBaseURL$>ValidateListEntry.js"></script>
    <form action="<$BlogBaseURL$>ListEntry.html" method="get" onsubmit="return ValidateListEntryForm(this);" target="_blank">
      <script type="text/javascript">WriteCategorySelect();</script> の中の<br />
      <input type="text" name="FromDate" value="{ブログ開始の年}/{ブログ開始の月}/{ブログ開始の日}" size="10" maxlength="10" tabindex="1" accesskey="f" /> 以降<br />
      <input type="text" name="ToDate" value="2050/01/01" size="10" maxlength="10" tabindex="2" accesskey="t" /> より前の<br />
      <input type="text" name="NeedComment" value="0" size="2" maxlength="3" tabindex="3" accesskey="c" /> 個以上のコメント<br />
      <input type="text" name="NeedTrackback" value="0" size="2" maxlength="3" tabindex="4" accesskey="b" /> 個以上のトラックバックが<br />
      付いた記事の一覧を<input type="submit" value="表示する" tabindex="5" accesskey="d" />
    </form>
  </div>
</div>
ここで {ブログ開始の年}{ブログ開始の月}{ブログ開始の日} は各自のブログの開始年月日を入れてください。年は西暦4桁、月と日は二桁(一桁のときは前に 0 を付ける)です。また 2050/01/01 は適当な未来です。
この他にも月毎のエントリ一覧を指定月数分に限定する方法もあります。これについては「最近 N か月の月毎のエントリリスト」に書いてあります。
BlogDescription
このカスタマイズはオプションで、iBlog オリジナルにはありません。iBlog による blog の設定で入力した blog の説明文を入れることができます。
[見出し] の内容を次のようにしてください。
<div class=" sidetitle">
  <$BlogName$> について
</div>
[コンテンツ] の内容を次のようにしてください。
<div class="side">
  <!-- BEGIN BlogDescription --><$BlogDescription$><!-- END BlogDescription -->
</div>
この <!-- BEGIN BlogDescription -->, <!-- END BlogDescription --> で囲むのは <$BlogDescription$> に & < " > が含まれた場合でも iBlog は実体参照にしないので、iblogPatcher のプラグインが代わりに実体参照にするために付けます。このような実体参照にしなければならない文字が含まれていない場合はとくに iblogPatcher が必要というわけではありません。
Recent Comments
このカスタマイズはオプションで、iBlog オリジナルにはありません。くきさんPiyoFeeds など RSS を JavaScript に変換するサービスを利用して最近のコメントを最大 10 件まで表示した上で、そのコメントが付いたエントリのリンクを添えることができます。もともと iblogPatcher に依存した技ではないのですが、コードの書き方に iblogPatcher のプラグイン(とブログ定義ファイルでの設定)の機能を利用しています。
[見出し] の内容を次のようにしてください。
<div class=" sidetitle">
  最近のコメント
</div>
[コンテンツ] の内容を次のようにしてください。
<div class="side">
  <div id="RecentComments">
    {サービスで指定されたコード}
  </div>
  <noscript>
    これも JavaScript で実装しています。<br />
    各エントリの Comment と表示されたリンクからコメントをご覧ください。<br />
  </noscript>
  <script type="text/javascript" src="<$BlogBaseURL$>CommentList.js" charset="Shift_JIS"></script>
  <script type="text/javascript">
    ReplaceCommentLinks('RecentComments', '[$DocuemntRoot$]');
  </script>
</div>
この例では CommentList.js を blog のトップのフォルダに置いた場合としています。CommentList.js の基本情報は「エントリへのリンク付き最近の HaloScan コメント」をご覧下さい。この例での書き方で iblogPatcher に依存しているのは[$DocuemntRoot$]だけですが、ブログ定義ファイルへの伏線です。
Recent Entries
このカスタマイズはオプションで、iBlog オリジナルにはありません。エントリの日時順で新しいエントリを指定数表示することができます。
[見出し] の内容を次のようにしてください。
<div class=" sidetitle">
  最近のエントリ
</div>
[コンテンツ] の内容を次のようにしてください。
<div class="side">
  <script type="text/javascript">
    recent_entries_path = '<$BlogBaseURL$>';
  </script>
  <script type="text/javascript" src="<$BlogBaseURL$>recent_entries.js"></script>
  <noscript>
    <em>JavaScript が有効でないと表示できません</em>
  </noscript>
</div>

a タグの < と a の間にスペースを入れています。実際には取り除いてください。また $DocumentRoot$ を囲む [ ] は全角にしてあります。実際には半角にしてください。

Posted: 15:14    | Comment | Trackback


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