文字列や段落に対し、枠を付ける、文字色を変える、右寄せにする、などの整形を行うプラグイン。見やすいページを作る上では助かる。
入手はplugin:wrapまたはja:plugin: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.
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; }