%%**）を **''div''** を作成し、段落・リスト・テーブル等を包み込む**"大きな"**容器として使用します。
"small" content
or
"small" content
or
"small" content
下の例では **%%
%%**（あるいは **%%%%** や **%%%%**）を **''span''** を作成し、段落・リスト・テーブル等を包み込む**"小さな"**容器として使用します。
:!: Please note, some things **won't work with spans**: **alignments** (including alignments generated by changing the text direction), **multi-columns** and **widths** if the according wrap isn't floated as well.
==== 例 ====
プラグインにはサンプルページが付属しています。
このページは多くの例を解説し、デフォルトテンプレート上では次のようになります（下記参照）。
==== クラス ====
現在以下のクラスが使用できます：
{{ plugin:wrap_plugin_example6.png?300&direct}}
^クラス名^説明／注釈^
^__columns__ -- 類似プラグイン [[plugin:columns|columns]], [[plugin:side_note|side_note]], [[plugin:styler|styler]], [[plugin:tip|tip]]^^
|**''column''** | LTR 言語では ''left'' と同じ。RTL 言語では ''right'' と同じ。|
|**''left''** | ''column'' と同じで、容器を左寄せします。 |
|**''right''** | 容器を右寄せします。 |
|**''center''** | 容器を水平方向の真ん中寄せします。 |
|**''col2''**..**''col5''** | 文字情報を多段組み（２段～５段）で表示します。新しいブラウザ (Firefox, Chrome, Safari) でしか機能しません。 |
^__widths__ -- :!: **実験扱い** 期待通りに動作しない可能性あり。モバイル対応を含む。^^
|**''half''** | 一行二列に適合。二個組みで使用すべき。 |
|**''third''** | 一行三列に適合。三個組みで使用すべき。 |
|**''quarter''** | 一行四列に適合。四個組みで使用すべき。 |
^__alignments__ -- 類似プラグイン [[plugin:divalign|divalign]], [[plugin:columns|columns]], [[plugin:styler|styler]] -- :!: span では機能しない！^^
|**''leftalign''** | 文字情報を左揃えします。 |
|**''rightalign''** | 文字情報を右揃えします。 |
|**''centeralign''** | 文字情報を中央揃します。 |
|**''justify''** | 文字情報を両端揃えします。 |
^__boxes and notes__ -- 類似プラグイン [[plugin:box|box]], [[plugin:note|note]], [[plugin:tip|tip]]^^
|**''box''** | 容器の周囲に枠を作成（''style.ini'' の色を使用する） |
|**''info''** （最初のバージョンでは ''information''）| 情報アイコン付きの青色の枠を作成 |
|**''important''** | 重要アイコン付きのオレンジ色の枠を作成 |
|**''alert''** （:!: 以前のバージョンでは ''warning''）| 警告アイコン付きの赤色の枠を作成 |
|**''tip''** | ヒントアイコン付きの黄色の枠を作成 |
|**''help''** | ヘルプアイコン付きの紫色の枠を作成 |
|**''todo''** | TODOアイコン付きのシアン色の枠を作成 |
|**''download''** | ダウンロードアイコン付きの緑色の枠を作成 |
|**''round''** | 背景色か縁取りのある全ての容器に角丸を与える（新しいブラウザしか有効になりません。例：IE 以外） |
|**''danger''** | 赤色の危険メモを作成 |
|**''warning''** | オレンジ色の警告メモを作成 |
|**''caution''** | 黄色の注意メモを作成 |
|**''notice''** | 青色の注記メモを作成 |
|**''safety''** | 緑色の安全メモを作成 |
^__marks__ -- 類似プラグイン [[plugin:emphasis|emphasis]], [[plugin:important_paragraf|important_paragraf]], [[plugin:importanttext|importanttext]]^^
|**''hi''** | marks text as highlighted |
|**''lo''** | marks text as less significant |
|**''em''** | marks text as especially emphasised |
^__miscellaneous__^^
|**''clear''** | 類似プラグイン [[plugin:clearfloat|clearfloat]]。div 要素（例えば、大文字の ''%%%%''）と一緒に使用する必要がある。 |
|**''tabs''** | if wrapped around a list of links, will show those as tabs |
|**''hide''** | CSS による文字情報の非表示（文字情報はソースコード内や古いブラウザには表示され、検索可能です） |
|**''noprint''** | 文字情報を画面上は表示、印刷上は非表示。類似プラグイン [[plugin:noprint|noprint]] |
|**''onlyprint''** | 文字情報を印刷上は表示、画面上は非表示 |
|**''pagebreak''** | 印刷時に強制改ページ（画面上は非表示）。類似プラグイン [[plugin:pagebreak|pagebreak]] |
|**''nopagebreak''** | 印刷時に改ページを回避（画面上は非表示） |
|**''spoiler''** | 強調表示した時だけ現れるように、白色背景上に白色で文字情報を表示。類似プラグイン [[plugin:hide|hide]] |
|**''indent''** | 文字情報をインデント。[[plugin:tab|tab]] の代わりに使用可能 |
|**''outdent''** | 文字情報をレベル上げ。[[plugin:outdent|outdent]] の代わりに使用可能 |
|**''prewrap''** | フォーマットされたコードブロック内で、文字情報を折り返す。類似プラグイン [[plugin:wpre|wpre]] |
段組や枠の中のテーブルは常に 100% 幅です。これはテーブルの位置や大きさを決定できることを意味します。
[[plugin:tablewidth|tablewidth プラグイン]]を部分的に代替可能です。
=== 既知の制約事項 ===
* ODT 形式ではエクスポートされません。
* 角丸は新しいブラウザでしか動きません（IE8 以前以外）。
* 多段組みは新しいブラウザでしか動きません（IE9 以前以外）。
* Width クラスは実験的で新しいブラウザでしか動きません（IE8 以前以外）。
* 通常の DokuWiki の見出しは動作しないおそらく動作するが、プラグイン構文の中にあるのは実験扱いで予期しない結果を発生させるかもしれません。回避策として、column、box、note の中で以下の二種類の2つのエミュレートされた見出しを使用できます。：
* %%//**__下線付き大見出し__**//%% （安全メモ上では少し異なった外観です）
* %%//**小見出し**//%%
テンプレートによっては、幾つかのクラスを調整する必要があります。
暗いテーマや重い色のテーマな場合、''hi'' ''lo'' ''em'' クラスは特に必要です。
クラスは簡単に調整・拡張可能です。すべての要望を受け入れます。
==== 幅 ====
全ての大文字 %%%% 容器で有効幅を設定できます： ''%, px, em, ex, pt, pc, cm, mm, in''。クラスの前・後・中の幅を設定します：例）
...
また ''half'', ''third'', ''quarter'' という幅のキーワードも利用できます。
しかしまだ**実験扱い**で、期待通りに動作しないこともあります。
例えば、
...
...
は横二列になりますが、小さな画面やモバイル機器では下に折り返されます。
==== 言語と文章の向き ====
以下のように、言語コードに続けてコロンを追加するだけで、容器の中の言語と文章の向きを変更できます：
This text is explicitly marked as English.
文章の向き（''rtl'' 右から左、''ltr'' 左から右）は、自動的に挿入され、完全に言語に依存します。現在サポートしている言語のリストは次から取得しています：http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code
デフォルトとは異なる方向で文書情報を表示したい場合、div 要素（大文字の ''%%%%''）を使う必要があります。そうしないと文章の向きは変更されません。
これは[[plugin:ltr|ltr プラグイン]]や[[plugin:lang|lang プラグイン]]の良い代替になります。
===== デモ =====
このプラグインのデモは[[http://demo.selfthinker.org/plugin:wrap|demo.selfthinker.org]]にあります。
[[http://russianrandonneur.ru/help/wrap|ロシア語のサンプル（デモ）]]（2011-05-15 バージョン用）。
[[http://pastebin.com/C9xjaEH9|ソース]]。
===== custom styles による拡張 =====
プラグインに独自のクラスや style を追加したい場合、"''wrap_''" を前置した自分のクラスの style を [[devel:css#user styles|user styles]] に追加できます。
例）''%%%%'' が必要な場合、''conf/userstyle.css'' ファイルを編集（ない場合は作成）し、style 定義と共に ''.wrap_myclass{}'' を追加します。
（必要があれば以下のファイルを編集します。
* 印刷表示のための ''conf/userprint.css''((Anteaterの場合は ''conf/printstyle.css'')) ファイル
* RTL 言語のための ''conf/userrtl.css''((Anteaterの場合は ''conf/rtlstyle.css'')) ファイル
* すべての style のための ''conf/userall.css''((Anteaterの場合は ''conf/allstyle.css'')) ファイル）
全ての使用ファイルに対するアクセス権は、オリジナルの DokuWiki のファイルと同じにする必要があります。
バージョン 2010-03-14 以降、"wrap_" を前置した特定のクラス名を除外することも可能です。
設定管理において、"noPrefix" という設定オプションの中にカンマ区切りのクラス名リストを追加するだけです。
===== 特定のクラスの許可・禁止 =====
バージョン 2013-03-24 以降、特定のクラスの許可・禁止が可能です。
設定管理の設定項目："restrictedClasses" にクラス一覧を追加し、 "restrictionType" で許可か禁止かを決定するだけです。
==== 例 ====
style.css 内
.dokuwiki div.wrap_note{ /* added */
background-color: #eee;
color: #000;
padding: .5em .5em .5em .5em;
margin-bottom: 1em;
overflow: hidden;
}
Dokuwiki ページ内：
...
==== 旧タイポグラフィクラスの追加 ====
旧タイポグラフィクラスは 2011-05-15 バージョンで削除されました。
類似の機能が必要な場合、代わりに [[plugin:block|block プラグイン]]を使って下さい。
又は、自分の style を使って、（[[#custom styles による拡張|custom styles による拡張]] を参考に）自分の style にコピーすることができます。
===== ヘルパーコンポーネントの使い方 =====
（プラグイン開発者向け情報）
2011-05-15 バージョンから、他のプラグインにクラスや幅、言語／文章の向きを追加できるヘルパープラグインを含んでいます。
==== 一種類の属性を取得する例 ====
// get lang from wrap helper plugin
$lang = '';
if(!plugin_isdisabled('wrap')) {
$wrap =& plugin_load('helper', 'wrap');
$attr = $wrap->getAttributes($data);
if($attr['dir']) $lang = ' lang="'.$attr['lang'].'" xml:lang="'.$attr['lang'].'" dir="'.$attr['dir'].'"';
}
// add lang to your plugin's output
$renderer->doc .= '';
getAttributes() は "classes #id width :language" を持った文字列を想定します。
以下の配列を返します。
* $attr['class']: CSS クラス
* $attr['id']: CSS ID
* $attr['width']: 幅
* $attr['lang'] and $attr['dir']: 言語と文章の向き
==== 全属性を取得する例 ====
// get attributes from wrap helper plugin
$attr = '';
if(!plugin_isdisabled('wrap')) {
$wrap =& plugin_load('helper', 'wrap');
$attr = $wrap->buildAttributes($data, 'additionalClass');
}
// add those attributes to your plugin's output
$renderer->doc .= '';
buildAttributes() 上記と同じ "classes #id width :language" を持った文字列と、プラグインが最良する必要のある独自の CSS クラスを持っている場合、追加のクラスを設定するオプション文字列を想定します。
HTMLに用意された全ての属性と文字列を返します。
===== 作業 =====
==== 完了 ====
[[https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom|{{http://img529.imageshack.us/img529/5725/feedm.png?16x16 |Wrap プラグインの最近のコミット（RSS feed）}}]]
{{rss>https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom date}}
==== 予定 ====
* [[plugin:odt|ODT]] のサポート
* 更に・・・
==== 地域化 ====
各言語に翻訳し、[[http://translate.dokuwiki.org/plugin/wrap|言語ファイルを更新して下さい]]。
翻訳すべき２つのファイルがあります：
* [[https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/lang.php|lang/en/lang.php]] ツールバーのボタンイメージを説明するタイトルです。
* [[https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/lang.php|lang/en/settings.php]] （今は一個しかないですが）管理設定項目です。
===== 謝辞 =====
* [[plugin:box|box プラグイン]]の一部を再利用しています。[[chris@jalakai.co.uk|Christopher Smith]] に感謝します。
* [[http://schollidesign.deviantart.com/art/Human-O2-Iconset-105344123|Human-O2 icon set]] からメモの画像を戴きました。
* [[http://www.famfamfam.com/lab/icons/silk/|Silk Icon Set]] と [[http://www.damieng.com/icons/silkcompanion|Silk Companion Icon Set]] からツールバーの画像を戴きました。
* すべての[[https://github.com/selfthinker/dokuwiki_plugin_wrap/contributors|貢献者]]に感謝します。
===== 議論 =====
すべての問題（バグや要求）を報告する前に、[[ja:faq:pluginproblems|プラグインの問題に関する FAQ]]を確認して下さい。
[[https://github.com/selfthinker/dokuwiki_plugin_wrap/issues|問題追跡]]上か独立した[[plugin:wrap:discussion|議論]]ページ上のどちらかに、すべての問題を報告できます。