pukiwikiプラグイン/divregion

2021-09-19 (日) 08:55:38 (37d)
お名前:

表記、そんな感じのものを作ったので、一応公開しておきます。

プラグイン概要

pukiwiki 本家ページにある、他の方が作った 「region プラグイン」 (region.php.inc、endregion.php.inc)をもとに改造・ひねり出したプラグインです。
この既存プラグインが html的には table を利用して実現していたのに対して、本プラグインは div によって実現しています。
正直見た目対応です:table はいろいろとレイアウト問題がありますので。

pukiwiki Ver.1.4x系/1.5 系対応。
マルチライン引数には対応はしていません。

ver1.2 では「まとめて開く・閉じる」指定用のオプションを追加しました。
こちらの仕様は GamersWiki様(https://jpngamerswiki.com)の acプラグインを参考にいたしました。

インストール方法

  1. 本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダにおいてください。
  2. 使用しているスキンの cssファイルを編集し、以下のクラスを定義してください。
    • div.divregion 標準でのヘッダ行
    • div.divregion_contents 標準での本文部分
    • div.divregion_h1 h1指定時のヘッダ行
    • div.divregion_h2 h2指定時のヘッダ行
    • div.divregion_group 「まとめて開く/閉じる」ボタン用(全幅)
    • span.divregion_group 「まとめて開く/閉じる」ボタン用(クリックエリア)
      • 参考までに、本Wikiで使用している css記述は以下です。
        ▼CSS例
  3. 望むならば、さらに別タイプのスタイル指定を登録してもよいです。
    下記のようにxx、yy部分に任意名称(英数字のみ)を付けることで、そのカスタムスタイルを使用できます。
    • div.divregion_contents_xx 本文用のカスタムスタイル
      • これは後述の「cstyle:xx」パラメータ指定で利用できます。
    • div.divregion_yy ヘッダ用のカスタムスタイル
      • これは後述の「hstyle:yy」パラメータ指定で利用できます。
    • div.divregion_gloupe_zz 「まとめて閉じる/開く」用のカスタムスタイル
    • span.divregion_gloupe_zz 「まとめて閉じる/開く」用のカスタムスタイル
      • これは後述の「gstyle:zz」パラメータ指定で利用できます。

使い方

regionプラグイン同様に、divregion と enddivregion とで本文を挟み込むように記載します。

#divregion(タイトル)
本文
#enddivregion

上記記載により、以下のような表示となります。「タイトル」部分をクリックすることで、折り畳みが開閉されます。

▼タイトル

パラメータ

divregion には、以下のパラメータを使うことができます。

  • open, close
    • region プラグインにもあったもの。折り畳みの初期状態を指定することができます。
      省略は「close」と同じです。
  • h1,h2
    • タイトル部分に、別スタイルを適用できます。
    • 注意:このh1,h2 は今後廃止予定。次のhstyleを利用するようにしてください。
      「hstyle:h1」と書くと、「h1」指定と同じ意味になります。
  • hstyle:xx
    • タイトル行のスタイルを指定できます。
      指定されたxxを利用して「div.divregion_xx」のスタイルを適用します。

    • #divregion(タイトル,hstyle:h1)
      本文
      #enddivregion
      ▼タイトル
  • cstyle:xx
    • 本文用のスタイルを指定できます。
      指定されたxxを利用して「div.divregion_contents_xx」のスタイルを適用します。
  • color:#xxxxx, background-color:#xxxxxx
    • スタイルシート指定を無視して、タイトル部分の文字色/背景色を変更できる。
    • xxxxxは16進(0-9,A-F)指定。「Red」などの文字指定はできない。

    • #divregion(タイトル,color:#FF0000,background-color:#dddddd)
      本文
      #enddivregion
      ▼タイトル
  • content-color:#xxxxx, content-bgcolor:#xxxxxx
    • スタイルシート指定を無視して、本文部分の文字色/背景色を変更できる。
    • xxxxxは16進(0-9,A-F)指定。「Red」などの文字指定はできない。

    • #divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee)
      本文
      #enddivregion
      ▼タイトル
  • group
    • 「まとめて開く/閉じる」用のクリックエリアを設定します。
      これをクリックすると、これよりも後ろに置かれている divregion エリアがまとめて開く/閉じる動作をします。
      • これより後方に別の「group 指定行」がある場合、そこで開放処理は終わります。
      • このオプションがある場合、対となる#endregion は記述しないでください。
  • groupend
    • 「まとめて開く/閉じる」範囲を制御するための特別な指定方法です。
      このオプションを指定した場合、この行は利用者側には直接表示するものはありません。「タイトル」部分に記載した文字は意味をもちません。
      • このオプションがある場合、対となる#endregion は記述しないでください。
    • group/groupend 例
      #divregion(テスト用1,group)
      #divregion(対象1-1)
      対象1-1、本文
      #enddivregion
      #divregion(対象1-2)
      対象1-2、本文
      #enddivregion
      #divregion(テスト用2,group)
      #divregion(対象2-1)
      対象2-1、本文
      #enddivregion
      #divregion(対象2-2)
      対象2-2、本文
      #enddivregion
      #divregion(テスト用2の終端指定,groupend)
      #divregion(対象3)
      対象3、本文
      #enddivregion
      [テスト用1 ]をまとめて開く
      ▼対象1-1
      ▼対象1-2
      [テスト用2 ]をまとめて開く
      ▼対象2-1
      ▼対象2-2
      ▼対象3
  • gstyle:zz
    • 「まとめて開く」指定用のスタイルを指定できます。
      指定されたzzを利用して「div.divregion_contents_zz」および「span.divregion_contents_zz」のスタイルを適用します。
    • #divregion(h1スタイル,group,gstyle:h1)
      #divregion(対象1-1,hstyle:h2)
      対象1-1、本文
      #enddivregion
      #divregion(対象1-2,hstyle:h2)
      対象1-2、本文
      #enddivregion
      #divregion(h1スタイルの終端指定,groupend)
      [h1スタイル ]をまとめて開く
      ▼対象1-1
      ▼対象1-2

技術的な話。

このプラグインは、単純にいうと以下のようなHTMLを構築するものです。

  • divregion が生成するのは・・・
    <div class=divregion_closed> 
    ▼タイトル ←閉じたときのタイトル行。
    </div>
    <div class=divregion_opened> 
    ▲タイトル ←開いたときのタイトル行
    </div>
    <div class=divregion_content> 
    本文 ←本文
  • enddivregion が生成するのは・・・
    </div>

開閉は JavaScript で実施。
dicregion_closed がクリックされたら、 closed を非表示、opened と content を表示。
dicregion_opened がクリックされたら、 closed を表示、opened と content を非表示。

コメント

ご意見などがあれば。


お名前:

▼ver1.1でのコメント
▼ver1.0でのコメント