Wiki記法

当Wikiで用いる事が出来るマークアップ記法の一覧です。

当サイトでは、サイトの軽量化とセキュリティ面を第一に考えて、HTMLやPHP等の埋め込みは出来ない様に設定されています。

プラグインも必要最低限の物だけしか使用していない為、少々使い辛いと感じる事もあるかと思いますが、出来るだけ使いやすい様にカスタマイズを行っております。

基本的な整形記法は編集画面のツールバーのボタンからもご利用する事が出来ますのでご利用下さい。(随時ボタンを制作して増やしています。)

基本は、決められた数の半角の記号、又は半角英数字で作られたショートコードで文字を挟む事で、その文字を装飾する事が出来る仕組みになっております。

文字の装飾の際、記号やショートコードの閉じ忘れをしてしまいますと、その後の文字が全てそのスタイルで反映されてしまう等バグが発生してしまいますのでご注意下さいませ。

文字を太くするには、アスタリスクを2つ**文字**で挟みます。

私は**りょう**です

文字を斜めにするには、半角スラッシュを2つ//文字//で挟みます。

こちらは半角のアルファベットと数字にしか効果がありません。

私は//Ryo//です。

文字に下線を引くには、アンダーバー(アンダースコア)を2つ__文字__で挟みます。

私は__りょう__です。

文字を反転させ選択して、編集画面にあるツールバーでツールボタンの一番右側にある を押し、 を押すと、その文字が<wrap hi>と</wrap>で挟まられ、文字の背景を薄い黄色にする事も可能です。
(このショートコードでは自動で文字は太くなりません。)

直接<wrap hi>文字</wrap>と入れて変更をする事も勿論可能です。

私は<wrap hi>りょう</wrap>です。

文字に二重の下線を引くには、<mk=black>文字</mk=black>というショートコードで挟みます。
このショートコードを使用した際は、その文字は自動的に太文字になる様に設定されてます。

二重の下線は、赤、青、黄、緑と4色の色に変更する事が出来、<mk=black>文字</mk=black>のblackの部分を変更して<mk=red>文字</mk=red>で赤、<mk=blue>文字</mk=blue>で青、<mk=yellow>文字</mk=yellow>で黄色、<mk=green>文字</mk=green>で緑、になります。

二重の下線を引いたまま、文字サイズを変更する事も出来、その場合は先程のショートコードに-big(文字サイズ大)、-sobig(文字サイズ特大)、を付け加え、<mk=red-big>文字</mk=red-big>とする事で変更されます。

私は<mk=black>りょう</mk=black>です。
 
私は<mk=black-big>りょう</mk=black-big>です。
 
私は<mk=black-sobig>りょう</mk=black-sobig>です。

私は<mk=red>りょう</mk=red>です。
 
私は<mk=red-big>りょう</mk=red-big>です。
 
私は<mk=red-sobig>りょう</mk=red-sobig>です。

私は<mk=blue>りょう</mk=blue>です。
 
私は<mk=blue-big>りょう</mk=blue-big>です。
 
私は<mk=blue-sobig>りょう</mk=blue-sobig>です。

私は<mk=yellow>りょう</mk=yellow>です。
 
私は<mk=yellow-big>りょう</mk=yellow-big>です。
 
私は<mk=yellow-sobig>りょう</mk=yellow-sobig>です。

私は<mk=green>りょう</mk=green>です。
 
私は<mk=green-big>りょう</mk=green-big>です。
 
私は<mk=green-sobig>りょう</mk=green-sobig>です。

文字にマーカー風に下線を引くには、<mk-red>文字</mk-red>(この場合、赤になります。)というショートコードで挟みます。
このショートコードを使用した際は、その文字は自動的に太文字になる様に設定されてます。

マーカーの色は、赤、青、黄、緑と4色あり、<mk-red>文字</mk-red>のredの部分を変更する事で<mk-blue>文字</mk-blue>で青、<mk-yellow>文字</mk-yellow>で黄色、<mk-green>文字</mk-green>で緑に変更する事が出来ます。

マーカー風に下線を引いたまま、文字サイズを変更する事も出来、その場合は先程のショートコードに-big(文字サイズ大)、-sobig(文字サイズ特大)、と付け加え、<mk-red-big>文字</mk-red-big>とする事で変更されます。

私は<mk-red>りょう</mk-red>です。
 
私は<mk-red-big>りょう</mk-red-big>です。
 
私は<mk-red-sobig>りょう</mk-red-sobig>です。

私は<mk-blue>りょう</mk-blue>です。
 
私は<mk-blue-big>りょう</mk-blue-big>です。
 
私は<mk-blue-sobig>りょう</mk-blue-sobig>です。

私は<mk-yellow>りょう</mk-yellow>です。
 
私は<mk-yellow-big>りょう</mk-yellow-big>です。
 
私は<mk-yellow-sobig>りょう</mk-yellow-sobig>です。

私は<mk-green>りょう</mk-green>です。
 
私は<mk-green-big>りょう</mk-green-big>です。
 
私は<mk-green-sobig>りょう</mk-green-sobig>です。

文字に取り消し線を入れるには<del>文字</del>というショートコードで挟みます。

<del>はHTMLのコードの一種ですが、これはショートコードとして起動しているだけですので、<s>や<strike>というHTMLのコードでは反映はされません。

私は<del>りょう</del>です。

打消し線を赤い線にしたい場合には、<del-red> と </del-red>で挟みます。

私は<del-red>りょう</del-red>です。

文字に枠を付けたい場合には、シングルクォーテーション(アポストロフィ)を2つ文字で挟みます。

使うのは点が1つの'が2つで、決して点が2つのダブルクォーテーション"が1つなのではありませんのでお気を付け下さい。

文字枠に指定した文字は、自動的に太文字になる様になっています。

私は''りょう''です。

文字枠をボタン風にしたい場合には<waku> と </waku>というショートコードで挟みます。

ボタン風に指定した文字は、自動的に太文字になる様になっております。

私は<waku>りょう</waku>です。

あまり使う事は無いと思うのですが、通常の文字よりも上部や下部に文字を寄せる上付き文字と下付き文字も使えます。

こちらはHTMLのタグをそのまま使いますが、他のHTMLタグが使えるという訳ではありません。

上付き文字は<sup> と </sup>というショートコードで挟み、下付き文字は<sub> と </sub>というショートコードで挟みます。

私は<sup>りょう</sup>です。
 
私は<sub>りょう</sub>です。

文字の色は赤(red)、青(blue)、紫(purple)、白(white)、文字のサイズは小(mini)、大(big)、特大(sobig)へと変更する事が出来ます。

色の名前をタグとして赤文字にしたい場合には<red> と </red>というショートコードで挟みます。
他の色も同様です。

文字のサイズはmini、big、sobigの名前を使用し、小さくしたい場合には<mini> と </mini>というショートコードで挟みます。

色とサイズどちらも変更したい場合には、色の名前とサイズの名前をハイフン(半角のマイナス記号)-で繋げた文字でタグを作り、青い文字色で大きい文字サイズにしたい場合には<blue-big>文字</blue-big>という様に挟みます。

※タグの閉じ忘れ防止の為に閉じタグの名前もタグ名と同じ物にしていますが、色とサイズの変更に関する閉じタグは全て</f>でも代用が可能です。

文字の色やサイズを変えると、その文字は自動的に太文字になる様になっております。

私は<mini>りょう</mini>です。
 
私はりょうです。
 
私は<big>りょう</big>です。
 
私は<sobig>りょう</sobig>です。

私は<red-mini>りょう</red-mini>です。
 
私は<red>りょう</red>です。
 
私は<red-big>りょう</red-big>です。
 
私は<red-sobig>りょう</red-sobig>です。

私は<blue-mini>りょう</blue-mini>です。
 
私は<blue>りょう</blue>です。
 
私は<blue-big>りょう</blue-big>です。
 
私は<blue-sobig>りょう</blue-sobig>です。

私は<purple-mini>りょう</purple-mini>です。
 
私は<purple>りょう</purple>です。
 
私は<purple-big>りょう</purple-big>です。
 
私は<purple-sobig>りょう</purple-sobig>です。

私は<white-mini>りょう</white-mini>です。
 
私は<white>りょう</white>です。
 
私は<white-big>りょう</white-big>です。
 
私は<white-sobig>りょう</white-sobig>です。

文字を反転させ選択し、ツールボタンの一番右側にある を押して を押すと強調色(真っ赤で太い目立つ文字)、 を押すと非強調色(色が薄く字も細くて小さめな控え目文字)を選択する事が可能です。

私は<wrap em>りょう</wrap>です。
 
私は<wrap lo>りょう</wrap>です。

太文字で取り消し線を入れたい等、複数の装飾を混合させたい場合には、決められた数の記号で**<del>文字</del>**と、サンドイッチする様に挟むと全てが反映されます。

この様に文字を挟む時は、**<del>文字**</del>交互にズラしてしまうとエラーが起きてしまいますので気を付けて下さい。

私は**<del>りょう</del>**です。

読みやすい記事を作る為には改行や段落を使い、項目をリスト化をしたり画像を挿入したりと色々と工夫が必要となります。

DokuWikiでは、それらを表示するのも簡単に行う事が出来ます。

見出しにしたい場合にはその言葉を決められた数の半角イコール=で挟みます。

h1の場合にはイコールを6つ ====== タイトル ====== 、h2の場合にはイコールを5つ ===== タイトル ===== という感じで、h3は4つ、h4は3つ、h5は2つ、と挟む事で、h5までその文字を見出しに設定する事が出来ます。

h1の見出しは、その記事のタイトルとして指定されます。
その為、必ず一番初めの文章で使用をして下さい。

後h1は、1つの記事で1回だけしか使えないという決まりがありますので、複数回使用をしてはいけません。

普段はh2をメインの見出しにし、h2の子要素をh3で表記するという使い方をするのが決まっています。

余程の事が無い限りは、使用をする見出しはh4までとし、h2から突然h4へ飛んだり、h5の中にh2を入れるという様な順序を無視した使い方もしてはいけない決まりとなっておりますのでお気を付け下さい。

後、見出しはブロック要素の為、カラムの中に入れたりは絶対にしないで下さい。
バグが起きる可能性があります。

それと逆で、見出しの中に別のブロック要素を入れるという事もバグが起きる可能性がありますので絶対にしないで下さい。

====== 第一見出し ======
イコール6個です。
 
===== 第二見出し =====
イコール5個です。
 
==== 第三見出し ====
イコール4個です。
 
=== 第四見出し ===
イコール3個です。
 
== 第五見出し ==
イコール2個です。

見出しを使用すると自動で目次が生成されます。

目次はh1からh3までの見出しがタイトルとして作られるのですが、もし目次を設置したくない場合には記事の一番上(h1よりも上)に~~NOTOC~~と記入して下さい。
自動形成を止める事が出来ます。

文章で段落を付けたい時には、文章が終わった後にEnter(改行)を二回行い、文の下に一行だけ空白行を作る事で段落を作る事が出来ます。

こんにちわ。
 
私はりょうです。

文章で段落ではなく改行だけ行いたい時には、改行したい所でバックスラッシュ(半角の円マーク) \ を2つ入れた後にEnter(改行)を押して改行をするか、その後に半角スペースを入れます。

ですが、文章の区切りを付けるのに改行を行う事は非推奨とされている為、出来る限りは段落を使用する様にして下さい。

改行記号の後に\\
行も改行しました。
 
改行記号+スペースで\\ 一行で収まります。

ハイフンを4つ----続けて入力すると、水平線を入れる事が出来ます。(その行の前後に文字を入れる事は出来ません)

便利な機能なのですが、この水平線は原因が分からないのですがしょっちゅうバグが起きてしまいます⋯。

そんな時には----ではなく、[hr]と入力してみて下さい。
こちらでしたらバグる事が無く表示がされると思います。

[hr-ten]と入力をすると、点線の水平線を入力をする事が出来ます。

水平線を入力する際は、水平線の上下に段落を作るとバグが発生しなくなります。

普通の水平線(細め)です。
 
----
 
少し太めの水平線です。
 
[hr]
 
点線の水平線です。
 
[hr-ten]

リンクを貼りたい時には、角括弧2つ[[文字]]で挟むと、その文字がそのままリンクへと変わります。

メールアドレスを山括弧<info@smule.wiki>で挟むと、自動的にメールアドレスとして認識されます。

私は[[りょう]]です。
 
<info@smule.wiki>

ですが、上記のままですとりょうという文字がそのままURLになってしまいます。

URLでは日本語や特殊文字を使用した場合にはバグが発生する原因になる為、半角の英数字を使用する様にして下さい。

英数字も小文字しか使用してはいけないと決まりがあるのですが、半角英数字で大文字位したら大文字を使用したとしても自動的に小文字に変換がされる為問題はありません。

[[start|リンク]]の様に、半角の縦線記号|で区切りを付け、左側に当ページ内へのリンクならば(内部リンクといいます)https://smule.wiki/までを省略したURL(ページ名)を入れる事で、そのページ名が既存の場合(文字が青色に変わります。)にはそのページへのリンクが貼れ、そのページが存在しない場合(文字が赤く変わり、赤い点線の下線が付きます。)はそのページを新規に作る事が出来ます。(新規ページを作成するにはmanager以上の権限が必要です。)

ページ内でのセクション(見出しの文字等)にリンクを貼る事も可能です。

その場合には半角ハッシュ#を使用し、その後に文字を入れます。

