pukiwikiプラグイン/divregion

2018-03-16 (金) 17:11:54 (578d)
お名前:

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

プラグイン概要

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

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

インストール方法

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

使い方

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
      ▼タイトル

技術的な話。

このプラグインは、単純にいうと以下のような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.0でのコメント
お名前: