DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。
目次
1. DokuWiki の Wrapプラグインとは?
Wrapプラグイン を、一言で表現すると「文字の装飾機能を提供するプラグイン」です。Wiki というシステム自体と文字の装飾とは特に関係がないため、DokuWiki のデフォルト状態だと効果的な装飾機能がついていません。そこを補うかのように存在しているのが、Wrapプラグインです。
このプラグインがやっていることは、主に以下の2つです。
- 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% 420px 20em
|
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> |
|
マルチカラムレイアウト
固定2カラム
<WRAP col2>
左の列
</WRAP>
<WRAP col2>
右の列
</WRAP>
固定3カラム
<WRAP col3>
左の列
</WRAP>
<WRAP col3>
真ん中の列
</WRAP>
<WRAP col3>
右の列
</WRAP>
レスポンシブルなマルチカラムレイアウト
レスポンシブル2カラム
<WRAP half column>
左の列
</WRAP>
<WRAP half column>
右の列
</WRAP>
レスポンシブル3カラム
<WRAP third column>
左の列
</WRAP>
<WRAP third column>
真ん中の列
</WRAP>
<WRAP third column>
右の列
</WRAP>
4. おわりに
DokuWiki を使う上で、Wrapプラグインの活用は必須といっても良いでしょう。
少しずつ慣れていきましょう。