[[#太文字|見出しへジャンプ]]

当ページ以外へのリンク以外ならば(外部リンクといいます)https://を省略する事は出来ません。

ですが、Wikipediaにリンクする時には[[wp>WikipediaのページのURL]]、DokuWikiにリンクする時には[[doku>DokuWikiのページURL]]

左側がURL、右側がリンクとなる文字、という事になるのですが、内部リンクの場合には先頭にコロン:やスラッシュ/は付けていても構いませんが省略をする事も可能です。(Wikiではコロン:もスラッシュ/も同じ意味になります。)

後、決して当サイト内では、http://というhttpsのs文字が無いSSL化がされていないサイトへのリンクは絶対に貼らないで下さい。(危険なサイトへ誘導をするサイトという認定を受けてしまう為です。)

画像やその他ファイルを貼り付けたい場合には、{{ファイル名?nolink}}という様に、表示したいファイル名前(拡張子まで)と、その後に必ず続けて?nolinkと入力して、波括弧2つで挟みます。

?nolink&14を付け加えないと、その画像が画像フォルダ全体までのリンクとなってしまい、閲覧者は混乱をしてしまいますので絶対に忘れないで下さい。(ツールバーから挿入する場合には自動的に入力がされるので特に気にはする必要はありません。)

画像gif、jpg、png以外のファイル名を指定した場合は、そのファイルへのリンクとして表示されます。

縦線記号|で区切りを入れると、左側がURL、右側にはHTMLのimgタグのalt属性と同じ様に画像の説明文を入れる事が可能となります。

※この記事は/wiki/という名前空間(ディレクトリ)にあり、今から見本として使う画像もそのディレクトリにある物を使用する為、リンク先に/wiki/が入りますが、メディアフォルダにアップロードされている画像を使用する際には画像のファイル名を入れるだけで表示がされます。

使用例

画像の説明あり\\
{{wiki/logo.png?nolink|画像の説明}}
 
画像の説明無し\\
{{wiki/logo.png?nolink}}

表示例

画像の説明あり 画像の説明無し

テキストリンクを貼るのと要領は同じで、半角コロン:も半角スラッシュ/は同じ意味を持ちます。

ツールバーから画像を挿入した場合これらが自動で付いて来ますが、削除してしまっても問題はありません。

画像の挿入の場合、ファイル名の後ろに?を付け、数字も付け加えると画像の幅をリサイズする事が出来ます。(高さは指定した幅のサイズと等倍になります。)

画像が外部の物でもサイズの指定をする事が可能ですが、URLはhttps://から記載する必要があります。(この際にもSSL化されていないURLの物は絶対に貼らない様にして下さい。)

使用例

幅だけを指定\\
{{wiki/logo.png?nolink&35}}

表示例

幅だけを指定

幅だけでなく高さまで大きさを指定する場合には、ファイル名の後ろに?nolink&を付け、数字と小文字のxを使い高さx幅とし、{{logo.png?nolink&72x15}}という感じにします。

高さを指定した場合、画像のアスペクト比と指定された幅と高さの比が異なる時には、リサイズされる前に新しいアスペクト比に切り抜かれてしまいます。

使用例

幅と高さを指定\\
{{wiki/logo.png?nolink&50x35}}

表示例

幅と高さを指定

半角スペースを左に2つ入れると右寄せ、右に2つ入れると左寄せ、左右両方に2つずつ入れると中央寄せに画像を配置する事が出来ます。

使用例

左寄せ\\
{{wiki/logo.png?nolink  }}
 
右寄せ\\
{{  wiki/logo.png?nolink}}
 
中央寄せ\\
{{  wiki/logo.png?nolink  }}

表示例

左寄せ 右寄せ 中央寄せ

画像でのリンク(リンクバナー･ボタン等)を使用する場合には、テキストリンクの際にリンク文字だった部分に画像を山括弧2つ{{画像までのURL}}で挿入します。

使用例

[[wiki/syntax|{{wiki/logo.png?35}}]]

表示例

画像のリサイズをさせる事や、画像の説明文を入れる事も可能です。

使用例

[[https://sing-blog.com|{{wiki/logo.png?35|シングブログ}}]]

表示例

脚注を入れたい時には、半角括弧2つ((文字))で挟みます。

脚注の文はマウスオーバー時のポップアップと、記事の一番下の部位に表示される様になります。

私はりょう((Smuleアカウント：@000_RYO))です。

文章をリスト表示する際には、行頭に半角スペースを2つ入れた後にアスタリスク1つと半角スペース1つ* と入力します。

そのまま改行を行うと、次の行にも前の行と同じ * が追加されるのでとても便利です。(リストを終わらせる時には、その行の * の記述を削除してEnterを押して段落を作ります。)

私の自己紹介です。
  * 名前：りょう
  * 好物：お寿司
  * 趣味：カラオケ

半角アスタリスク * ではなく、半角マイナス - にした場合には、そのリストは番号付きリストとなります。

この番号はそのリストが終了するまでは順番になります。

私の好物ランキング
  - お寿司
  - アイス
  - スイカ

行頭の半角スペースを4つ以上にした場合は、そのリストは入れ子となります。

ツールバーで入力の際には、空白部分へカーソルを移動して半角スペースを入力をしなくても、改行した後にそのまま1回半角スペースを入れるだけで空白部分には2つの半角スペースが入って入れ子の状態になります。

ノーマルのリストと、番号付きのリストは混合して使う事も可能です。

私の好物一覧
  * お寿司
    * 大トロ
    * 中トロ
    * 赤身
  * アイス
    - 梨味
    - グレープ
    - バニラ 

DokuWikiでは、次の様に半角で記号と数字を入力すると、それは自動的に顔の絵文字に変換されます。

でも、デフォルトの顔文字画像は正直あまり可愛い物が無いのがありません⋯

近い内に可愛い顔文字画像に変更をする予定です。

FontAwesomeの画像や、使用して作ったマーク等も、ショートコードを入れる事で挿入出来る様にいくつか設定してあります。

ここに用意されている物以外で使いたい画像等がありましたら、各種依頼のコメント欄にてご要望下さい。

入力	表示
->
<-
<->
<i-plus>
<i-minus>
<i=ue>
<i=sita>
<i=hidari>
<i=migi>
<i-fqa-q>
<i=fqa-q>
<i-no1>
<i-no2>
<i-no3>
<i-medal1>
<i-medal2>
<i-medal3>
...	⋯
<i-edge>
<i-ie>
<i-safari>
<i-apple>
制作中
<i-chrome>
<i-android>
制作中
<i-firefox>
<i-opera>
<i-appstore>
<i-googleplay>
<i-amazon>
<i-line>
<i-youtube>
<i-instagram>
<i-facebook>
<i-twitter>
<i-yoko3>
<w-yoko3>
<i-tate3>
<w-tate3>
<i-wifi>
<w-wifi>	Wi-Fi

<i-come>
<i-gift>
<i-share>
<i-share3>
<i=share>
<i-search>
<i=search>
<i-follow-plus>
<i-mic>
<i-mic-off>
<i-camera>
<i-video>
<i-headphone>
<i-music>
<i-music-play>
<i-music-stop>
<i-check>
<i-check-on>
<i-check-off>
<w-green-key>	ログイン
<w-green-save>	保存
<i-key>
<i-key-on>
<i-key-off>
<i-pen>
<w-wikipen>	文章の編集
<w-pagetool>
<i-heart>
<i-heart-on>
<i-heart-off>
<i-iphone-on>
<i-iphone-off>
<i-ringo>
<i-saoringo>
<i-spin>
<i-code>
<i-hagruma>
<i-wikilogin>
<w-wikilogin>	ログイン
<i-wikiuser>
<w-wikiuser>	ログイン
<i-google>
<w-google>	Google
<i-choice>	-
<i-follow>	フォローする
<i-follow-on>	フォロー中
<i-g-user>
<i-g-user-on>
<i-songbook>
<w-songbook>	曲集
<i-songbook-on>
<w-songbook-on>	曲集
<i-user>
<w-user>	プロフ
<i-user-on>
<w-user-on>	プロフ
<i-feed>
<w-feed>	フィード
<i-feed-on>
<w-feed-on>	フィード
<i-tansaku>
<w-tansaku>	探索
<i-tansaku-on>
<w-tansaku-on>	探索
<i-bell>
<w-bell>	お知らせ
<i-bell-on>
<w-bell-on>	お知らせ

入力	表示
>>
<<
<=>
=>
<=
<i-ue>
<i-sita>
<i-hidari>
<i-migi>
<i-fqa-a>
<i=fqa-a>
<i-award1>
<i-award2>
<i-award3>
<i-ribbon>
<i-unko>
<i-dame>
<i-damedame>
<w-edge>	Edge
<w-ie>	Internet Explorer
<w-safari>	Safari
<w-apple>	Apple
<w-ios>	iOS
<w-chrome>	Chrome
<w-android>	Android
<w-androidos>	Android OS
<w-firefox>	Firefox
<w-opera>	Opera
<w-appstore>	App Store
<w-googleplay>	Google Play
<w-amazon>	Amazon
<w-line>	LINE
<w-youtube>	YouTube
<w-instagram>	instagram
<w-facebook>	Facebook
<w-twitter>	Twitter
<i=yoko3>
<w=yoko3>
<i=tate3>
<w=tate3>
<i-bluetooth>
<w-bluetooth>	Bluetooth
<i-smule>
<w-smule>	Smule
<i-haguruma>
<i-vip>
<i-kakin>
<i-paint>
<i-vipmark>

情報は一覧表になっていたり、背景色が付いていたりデザイン化されていたり、又は開いたり閉じたりする機能の付いた付いた枠等と利用して表示した方が見やすい場合が多いです。

Wikiの記事内にてそれらを制作するのはとても簡単なのですが、簡単に設置が出来る為に面倒な事もあります⋯。

HTMLのタグが使えなくなっている都合上、以下に用意してある方法及び、テンプレート内でしかカスタマイズをする事は出来ない仕様となっておりますのでご了承下さいませ。
(管理人のsaoringochanさんに要望を出せば、上手く調節等をしてくれるかも知れません。)

シンプルに、縦に何マス、横に何マスと分かれる表をテーブルと呼び、その一つ一つのマス目の事をセルといいます。

セルは縦や横のセルと自由に結合する事も出来るので、色々な形のテーブルを作る事が出来ます。

テーブルを制作する為に使う記号は以下の4つのみです。

• キャレット(ハット)^
• パイプ(パイプマーク)|
• 半角スペース
• コロン:

まず覚えて欲しい事が、このセルとは簡単に説明すると2種類あり、種類によって使用用途が異なります。

1. thという「お題等で使う枠」
   • thのセルに入力した文字は自動に太文字に置き換えられます。
   • 文字の位置も自動で真ん中になったり、背景色が変わったりとなる事が多いのですが、当wikiではその様な設定はされてません。
2. tdという「ただの枠」
   • tdのセルに入力した文字は自動で太文字になるという事はありません。
   • 特にthのセルが必要が無い場合には、tdのみでテーブルを作ればOKです。

次に覚えて欲しい事が、使いやすく設定されてるが上の不便になってしまっている所と、wikiの「強いクセ」です⋯。

※1つのクセを治そうと設定をいじくる度に別の関係無い所でその設定が反映されてしまい、それを修正しようとして又別の所でバグが発生し⋯と何かと元々の設定を1つ修正するには時間が掛かってしまうので、修正する事が出来なかったこのクセを皆様も受け入れて下さいませ⋯。(もしかしたら管理人のsaoringochanさんが、上手く調節をして修正をしてくれるかも知れません。)

• どんなに小さいテーブルでも、画面いっぱいに表示がされます。
• セルの幅を各テーブル毎に設定する事が出来ず、セルの幅を統一化する事が出来ません。
  • 画面を半分半分、としたい場合には、テーブルよりもカラムを使用したり、又はカラムとテーブルを併合して使用する事をオススメ致します。
• セルの幅は、セル内で一番広く使われたセルの大きさでその楯列は統一されます。
  • セルの幅調整の為にはスペースを上手く用いる、又は強制改行したりと工夫が必要となります。
• 横に長いテーブルを制作した場合には、レスポンシブ化の為に自動的に横スクロールのテーブルへと変わります。
• セル内で段落を作る事も改行をする事も出来ません。
  ですが、同じ行内でなら改行をする事は可能です。
  • その為、段落を作りたい場合には、同じ行内で改行記号を2つ入れるという形で「段落風」にする必要があります。
  • どれだけ文章が長くなったとしても、Enterを押し改行を行うとエラーが発生します。
    その為、かなーり編集の際には大変な思いをすると思います⋯。
• セル内でブロック要素のショートコードを使用するとエラーが起きる事が多いです。
• 文字や画像等をセル内で、左右に対して真ん中に位置指定するのは簡単なのですが、上下に対する真ん中に位置指定する事は出来ず、位置は自動的に上に合わされます。
• レスポンシブ表示の際、thの無い横1行のセルが表示される時には何故か一番上だけ少し太くなります。

まずはtdだけしかない、テーブルを作り方を説明します。

tdだけのテーブルの際には、使用する記号はパイプ|と半角スペース のみになります。

形は、漢字の「囲」の様な、縦3マス、横3マス(合計9つのセル)のテーブルにしてみます。

まず、パイプ|を入力をし、文字を|と|で挟みます。

次に、縦3マスのテーブルなので、その下の2行(合計3行を使用するという意味です。)にも1行目で入力しただけ同じ本数の|を入力します。

この時に数が合わないとエラーが起きます。

最後に、入力した文字の左右に半角スペースを2つセル内で文字の位置を寄せたい側と反対側に入力します。(元々、文字は左寄りになるので厳密に言えば左に寄せたくても、右側にスペースを入れる必要はありません。)

文字を真ん中に配置したい場合には、文字の両側に半角スペースを2つずつ入力します。

|  1位  |お寿司  |  100点|
|  2位  |アイス  |  96点|
|  3位  |スイカ  |  85点|

次は、一番上のセルを全てをthにしてみます。

thの場合には、パイプ|ではなく、代わりにハット^を使用します。

使用する記号が変わるだけなので、必要な記号の数も入力する記法も先程と全く同じです。

^  順位  ^  商品  ^  得点  ^
|  1位  |お寿司  |  100点|
|  2位  |アイス  |  96点|
|  3位  |スイカ  |  85点|

次は、左側のセルを全てをthにしてみます。

thを横だけに指定する為には、指定したいセルの左側だけに、ハット^を使用します。

使用する記号が変わるだけなので、必要な記号の数も入力する記法も先程と全く同じです。

^  1位  |お寿司  |  100点|
^  2位  |アイス  |  96点|
^  3位  |スイカ  |  85点|

次は、一番上のセル全てと、左側のセル全てをthにしてみます。

^  順位  ^  商品  ^  得点  ^
^  1位  |お寿司  |  100点|
^  2位  |アイス  |  96点|
^  3位  |スイカ  |  85点|

テーブルを制作する時の基本のルールは、簡単にまとめるとこんな感じです。

• 行内にある|又は^を合計した数は必ず同じにする。
• 行内の初めと最後に入力されている文字は、どちらとも必ず|か^になる。

テーブル内のセルが結合すると、見た目ではセルの数が少なくなった様に見えますが、結合したセルは見えなくなっているだけで実在するセルの数には変化はありません。

その為、セルを結合させても普通のテーブルを作るのと同様、|又は^の数は全ての行内で全く同じ数必要となります。

セル同士を結合させた場合、次の様な決まりがある為に、結合させる時には以下の様なルールがあります。

• 横同士でセルを結合させた場合、例えいくつの数合体させたとしても、合体後のセルは合体前一番左側にあったセルという扱いになるので、決して左側のセルが右側のセルと結合したという訳ではありません。
  • その為、横同士結合させたい場合は、結合させて使用しなくなり余る右側の|又は^をその次の右側の|又は^と何も挟まずくっつけてしまう。(消す訳ではありません。)
• 縦同士でセルを結合させた場合、例えいくつの数合体させたとしても、合体後のセルは合体前一番上側にあったセルという扱いになるので、決して下側のセルが上側のセルと結合したという訳ではありません。
  • その為、縦同士結合させたい場合は、結合させて使用しなくなり余る下側の|と|の間に、コロンを3つ連続で入れて埋める。

後、thを結合する方法も、tdを結合する方法も原理は全く同じになります。

今度は分かりやすい様に、縦6マス、横5マス、一番上の行だけthという表で、色々とセルを結合してみたいと思います。

^  ラーメン選手権  ^^^^^
|  種類  |  性別  |  評価  ||  感想  |
|  醤油  |男性  |  45点|  ×  |とんこつの方が良い。    |
|:::|女性  |  65点|  〇  |:::|
|  塩味  |男性  |  86点|  ◎  |:::|
|:::|女性  |  51点|  △  |:::|

以下のボックスを入れる時には以下のショートコードを使用します。

こちらのボックスは、編集画面のツールバーにある一番右のツールボタンを押す事で簡単に挿入する事が出来ます。

このショートコード内では段落も改行も普通に行う事が出来ます。

ショートコード内のcenterをleftやrightに変更する事で、ボックスが表示される位置を指定する事も可能です。(デフォルトですと幅が100%になっている為、あまり意味は無いですが⋯。)

100%となっている部分を80%や60%と変更する事で、ボックスの横幅を指定する事も可能です。

roundという文字を削除すると、ボックスの角が丸くならず真四角になります。

<WRAP center round box 100%>
中央配置枠
</WRAP>

<WRAP center round tip 100%>
ポイント枠
</WRAP>

<WRAP center round important 100%>
回答枠
</WRAP>

<WRAP center round alert 100%>
ご注意枠
</WRAP>

<WRAP center round help 100%>
質問枠
</WRAP>

<WRAP center round download 100%>
ダウンロード枠
</WRAP>

<WRAP center round todo 100%>
おさらい枠
</WRAP>

1つの画面で左･右、又は左･真ん中･右と並べて画面を表示したい時にはカラムという機能を使います。

カラムには、どんな大きさの画面で表示しても横並びで表示をする固定カラムと、パソコンやタブレット等で見た時には横並びでも、スマホで見た時には自動で縦並びで表示がされるレスポンシブカラムの2種類があります。

使いたい時には、以下のショートコードを使用します。

ショートコードの説明、又は自動で変換されてしまう文字列を記事内に表示したい場合には、自動整形を無効化する必要があります。

自動整形を無効化する方法には何種類かあるのですが、一番簡単なのは無効化したい文字をこの様に%%文字%%パーセンテージ2つで挟んでしまう事です。

<nowiki>文字</nowiki>というショートコードで挟んでも同じ効果があります。

この方法は、ちょっとした短い文で使用すると便利です。

行の初めに半角スペースを2つ入力すると、入力した文字はインデントされる様になり、インデントされている間の行の文字は全て自動整形が無効化されます。

<code>文字</code>や、<file>文字</file>というショートコードで挟んでいる間の行の文字も全てが自動整形が無効化されます。

<code>文字</code>のショートコードの場合、codeの後に半角スペースを入れて、<code html>ここにhtmlのコード</code>とか、<code php>ここにphpのコード</code>、<code css>ここにcssのコード</code>という様に、言語の名前を続けて入れてコードを記述すれば、そのソースコードには自動的に色が付きとても色鮮やかになります。

<file>文字</file>のショートコードの場合、fileの後に半角スペースを入れて、<file html>ここにhtmlのコード</file>とか、<file php>ここにphpのコード</file>、<file css>ここにcssのコード</file>という様に、言語の名前を続けて入れてコードを記述すれば、そのソースコードには自動的に色が付きとても色鮮やかになるだけでなく、その文章をダウンロード出来る様にする事も出来ます。(色付け等の機能は必要無く、ファイルをダウンロードさせたいだけの場合には、<code - お宝.txt>の様に間にマイナスを使用します。)

記事内のに以下の文を入れると、そのページ内でのみマクロの効果が生まれます。
記事内に入力したマクロは表示されません。

もし入力したマクロがそのまま文字として表示されている、という事はスペルが間違えているか、挿入する位置が間違えていますので再確認をしてみて下さい。

h1で作成したタイトルとなる見出し以外で、h2とh3の見出しがページ内に2つ以上ある場合には、自動的に右上にそのページの目次が自動で生成されます。

とても便利な機能なのですが、ページによっては目次が必要無かったり、編集作業時等はこのちょこまかと動く目次がとても邪魔に感じる事もあるかと思います。

そんな時には、~~NOTOC~~とページの最上部(h1よりも上)に記載する事で、そのページには目次が表示がされなくなります。

表示したくなった際には、記載した~~NOTOC~~を又消して記事を更新すれば、又再度表示がされる様になります。

Dokuwkiでは記事を編集している際の出力を全てキャッシュしています。

便利な一面もあるかと思うのですが、このDokuwiki内にキャッシュされているデータのせいで、折角ブラウザのキャッシュを削除したとしても更新が反映されない、という事もあるかも知れません。(滅多にありませんが、たまーにあります。)

そんな時には、~~NOCACHE~~とページの最上部(h1よりも上)に記載する事で、そのページではキャッシュが保存されなくなり、更新の度に毎回強制的にページがリロードされる様になります。目次が表示がされなくなります。

ページ内にコメント欄を設置したい場合には、設置をしたい位置に~~DISCUSSION~~と記載すると、その場所にコメント欄を設置する事が出来ます。

今の所、コメント欄は「1つのページには1つしか設置が出来ない」様になっているみたいですが、複数設置が出来る様に調整を行っております。

~~DISCUSSION~~とだけ記載すると、そのコメント欄のタイトルはコメントになりますが、~~DISCUSSION|ここにタイトル~~という感じで、DISCUSSIONの後ろにパイプ|を入れて文字を続けて入力する事で、任意のコメント欄にする事が可能となっています。

一度ページ内で~~DISCUSSION~~を記載して設置をした場合には、その後に誰かからコメントがあった後に~~DISCUSSION~~の記載を消してしまったとしても、コメント自体が消えてしまったという訳ではありません。

再度~~DISCUSSION~~と記載をする事で再表示がされますのでご安心下さい。(コメントを削除する場合には、コメントをした本人又は、admin以上の管理人権限が必要となります。)