Web

DokuWiki Wrapプラグインの使い方

投稿日:

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。

1. DokuWiki の Wrapプラグインとは?

Wrapプラグイン を、一言で表現すると「文字の装飾機能を提供するプラグイン」です。Wiki というシステム自体と文字の装飾とは特に関係がないため、DokuWiki のデフォルト状態だと効果的な装飾機能がついていません。そこを補うかのように存在しているのが、Wrapプラグインです。

このプラグインがやっていることは、主に以下の2つです。

  1. Wiki の文書編集中に、記述した文字列を <WRAP></WRAP> で囲む。
    • このタグに指定する属性によって、様々なHTMLが出力される。
    • <WRAP> 以外にもいくつか専用のタグが用意されている。
  2. 文書保存時、この <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"
  • セットしたいCSSクラスを記述しますが、先頭に “wrap_” が追加されて出力されます。
  • 複数指定する場合は、スペースで区切ります。
#id id属性 #baz id="baz"
  • セットしたい id属性値を記述します。
width 30%
420px
20em
style="width: 30%;"
  • セットしたい 幅を記述します。
  • 単位には、%, px, em などが使えます。
: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> と書いた場合、foobar は CSSクラスとして扱われますが、Wrapプラグインが予め用意されたクラス名を指定することで、いろいろな装飾を行うことができます。

ここでは主なものを挙げていきます。

※ 詳細は、ja:plugin:wrap [DokuWiki]plugin:wrap [Demo Wiki] を参照してください。

ツールバーの利用

ツールバーのアイコンから適用できるクラスもあります。

Wrapプラグインが提供するボタン(ツールバー)
Wrapプラグインが提供するボタン(ツールバー)

基本的な文字の強調など

文字の強調

記述 結果
<wrap em>...</wrap> Hello!

文字のハイライト

記述 結果
<wrap hi>...</wrap> Hello!

小文字

記述 結果
<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プラグインの活用は必須といっても良いでしょう。
少しずつ慣れていきましょう。

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Web

Chrome で SameSite=None に関する Cookieについての警告が表示される

Chrome で SameSite=None に関する Cookieについての警告が表示される理由について説明します。

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介? (日刊スポーツ) – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …

Web Vitals

LCP を意識した Highlight.js の読み込み方

LCP を意識した Highlight.js の読み込み方について説明します。