Wrapプラグイン

文字列や段落に対し、枠を付ける、文字色を変える、右寄せにする、などの整形を行うプラグイン。見やすいページを作る上では助かる。

記法

<WRAP></WRAP>、<block></block>、<div></div>のいずれかで囲うと段落(div要素)、
<wrap></wrap>、<inline></inline>、<span></span>のいずれかで囲うと文字列(span要素)。

さらにオプションをスペース区切りで追加していく。オプションの内容は上記の配布先に解説がある。

<WRAP box 80% centeralign round>
This is a wrap plugin test.
It is <wrap em>the truth</wrap> that I just wanted to tell you clearly.
</WRAP>

This is a wrap plugin test. It is the truth that I just wanted to tell you clearly.

cssの追加、画像の変更

Dokuwikiのプラグインマネージャが進化し、Web画面からプラグインを更新するのが楽になったため、相対的に、wrapプラグインの中身をいじってカスタマイズするコストが上昇した。(手動更新でいじったファイルを上書きしないようにするか、自動更新後、毎回書き換える必要がある)

cssはプラグインの外にあり自動更新されないので有効だが、noteプラグインの一部機能移植などは、素直にnoteプラグインもインストールしてしまった方がよい。

wrapプラグインは、note, boxなどのプラグインの実質的な上位互換である。設定を細かくできる分だけ簡便さは失われるが。

Dokuwikiの仕様として、有効になっているプラグインのスクリプトやスタイルシートは、そのページでは使わないものであっても全て読み込まれる。積み重なればページの表示速度に関わってくるため、できれば機能のかぶるプラグインは1つに絞りたい。

個人的に、alertやimportantやtipなどのボックスに表示されるアイコンはwrapプラグインよりnoteプラグインの方が可愛くて好きである。また、wrapプラグインのボックスはmin-heightが68pxと少々高めで、1行だけ書きたいのに…という場合でも縦にスペースを消費してしまう。これらの見た目にまつわる点ではnoteプラグインの方に軍配が上がるので、noteプラグインのアイコンやスタイルをwrapプラグインに移植することにする。

まずはimageフォルダの中を入れ替える。

これがalert

これがimportant

これがtip

また、“note”というオプションで、メモ書きであることを示すボックススタイルを追加する。アイコンはnoteプラグインを流用。

これがnote

注意:ファイルの上書きをすると、セーフモードが有効のサーバではアップデートに問題が生じる。 ⇒インストールとアップデート

オプションを追加するには、conf/userstyle.cssを作成・編集する。wrapプラグインのcssを編集してもよいが、将来的にアップデートがあると上書きされ変更点は失われるため、一般論としては別ファイルに分けた方がよい。ただ、設定項目は元のcssと重複する部分が多く、アップデートも頻繁には行わないということであれば、元のcssを編集した方がすっきりする面もある。

/*____________ wrap plugin ____________*/

/* general styles for all note divs */
.dokuwiki div.wrap_info, .dokuwiki div.wrap_important, .dokuwiki div.wrap_alert, .dokuwiki div.wrap_tip, .dokuwiki div.wrap_help, .dokuwiki div.wrap_todo, .dokuwiki div.wrap_download, .dokuwiki div.wrap_note {
    padding: 1em 1em .5em 70px;
    margin-bottom: 1.5em;
    min-height: 48px;/* 元の68pxから変更 */
    background-position: 10px 50%;
    background-repeat: no-repeat;
    color: #000;
    overflow: hidden;
}
/* special treatment for IE6 */
* html .dokuwiki div.wrap_info, * html .dokuwiki div.wrap_important, * html .dokuwiki div.wrap_alert, * html .dokuwiki div.wrap_tip, * html .dokuwiki div.wrap_help, * html .dokuwiki div.wrap_todo, * html .dokuwiki div.wrap_download, * html .dokuwiki div.wrap_note {
    height: 48px;/* 元の68pxから変更 */
    overflow: visible;
}
/* general styles for all note spans */
.dokuwiki span.wrap_note {
    padding: 0 2px 0 20px;
    min-height: 20px;
    background-position: 2px 50%;
    background-repeat: no-repeat;
    color: #000;
}
/* special treatment for IE6 */
* html .dokuwiki span.wrap_note {
    height: 20px;
}

/*____________ note ____________*/
.dokuwiki .wrap_note { background-color: #eef; }
.dokuwiki div.wrap_note { background-image: url(lib/plugins/wrap/images/note/48/note.png); }
.dokuwiki span.wrap_note { background-image: url(lib/plugins/wrap/images/note/16/note.png); }

/* divの中の文字は、少しだけ小さくする */
.dokuwiki div.wrap_info p, .dokuwiki div.wrap_important p, .dokuwiki div.wrap_alert p, .dokuwiki div.wrap_tip p, .dokuwiki div.wrap_help p, .dokuwiki div.wrap_todo p, .dokuwiki div.wrap_download p, .dokuwiki div.wrap_note p {
	font-size: 13px;
	letter-spacing:0;
}

Dokuwiki, Dokuwiki plugin, wrap, css

目次

Wrapプラグイン

記法

cssの追加、画像の変更