BlognPlus 用プルダウンメニュー化モジュール

長い期間ブログを書き続けていると、月別アーカイブが長くなりサイドバーの大きな位置を占めてしまいます。
プルダウンメニュー化する事でたった1行に収める事が出来、サイドバーのスペースを大幅に節約できます。

(左)通常のリスト表示の月別アーカイブ

(右)月別アーカイプをプルダウンメニューにすると、とてもコンパクトになります。

「index.php」を改造すれば同等の事を実現できますが、モジュール化して誰でも簡単に導入出来るようにしてみました。

モジュールの主な機能

縦に長くなりがちな月別アーカイブをプルダウンメニュー化できます。

プルダウンメニューからリンクを選択しページ移動後でも、選択したリンクの状態を維持する事が出来ます。

Ver1.21 からはカテゴリー一覧もプルダウンメニュー化出来るようになりました。

動作例

モジュールを導入する前に、どんな風に動作しているかご覧になりたい場合は、以下のサイトを参考にして下さい。

※ トラックバックをいただいたサイト様に無断でリンクさせていただいています。

動作環境

BlognPlus v2.2.4 〜 v.2.3.2(テキスト版およびMySQL版)で動作確認しています。PostgreSQL版での動作は未確認です。

プルダウンメニューでの移動は Javascript で実装しています。以下の環境で動作する報告があります。

ダウンロード

利用規約

  1. このモジュールの所有権は 「nJOY」管理人 CJ にあります。
  2. モジュールを使用して損害が生じても、「nJOY」管理人 CJ は一切の責任を負いかねます。
  3. モジュールの再配布・販売等は一切禁じます。
  4. 利用者個人の責任において改造は自由に行えます。
  5. スクリプト内にあるプログラム名・バージョン名・著作権表示を削除・変更する事は認めません。
  6. 当規約に同意された方のみ、このモジュールを無料で使う事が出来ます。
  7. もしよければ、あなたのブログに「nJOY BLOG」へのリンクをはってやってください。管理人が大変喜び、モジュール作成の励みになります。

プルダウンメニュー化モジュール」(pulldown.zip, 6kb)

インストール方法(BlognPlus v2.3.2 の場合)

  1. ダウンロードした圧縮ファイル(pulldown.zip)を解凍する
  2. 「pulldown」フォルダを BlognPlus ディレクトリ下の「module」にアップロード
  3. 「config.ini」のパーミッションを 666 等に変更する
  4. 管理画面から設定を変更する
  5. スキンファイルの任意の場所にタグを記述する

2. ディレクトリ構成

blognplus
   + module
      + pulldown
         - config.ini (設定ファイル)
         - control.php
         - function.php
         - index.html
         - info.php
         - pulldown.php
         - update.php

スキンファイルへの記述方法(月別)

基本的な使い方

以下のように記述する事で、プルダウンメニューが表示されます。
灰色の部分は好きなように変更可能。

  1. {PDM_AR}
  2. {PDM_ARLOOP}
  3. {PDM_ARLINK}{PDM_ARYM}Y年m月{/PDM_ARYM}({PDM_ARCOUNT}件){/PDM_ARLINK}
  4. {/PDM_ARLOOP}
  5. {/PDM_AR}

↓ 生成されるプルダウンメニューのソース

  1. <form name="pdm_arform" id="pdm_arform">
  2. <select name="pdm_arslct" id="pdm_arslct" onchange="location=this.value">
  3. <option selected="selected">月別アーカイブ</option>
  4. <option value="index.php?m=YYYYmm">YYYY年mm月(x件)</option>
  5. …(中略)…
  6. <option value="index.php?m=YYYYmm">YYYY年mm月(x件)</option>
  7. </select>
  8. </form>

おすすめな使い方

  1. <div class="linktitle">■ARCHIVES■</div>
  2. <div class="linktext">
  3. {AR}
  4. <ul>
  5. {ARLOOP}
  6. <li>{ARLINK}{ARYM}Y年m月{/ARYM}({ARCOUNT}件){/ARLINK}</li>
  7. {/ARLOOP}
  8. </ul>
  9. {/AR}
  10. </div>

を下記のように書き換える(赤文字部分を追加)。

  1. <div class="linktitle">■ARCHIVES■</div>
  2. <div class="linktext">
  3. {PDM_AR}
  4. {PDM_ARLOOP}
  5. {PDM_ARLINK}{PDM_ARYM}Y年m月{/PDM_ARYM}({PDM_ARCOUNT}件){/PDM_ARLINK}
  6. {/PDM_ARLOOP}
  7. {/PDM_AR}
  8. <noscript>
  9. {AR}
  10. <ul>
  11. {ARLOOP}
  12. <li>{ARLINK}{ARYM}Y年m月{/ARYM}({ARCOUNT}件){/ARLINK}</li>
  13. {/ARLOOP}
  14. </ul>
  15. {/AR}
  16. </noscript>
  17. </div>

※ Javascript をオフ、使えない環境を考慮して {AR}〜{/AR} を noscript タグで囲っています。

スキンファイルへの記述方法(カテゴリー別)

基本的な使い方

以下のように記述する事で、プルダウンメニューが表示されます。
灰色の部分は好きなように変更可能。

  1. {PDM_CA}
  2. {PDM_CALOOP1}
  3. {PDM_CALINK1}{PDM_CATITLE1} ({PDM_CACOUNT1}件){/PDM_CALINK1}
  4. {PDM_CALOOP2}
  5. {PDM_CALINK2} {PDM_CATITLE2} ({PDM_CACOUNT2}件){/PDM_CALINK2}
  6. {/PDM_CALOOP2}
  7. {/PDM_CALOOP1}
  8. {/PDM_CA}

↓ 生成されるプルダウンメニューのソース

  1. <form name="pdm_caform" id="pdm_caform">
  2. <select name="pdm_caslct" id="pdm_caslct" onchange="location=this.value">
  3. <option selected="selected">カテゴリー</option>
  4. <option value="index.php?c=A-">カテゴリーA(x件)</option>
  5. …(中略)…
  6. <option value="index.php?c=Z-">カテゴリーZ(x件)</option>
  7. </select>
  8. </form>

※ もし必要ないなら {PDM_CACOUNT1} と {PDM_CACOUNT2} は記述しなくても問題ありません。

おすすめな使い方

  1. <div class="linktitle">■CATEGORIES■</div>
  2. <div class="linktext">
  3. {CA}
  4. <ul>
  5. {CALOOP1}
  6. <li>{CALINK1}{CATITLE1} ({CACOUNT1}件){/CALINK1}</li>
  7. <ul>
  8. {CALOOP2}
  9. <li>{CALINK2}{CATITLE2} ({CACOUNT2}件){/CALINK2}</li>
  10. {/CALOOP2}
  11. </ul>
  12. {/CALOOP1}
  13. </ul>
  14. {/CA}
  15. </div>

を下記のように書き換える(赤文字部分を追加)。

  1. <div class="linktitle">■CATEGORIES■</div>
  2. <div class="linktext">
  3. {PDM_CA}
  4. {PDM_CALOOP1}
  5. {PDM_CALINK1}{PDM_CATITLE1} ({PDM_CACOUNT1}件){/PDM_CALINK1}
  6. {PDM_CALOOP2}
  7. {PDM_CALINK2}└ {PDM_CATITLE2} ({PDM_CACOUNT2}件){/PDM_CALINK2}
  8. {/PDM_CALOOP2}
  9. {/PDM_CALOOP1}
  10. {/PDM_CA}
  11. <noscript>
  12. {CA}
  13. <ul>
  14. {CALOOP1}
  15. <li>{CALINK1}{CATITLE1} ({CACOUNT1}件){/CALINK1}</li>
  16. <ul>
  17. {CALOOP2}
  18. <li>{CALINK2}{CATITLE2} ({CACOUNT2}件){/CALINK2}</li>
  19. {/CALOOP2}
  20. </ul>
  21. {/CALOOP1}
  22. </ul>
  23. {/CA}
  24. </noscript>
  25. </div>

※ Javascript をオフ、使えない環境を考慮して {CA}〜{/CA} を noscript タグで囲っています。

カスタマイズ

スタイルシートを適用する事で、プルダウンメニューの見た目を変更する事が出来ます。
nJOY BLOG」では下記のような記述をスキンの CSS ファイルに追加しています。

  1. #pdm_arslct, #pdm_caslct {
  2. color: #666;
  3. background-color: #ffffcc;
  4. width:125px;
  5. }

プルダウンメニューの select 要素に「pdm_arslct」(月別)、「pdm_caslct」(カテゴリー別)という ID がふってあるので、それに対して文字色(color)、背景色(background-color)、横幅(width)を設定しています。

管理画面

管理画面からメニューの最上段に表示される文字列(「表示文字列」)と、メニュー内に表示される件数(「表示件数」)を設定できます。

スイッチ

どちらか一方使わない場合、OFF にしておく事でサーバー負荷の削減につながります。

表示文字列

初期設定では『月別アーカイブ』『カテゴリー』となっています。
その他によく使われる文字列は『Monthly Archive』『月別バックナンバー』『月別ログ』『カテゴリー一覧』『Categories』などです。

表示件数(月別のみ)

無制限、または 1〜60件から選べます。


Ver1.10 から BlognPlus の「初期設定」の「月別記事一覧表示件数」とは別に、モジュール側で「表示件数」を指定するようにしました。

Javascript 無効の環境のために {AR}〜{/AR} と併用される場合、「月別記事一覧表示件数」を無制限にすると縦に長くなりすぎる場合があります。
『プルダウンメニューではたくさん表示したいけれど、Javascript 無効の場合にサイドバーが長くなるのを防止したい』という場合に「月別記事一覧表示件数」を12件など少なめに設定しましょう。

アップグレードの仕方

Ver1.10〜1.22 → 1.23

「config.ini」以外の全てのファイルを上書きアップロードしてください。
設定項目が増えているので、必ず管理画面から設定を見直してください。

Ver1.01 → 1.23

全てのファイルを上書きアップロードしてください。
Ver1.10 から新たに「config.ini」が追加されましたので、この設定ファイルのパーミッションを 666 等に変更し、管理画面から設定を見直してください。

バージョンアップ情報

2006/05/01
ver1.22 スイッチの動作がおかしかったのを修正
2006/04/23
ver1.22 月別アーカイブの表示件数の指定が無効になっていたのを修正
2006/04/17
ver1.21 スイッチ機能追加
2006/04/16
ver1.20 カテゴリー一覧のプルダウンメニュー実装
2006/02/19
ver1.10 管理画面から設定の変更が可能に
2006/02/18
ver1.02 アーカイブ一覧化モジュールに対応
2006/01/22
ver1.01 プルダウンメニューから選択したリンクの選択状態を維持可能に
2006/01/21
ver1.00 月別アーカイブのプルダウンメニュー実装

サイト作成のヒント集に戻る