−目次
Wrapプラグイン
文字列や段落に対し、枠を付ける、文字色を変える、右寄せにする、などの整形を行うプラグイン。見やすいページを作る上では助かる。
入手は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.
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を編集した方がすっきりする面もある。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/*____________ 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 ; } |