ラボラジアン 
DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。
目次
1. DokuWiki の Wrapプラグインとは？
Wrapプラグイン を、一言で表現すると「文字の装飾機能を提供するプラグイン」です。Wiki というシステム自体と文字の装飾とは特に関係がないため、DokuWiki のデフォルト状態だと効果的な装飾機能がついていません。そこを補うかのように存在しているのが、Wrapプラグインです。
このプラグインがやっていることは、主に以下の２つです。
- Wiki の文書編集中に、記述した文字列を
<WRAP>と</WRAP>で囲む。- このタグに指定する属性によって、様々なHTMLが出力される。
<WRAP>以外にもいくつか専用のタグが用意されている。
- 文書保存時、この
<WRAP>タグに指定した属性値に対応する HTMLタグに変換する。
DokuWiki で HTML を書こうと思うと、<html>…</html> で囲まなければいけませんが、Wrapプラグインを使えばその必要はありません。この時点でもう便利です。
<WRAP> タグでは、class 属性を指定することもできるため、自分専用のCSSクラスを conf/userstyle.css などに記述しておけば、自由に自分用の CSSクラスを適用することができます。
しかしそんなことをしなくても、Wrapプラグイン自体にかなり多くの CSSクラスが用意されているため、これらを使うだけでも十分便利です。用意されている装飾を使うのであれば、専用のタグや属性が用意されていますし、ツールバーのアイコンクリックで挿入することもできます。
2. 基本的な使い方
<div> タグと<span> タグ
以下の 2つのHTMLタグを出力させることができます。
<div>タグ<span>タグ
<div>タグに変換される書き方
<WRAP>…</WRAP> と書くと、<div>…</div> に変換されます。<block>…</block> や <div>…</div> と書いても同様です。
<span>タグに変換される書き方
<wrap>…</wrap> と書くと、<span>…</span> に変換されます。<inline>…</inline> や <span>…</span> と書いても同様です。
属性の指定
<WRAP>タグや <wrap>タグには、以下のように classes, #id, width, :language と書くことで属性を指定することができます。
<WRAP classes #id width :language>
何らかの文字列
</WRAP>
それぞれの記述について表にまとめました。
| 上記内の箇所 | 属性 | 記述例 | 出力例 | 説明 |
|---|---|---|---|---|
classes |
CSSクラス | foo bar |
class="wrap_foo wrap_bar" |
|
#id |
id属性 | #baz |
id="baz" |
|
width |
幅 |
30%420px20em
|
style="width: 30%;" |
|
:language |
言語 | :ja |
lang="ja" xml:lang="ja" dir="ltr" |
|
例えば、以下のように書くと、
<WRAP foo bar #baz 30% :ja>
何らかの文字列
</WRAP>
出力はこうなります。
<div class="wrap_foo wrap_bar plugin_wrap"
id="baz" style="width: 30%;"
lang="ja" xml:lang="ja" dir="ltr">
<p>何らかの文字列</p>
</div>
3. 用意されているクラスを利用する
上で説明した通り、<WRAP foo bar> と書いた場合、foo と bar は CSSクラスとして扱われますが、Wrapプラグインが予め用意されたクラス名を指定することで、いろいろな装飾を行うことができます。
ここでは主なものを挙げていきます。
※ 詳細は、ja:plugin:wrap [DokuWiki] や plugin:wrap [Demo Wiki] を参照してください。
ツールバーの利用
ツールバーのアイコンから適用できるクラスもあります。
基本的な文字の強調など
文字の強調
| 記述 | 結果 |
|---|---|
<wrap em>...</wrap> |
Hello! |
文字のハイライト
| 記述 | 結果 |
|---|---|
<wrap hi>...</wrap> |
小文字
| 記述 | 結果 |
|---|---|
<wrap lo>...</wrap> |
Hello! |
ボックスメッセージ (Boxes)
| 種類 | 記述 | 結果 |
|---|---|---|
| Info | <WRAP info>...</WRAP> |
|
| Tip | <WRAP tip>...</WRAP> |
|
| Important | <WRAP important>...</WRAP> |
|
| Alert | <WRAP alert>...</WRAP> |
|
| Help | <WRAP help>...</WRAP> |
|
| Download | <WRAP download>...</WRAP> |
|
| Todo | <WRAP todo>...</WRAP> |
|
| 種類 | 記述 | 結果 |
|---|---|---|
| Info | <wrap info>...</wrap> |
|
| Tip | <wrap tip>...</wrap> |
|
| Important | <wrap important>...</wrap> |
|
| Alert | <wrap alert>...</wrap> |
|
| Help | <wrap help>...</wrap> |
|
| Download | <wrap download>...</wrap> |
|
| Todo | <wrap todo>...</wrap> |
|
アラートメッセージ (Notes)
| 種類 | 記述 | 結果 |
|---|---|---|
| Danger | <WRAP danger>...</WRAP> |
|
| Warning | <WRAP warning>...</WRAP> |
|
| Caution | <WRAP caution>...</WRAP> |
|
| Notice | <WRAP notice>...</WRAP> |
|
| Safety | <WRAP safety>...</WRAP> |
|
| 種類 | 記述 | 結果 |
|---|---|---|
| Danger | <wrap danger>...</wrap> |
|
| Warning | <wrap warning>...</wrap> |
|
| Caution | <wrap caution>...</wrap> |
|
| Notice | <wrap notice>...</wrap> |
|
| Safety | <wrap safety>...</wrap> |
|
マルチカラムレイアウト
固定２カラム
<WRAP col2>
左の列
</WRAP>
<WRAP col2>
右の列
</WRAP>
固定３カラム
<WRAP col3>
左の列
</WRAP>
<WRAP col3>
真ん中の列
</WRAP>
<WRAP col3>
右の列
</WRAP>
レスポンシブルなマルチカラムレイアウト
レスポンシブル２カラム
<WRAP half column>
左の列
</WRAP>
<WRAP half column>
右の列
</WRAP>
レスポンシブル3カラム
<WRAP third column>
左の列
</WRAP>
<WRAP third column>
真ん中の列
</WRAP>
<WRAP third column>
右の列
</WRAP>
4. おわりに
DokuWiki を使う上で、Wrapプラグインの活用は必須といっても良いでしょう。
少しずつ慣れていきましょう。
