Wiki編集マニュアル

概要

編集に参加していただきありがとうございます！
このページはWiki内で使われているプラグインや、知っていると便利かもしれない編集知識を共有しています。

編集の基本事項：編集ガイドライン
├ 下書き・編集練習用ページ：砂場
├ コピペ・複製で使える雛形：テンプレート
├ 色見本：カラーコード
└ 編集の相談・質問：編集掲示板

公式マニュアル：WIKIWIKIさんぷるWIKI / プラグインマニュアル / 整形ルール

**見出し
 コード(行頭に半角を入れて整形テキストにする)
#cssbox(border: solid silver 1px; margin: 0 24px 0 13px; padding: 0 8px;){{
&color(gray){＜サンプル＞};
コード
}}

目次

基本知識

🔰ページの作成・編集・削除

PC版では画面上部の編集メニューにあるアイコンから編集作業ができる。
スマホでは画面右下のから編集メニューを開く。

ページの新規作成：

1. 画面上部(編集メニュー)にある「 新規 」をクリック
2. 編集画面で内容を記述して ページの更新 をクリック

ページの編集：

1. 編集したいページに移動し、画面上部にある「 編集 」をクリック
2. 編集画面で内容を記述して ページの更新 をクリック

項目の部分編集：

1. それぞれの項目の見出しにある をクリック
2. 内容を編集して ページの更新 をクリック

ページの削除：

1. 編集画面から内容を全削除すると、 ページの更新 ボタンが ページの削除 になり、ページが削除できる。

1ページあたりの容量

WIKIWKIの仕様上、3つの「容量の限界」が存在する。
その都度ページを分割したり、構成を見直したりが必要になる。

• 行数オーバー
  1ページの行数の限界は1600行。1601行を超えると更新時にエラーになってしまう。

• 文字数オーバー
  1600行未満でも文字数オーバーした場合、ページを確認できなくなり再編集を促される。
  1バイト文字・2バイト文字混合で155,000文字、容量350KB程度。

• 負荷
  Wikiの右上に表示されている 〇〇ms の負荷パネルが目安。
  ＜＜＜ の順番でページの重さに比例していて、パネルが赤くなっていたら「このページ重すぎるからなんとかしてもらえる？」というWIKIWIKIからのメッセージ。
  しかしこのパネルは閲覧の時間帯や各々のネット環境にも左右されている。
  赤くなっていても今すぐページが爆発するわけではないので、焦らなくて大丈夫。

  参考ページ：負荷パネルについて / 快適なページ作りのためにできること

容量限界の解決方法

• 行数/文字数オーバーへの対処
  • 案1：ページを項目で分割して、新規ページを作る
  • 案2：#includeプラグインでページの内容を分割→引用する
    （例：カルテジアのページで1600行以上になったので、後に編集することがほぼ無いスキルの部分を分割している）
• 負荷軽減用プラグイン
  • 案1：とくに重い場所を#fcache(部分キャッシュ)で囲う
  • 案2：#lazy_fold、#lazy_accordion(折りたたみ処理の遅延実行プラグイン)で、重い場所を小分けにして折りたたむ
• よくわからない…
  • お気軽に▶編集掲示板にヘルプを出してください。

Wikiの幅

表組みは合計1100px以内にすると、Wikiの幅におさまる。

編集に便利な機能・外部のツール

構文ハイライト

WIKIWIKIの編集機能。編集画面で「 構文ハイライト」をONにすると使用可能。(▶詳細)

• プラグインに色がついて編集しやすくなる。
• 書式付き貼り付け(スプレッドシートから表を貼り付ける等)ができる。
• 「構文ハイライト」の右にある四角形のボタンを押すとプレビューを見ながら編集ができる。
• 左上の[編集][挿入]ボタンからページ内の文字列の検索、置換やプラグインの挿入などが使用できる。

テキストエディタ

記事の下書き用。
極端なことを言えば文字が入力できればOKなので、端末に標準搭載の「メモ帳」でOK。
正規表現での置換をしたりする場合にはテキストエディタを使うと便利。
以下は有名どころの紹介。

サクラエディタ
Windows専用、日本製のフリーウェア。
動作が軽量で簡単なテキスト編集に適する。

Notepad++
Windows専用、サクラエディタより機能が豊富。
コードの色分けやタブ編集もできる。インストール時に日本語選択可能。

Visual Studio Code
Windows/Mac対応、Microsoftアカウントで利用可能。UIのカスタマイズ勢と拡張機能に富む。
UIの日本語化は『VScode 日本語化』で検索。

スプレッドシート(表作成)

Microsoft Excel、Google スプレッドシートなど。
Wikiの編集画面で「構文ハイライト」をONにしておくと、スプレッドシートをコピペで表をそのまま貼り付けられる。

Wiki→スプレッドシートに変換する
WIKI2EXCEL converterでWIKIWIKIの編集画面の表を変換できる。

1. Wikiの編集画面から表部分をコピーする
2. フォーム欄にペーストし、行末のオプション[c/f/h]をあらかじめ削除する(削除しないと表の1～2行目が1列がズレる)
3. 「Wiki » Excel」になっていることを確認
4. 「Convert!」ボタンをクリックすると変換完了！
5. フォーム欄から全選択してExcelに貼り付ける

OCR(画像からテキスト抽出)

スクリーンショットの文字起こしに使えるツール。無料で手軽に使えるものを紹介。

Windows - Snipping Tool(Windows標準搭載機能)
画面上を範囲選択して文字起こしできる。

1. キーボードの[print screen]を押してSnipping Toolを起動
2. 画像のテキストを範囲選択
3. 「テキストアクション」ボタンをクリック
4. 「すべてのテキストをコピーする」(ドラッグで任意のテキストのみ選択も可能)
   • 改行まで反映されるため、手動で改行削除が必要(フリガナが文章に混ざらないという利点もある)

Windows - 「フォト」アプリ(Windows標準搭載機能)
保存した画像やスクショをまるごと文字起こしできる。

1. Windowsで画像ファイルを右クリックし、プロフラムから開く -「フォト」（標準ビューアーに設定している場合はファイルをダブルクリックでOK）
2. フォトビューアー下部にある「テキストをスキャン」のアイコンをクリック
3. テキスト部分がハイライトされるので、任意のテキストをドラッグしてコピーできる
   （ctrl + aで画像上のテキスト全てコピーも可能）
   • 「Snipping Tool」と同様に改行まで反映されるため、手動で改行削除が必要
   • 日本語文章間に余計な半角スペースが入る場合、WIKIWIKIの編集画面で [編集]→[すべて置換] のFindに半角スペースを入力すると一括で削除できる。

Apple製品 - テキスト認識(Mac,iPad,iPhone標準搭載機能)

1. プレビュー(アルバム)でスクリーンショットを開く
2. テキスト部分を選択(長押し+スワイプ)で画像のテキスト部分をコピーできる
   • 句点まで自動的に改行を削除してくれる
   • 「……」の変換が苦手。「・・・...」のようになることが多い
   • 「瑝瓏」を「理龍」にしがち

Google Chome - Googleレンズ
ブラウザがあればファイルのアップロードなしで利用可能。

1. 画像をChromeで開く
2. 右クリック→「Googleレンズ」
3. 「テキストを選択」
4. 「コピー」→テキストエディタに貼り付け
   • 句点まで自動的に改行を削除してくれる
   • 記号は半角になってしまうことが多い
   • フリガナがあると地の文章にフリガナが混ざってしまう(「ざんぞう残像」のようになる)ので注意

Google Drive
Googleアカウントとファイルのアップロードが必要だが、長文に対応しやすい。

1. Googleドライブを開き、文字起こししたい画像ファイルをアップロード
2. アップロードした画像ファイルを右クリックし、「アプリで開く」>「Googleドキュメント」を選択
3. 文字起こしされたテキストがGoogleドキュメントで表示されるため、必要な部分をコピー
   • 英文基準のためか余分な半角が入りがちだが、改行の精度は高い。最初に一括置換で半角スペースを削除すると作業効率◎
   • 「……」は「.....」で出力される

基本のプラグイン

🔰見出し：*/**/***

*見出しの名前

• 項目の見出し。 * (アスタリスク)の数でレベルが1～3に変わる。
• アンカータグの [#英数] が自動生成され、見出しごとに編集できる鉛筆アイコン が表示される。
  この文字列は、目次(#contents)や他のページからリンクする為の要素(アンカー)になる。

• アンカータグは [#list] 等のわかりやすい文字列に変更することもできる。
  • 最初の1文字は必ず英字を使用(半角数字・記号は不可)。
  • 1ページに同じアンカー文字列を使用しているとリンクが混線するため、1ページ内では違うアンカー文字列を使う必要がある。
  • タグを変更しても他ページからのリンクは自動補正されないため、意図せぬリンク切れに注意。変更の必要がある場合は、あらかじめタグをサイト内検索して影響範囲を確認しよう。

目次に表示されない見出し：#shadowheader

#shadowheader(見出しレベル,見出し文字列)

• 見出しレベル(省略不可)：1～3
• 見出し文字列：見出しに表示する文字列
  (見出しレベルは1=*, 2=**, 3=*** の見た目になる。省略すると「*」が指定された場合と同じ表示になる。)

#shadowheader(1,大見出し)
#shadowheader(2,中見出し)
#shadowheader(3,小見出し)

アンカータグの追加 &aname

&aname(任意の英数字);

• インラインで指定した位置にアンカー(リンクの飛び先)を設定できる。
• アンカー名には半角英字(大文字／小文字)が使用可能。

*見出しの名前 &aname(任意の英数字); [#元からあるアンカー]

 のように見出しに設置することで、既存リンクの置き換えなしで任意のアンカー文字列として動作する。リンクの置き換えが面倒な時に使える

🔰目次の生成：#contents

#contents

• 行頭で #contents を記述すると、見出しに基づいて目次を作成する。
• 一般的に #contents はページの最初のほうに記述する。

▶　高度な設定・#contentsの拡張版：#contentsx
▶　目次に表示されない見出し：#shadowheader

🔰他のページへのリンク：[[　]]

[[ページ名]]
[[表示する文字>リンク先のページ名]]

• Wiki内にあるページ名を [[　]] で囲うと、そのページへのリンクになる。
  ページ名は大文字小文字含めて完全一致していないと正しくリンクされない。

[[表示する文字>リンク先#アンカータグ]]

• 見出しに設定されている[#〇〇〇]をリンク先のページの後ろに記述すると、見出しにリンクを張ることができる。
  「アンカータグ」とは、見出しの右端にある をクリックするとURL欄の # 以降の末尾に着く英字の文字列のこと。
• 「#header」「#footer」を記述するとページの最上部/最下部へのリンクになる。

こう書くと：[[アンコ]]

こう書くと：アンコのページは[[こちら！>アンコ]]

こう書くと：[[アンコのギャラリー>アンコ#gallery]]

表示する文字に色を指定すると：[[&color(hotpink){アンコ};>アンコ]]

外部サイトはURLを指定：[[鳴潮公式サイト>https://wutheringwaves.kurogames.com/jp/]]

予備知識：相対パス

下層ページ、親ページ、現在のページにリンクする際は「相対パス」が使える。

[[下層ページ>./下層ページ名]]
[[親ページ>../]]
[[現在のページ>./]]

• 例：キャラ詳細ページの「プロフィール」の部分は [[プロフィール>./プロフィール]] と下層ページへの相対パスを使用している。(編集がラク＆編集ミスが減る)
   

🔰リスト(箇条書き)

箇条書きリスト： -

行頭で - を指定すると、番号なしリスト(箇条書き)になる。
番号なしリストは -、--、--- の3レベル。

- リスト1
-- リスト2
--- リスト3

番号付きリスト： +

行頭で + を指定すると、番号付きリストになる。

+ レベル1
++レベル2
+++レベル3

定義リスト： :|

行頭を : で始め、 | 記号で区切ると、定義リストになる。
定義リストは :、::、::: の3レベルある。定義リストの定義語、説明文は省略することができる。

:定義語 | 説明文
::レベル2 | 説明文
:::レベル3 | 説明文
:|定義語を書かずにインデントのみ揃えることも可能

ページタイトルの調整：TITLE

TITLE:表示したいページの名前

Wikiの各ページの最上部に表示されるタイトルを、任意の文字列に変更する。

• 例：「秧秧」→「秧秧（ヤンヤン）」に調整
• Google等の検索結果には TITLE: で指定した名称が反映されるので、「ヤンヤン」でも検索結果に引っかかりやすくなる。
   

文字の装飾

太字/斜体/取り消し線/下線

''太字テキスト''
'''斜体テキスト'''
%%取り消しテキスト%%
%%%下線付きテキスト%%%

• 太字・斜体に使う ' (シングルクォーテーション)は[shift+7]で入力。 " (ダブルクォーテーション)ではない。
   

文字色変更：&color

色見本：カラーコード

&color([文字色],[背景色]){テキスト};

文字色：&color(orange){テキスト};
背景色：&color(,#ddd){テキスト};
文字色+背景色：&color(blue,#ddd){テキスト};

このWikiでは属性・レア度は下記のカラーコードで統一している。

属性			文字色
	✦凝縮	凝縮	dodgerblue
	✦焦熱	焦熱	crimson
	✦電導	電導	slateblue
	✦気動	気動	lightseagreen
	✦回折	回折	goldenrod
	✦消滅	消滅	mediumvioletred
	✦物理	物理	gray

&color(dodgerblue){凝縮ダメージ};
&color(crimson){焦熱ダメージ};
&color(slateblue){電導ダメージ};
&color(lightseagreen){気動ダメージ};
&color(goldenrod){回折ダメージ};
&color(mediumvioletred){消滅ダメージ};
&color(gray){物理ダメージ};

レア度	文字色
★5	darkorange
★4	orchid
★3	royalblue
★2	green

&color(darkorange){★5};
&color(orchid){★4};
&color(royalblue){★3};
&color(green){★2};

#color([文字色],[背景色]){{
テキスト
テキスト
}}

• ブロック要素で複数行まとめて色指定も可能。
   

文字サイズ変更：&size

&size([文字サイズ]){サイズを変更するテキスト};

&size(10){小さなテキスト};
&size(16){大きなテキスト};

• 上記のcolorと同様、ブロック要素で複数行まとめてサイズ変更も可能。
• このWikiのデフォルト文字サイズは13px(WIKIWIKI標準サイズ。wikiコントロールパネルでは12pxと書かれているが、実際には13pxの文字が表示されている)。

  	11px	12px	13px(標準)	14px	15px
  標準	サンプル	サンプル	サンプル	サンプル	サンプル
  太字	サンプル	サンプル	サンプル	サンプル	サンプル

   

フォント変更

&font(<sans-serif | sans-serif-tight | serif | monospace | legacy-ui-gothic>){テキスト};

• フォントは sans-serif | sans-serif-tight | serif | monospace | legacy-ui-gothic が使用可能。
  このwikiではキャラのプロフィールなどに使用。

&font(serif){あいうえおアイウエオabcdefg0123456789・共鳴能力測定報告};

ふりがな：&ruby

&ruby(ふりがな){テキスト};

&ruby(ヤンヤン){秧秧};

＜サンプル＞
秧秧(ヤンヤン)

カウントダウン：&countdown

&countdown(YYYY-MM-DD[hh:mm:ss][, (day|hour|full|none)])[{メッセージ}];

イベントの詳細ページなどに使っているカウントダウン。

• YYYY-MM-DD － 必須：基準となる日付を指定（西暦形式）。
• hh:mm:ss － 省略可：時刻を指定。指定しない場合は00:00:00（午前0時）とみなされる。
• day － 残り時間を「日数」のみで表示（例：4620日）。
• hour － 残り時間を「時間」のみで表示（例：110900時間）。
• full － 残り時間を「日数＋時分秒」で表示（例：4620日と20:47:07）。
• none － 残り時間を表示せず、日付を過ぎた場合にのみメッセージを表示。
• {メッセージ} － 省略可：指定日時を過ぎた場合に代わりに表示するメッセージを記述。

『鳴潮』リリース10周年まであと&countdown(2034-5-23 00:00:00,full){0日};！

文章の整形・レイアウト

水平線：----

----

↓このように↓ 文章を区切るのに使える水平線を設置する。

 ---- はハイフン4つ以上ならいくつでも動作する。

引用文：＞

>引用文

• 引用文の中は、ブロック要素を明示しない限り、段落となる。
• 引用文は >、>>、>>> の3レベルある。
• <、<<、<<< を使用すると一つのブロック要素の塊の中でレベルを減らすことができる。

>メェメェを召喚し、最大4段の攻撃をさせ、焦熱ダメージを与える。

>1レベル
>>2レベル
ここも
<<こうすると1レベルに
<こうすると外側に

 ＜サンプル＞

メェメェを召喚し、最大4段の攻撃をさせ、焦熱ダメージを与える。

1レベル

2レベル
ここも

こうすると1レベルに

こうすると外側に

注釈：((　))

((テキスト))

• 行中で文字を (( と )) ではさむと、注釈*1が作成され、行中にページ最下部にある注釈へのリンクが貼られる。
• 数字は自動的にページ内にある注釈の数に割り振られる。

ツールチップ：&tooltip

&tooltip([単語]){[説明文]};

マウスカーソルを単語に合わせる(スマホに場合はタップする)と、説明が出る。

単語

• <単語>にマウスカーソルを合わせると、ツールチップとして説明が出現する。
• <単語>が存在するページ名だった場合には、そのページへのリンクになる。

説明文

• <説明文>が有れば使用。
• <説明文>がなく、実在するページの名前だった場合は、そのページの最初の見出しを使用(99行分探索)。
• <説明文>の中に&br;(改行)と&t;(タブ)を含めることが出来る。

&tooltip(終奏スキル){「退場するキャラ」が発動するスキル。};

 ＜サンプル＞　終奏スキル

&tooltip("&ref(画像/アンコ.webp,nolink,36x36);"){""で囲めば画像にも使えるよ！};

 ＜サンプル＞　

行間の空白：#br / ~

• 大きな空白： #br を使う
• 小さな空白：行頭に ~ を使う
  空白の幅に違いがある。

#brの場合
#br
この上に大きな空白ができる
- リスト
行頭に ~ の場合
~この上に小さな空白ができる
リストや引用符のインデントを併用できる

整形済みテキスト

• 行頭に半角スペースを記述すると、その行がプラグインがテキストボックスの中に入る。
• このページのように、プラグインの例やコピペ用に使われることが多い。
• どれだけ長文のテキストでも改行されない特徴があるため、スマートフォンから閲覧すると見辛くなってしまう欠点がある。
• このプラグインは改行されると途切れてしまうため、空行を作りたい場合は全角スペースなどを使用すると良い。

# 文字列

• 半角スペースの前に#を付け加えると、見た目はそのままでプラグインが有効になる。

# こう書くと：&color(hotpink){''この中でも強調！''};

こうなる：この中でも強調！

コピペできるテキスト：#code

#code(,nonumber){{
(テキスト)
(テキスト)
}}

• 右上に[Copy]ボタンが表示され、閲覧者がワンクリックでクリップボードにコピーできる。
  引換コードやテンプレートに使用している。
• nonumberを指定しない場合、左側にコードの行数が自動で表示される。
   

ネタバレ防止マスク：&ntbr

&ntbr(マスク色){隠し文字};

• マスク色は省略可。
• マスクは一度クリックしたらリロードするまでそのまま。
• インライン書式を表組み内で使用した場合、セル全体にマスクがかかる。
• ntbrで伏せられている部分はブラウザのページ内検索機能ではヒットしなくなる。
  情報が見つからなくなってしまってはWikiとして本末転倒なので、使いすぎには注意。

熾霞の本名は&ntbr{馬小芳(Ma Xiaofang)};。
|陳皮からの呼ばれ方|&ntbr{芳ちゃん};|
|攀花からの呼ばれ方|熾霞のほかに&ntbr{小芳(ショウファン)};と呼ばれることもある|

別ページで表示：#popout

#popout(別ページ名,[ラベル名,below]){{
内容
}}

別ページ名

新しく開いたウィンドウのページ名。

ラベル名

別ページへのリンクとなるボタンに表示するテキスト。
省略時は別ページ名で指定したテキストが流用される。

below

ボタンを範囲の上側ではなく下側に表示するようにする。

囲んだ範囲を別のページ(タブ)として表示する。(例 ▶共鳴者一覧 役割早見表)
移動先のページではテキストがウィンドウいっぱいに表示され、スマホ版表示でもPC版表示のようなレイアウトになるという特徴がある。
とても大きな表など縦にも横にも長い内容を見やすくしたい時などに有効。

テーブル(表組み)

|文字列1|文字列2|

• 行頭から | (バーティカルバー)で文字列を区切ることで表組みになる。
• 各要素の先頭に下記の記述子を指定できる。
• 編集画面の「構文ハイライト」モードでExcelやGoogleスプレッドシート等で作成した表をコピペすると、自動的にテーブルとして入力される。
  一覧表や表計算したデータをそのまま貼り付けることができる。

• 行末に c を記述すると、書式指定行となる。書式指定行では、以下の記述子が指定できる。

LEFT:
CENTER:
RIGHT:
TOP:　
MIDDLE:
BOTTOM:
BGCOLOR(色):
COLOR(色):
SIZE(サイズ):

※要素の表示位置及び背景色・文字色・文字サイズ(px単位)を指定する。デフォルトは左寄せになる。
※記述子の後ろに数値を記述すると、セル幅がpx単位で指定できる。また%での指定も可能(使用時はPCとモバイル両方のプレビューを確認しよう)。

• 行末に h を記述すると、ヘッダ行(thead)になる。
• 行末に f を記述すると、フッタ行(tfoot)になる。
• セル内のインライン要素の先頭に ~ を付けると、ヘッダ(th)になる。
• セル内に > を単独で記述すると右のセルと連結する(colspan)。
• セル内に ~ を単独で記述すると上のセルと連結する(rowspan)。

|>|右のセルと連結|
|80|160|160|c
|~表組みの|~各セルの要素の配置に|~関するサンプル|
|COLOR(blue):左寄せ|CENTER:センタリング |BGCOLOR(lightyellow):RIGHT:右寄せ|
|RIGHT:右寄せ|左寄せ|CENTER:センタリング|
|TOP:上寄せ&br;&br;|MIDDLE:中央寄せ|BOTTOM:下寄せ|

|上のセルと|連結|
|~|ここはそのまま|
|ヘッダ行は|必ず一番上に行く|h
|フッタ行も|必ず一番下に行く|f
|~ヘッダ|ここはヘッダにならない|
|一番右に「>」を置くと消える|>|

• 書式指定行で要素を指定することで、まとめて同じ列の書式を指定できる。

|SIZE(11):|CENTER:|BGCOLOR(lightyellow):RIGHT:100|c
|この列の文字サイズは|この列は&br;中央揃えになる|この列はlightyellowの背景で|
|11pxになる|◎|かつ幅が100px、右揃えになる|

並び替えできる表にする：#tablesort

#tablesort(){{
|~ヘッダ行1|~ヘッダ行2|h
|表1|A|
|表2|B|
|表3|C|
}}

• |>|や|~|による結合セルが含まれた表には機能せず、エラーが表示される。
  ヘッダーやフッター行に結合セルが含まれる場合は問題ない。
  エラー表示の例

  ヘッダ行1	ヘッダ行2
  表1	A
  表2

表の見出しを固定する

高さ固定のスクロール可能テーブル：#tablescroll

#tablescroll(200){{
|a|b|c|h
|1|2|3|
|4|5|6|
}}

• 領域内でヘッダを上部に固定してスクロール可能。(例 ▶役割早見表)
• 横はみ出しがあっても水平スクロールできる。
• 高さ省略時は 500 がデフォルト。

先頭列を固定したスクロール可能テーブル：#tablescroll(fix-col)

#tablescroll(300,fix-col){{
|a|b|c|h
|1|2|3|
|4|5|6|
}}

• 横スクロール時に先頭列(左端)が固定される。
• 横はみ出しでスクロールが起きる場合でないと意味がない。
• 上限値は 60000 +@。表示行より大きい数値が指定されている場合、先頭列のみが固定される。
  このWikiではスマホで表示した時、一覧表の画像アイコンが固定されるようにしている。(例 ▶武器/長刃)

  #tablescroll(60000,fix-col){{
  |a|b|c|h
  |1|2|3|
  |4|5|6|
  }}

画面上部にヘッダ貼り付け：#tablescroll(screen-sticky)

#tablescroll(screen-sticky){{
|a|b|c|h
|1|2|3|
|4|5|6|
}}

• 先頭行を画面上部に固定することができる。
• 表の末尾までスクロールすると先頭行が消え、また末尾を表示すると先頭行が現れる。
  なお、先頭列固定(fix-col)との併用はできない(fix-colを指定しても無視される)。
   

編集可能テーブル：#table_edit

▶ 公式マニュアル：編集可能テーブル

#table_edit(呼び出したいページ名)

• 表の編集が行単位で簡単に出来るようになるプラグイン。
• 1ページに4つまで設置できる（と公式マニュアルには書かれているが、それ以上も設置できる）。
• テーブルの編集が終わって編集ボタンを無くしたい場合、 table_edit を include に置き換える。
• 編集可能テーブルの設置例：老人と魚と海-漁獲図鑑、千の扉の奇想-メタファーの一覧

折りたたみ

折りたたみ：#fold / #navfold

• foldに格納されている部分はブラウザのページ内検索機能ではヒットしなくなるので注意。
  ニッチな補足情報を丁寧に書いていたらめちゃくちゃ長くなってしまった…という場合でなければ、過度に情報を折りたたむ必要はない。

#fold(もっと見る){{
隠されていたテキスト
複数行
複数行
}}

• #navfoldは本来メニューバー用に開発されているプラグイン。見た目以外はほぼ#foldと変わらない。
  折りたたみの可否をキャッシュに保存するので、閲覧者の意思でメニューの折りたたみ具合を制御しやすい。
• メニューバー以外にも使えるが、折りたたみ具合を維持することは不可。挙動はfoldと同じになる。

#navfold(もっと見る){{
隠されていたテキスト
複数行
複数行
}}

目次に表示されない折りたたみ：#accordion

• 機能的にはfoldと重複するところがあるが、見た目が異なる。

#accordion(title,*|**|***,open|close){{
記事
記事
}}

• title：見出しのタイトル。
• *|**|***：見出しのレベル。
• open|close：最初から開く → open / 最初から閉じる → close

#accordion(折りたたみ,***,close){{
記事
記事
}}

• #accordionは#foldのようにインライン書式が有効にできないため、「白芷」や「瑝瓏」もコード参照文字に変換されてしまうため使用不可。

負荷軽減の折りたたみ：#lazy_fold

参考：快適なページ作りのためにできること-負荷軽減用プラグイン

• 折りたたみを開くまで中の文章が読み込まれない、低負荷な折りたたみ。
• 大量の画像が含まれたり、#includexを多く含む折りたたみはこちらを利用するとページの読み込みが軽くなる。
• 二つ目の引数(下記例で「,,」としている部分)にopenを指定すると折りたたみが開かれ#foldと全く同じ挙動になる。
  closeがデフォルトなので基本的に何も記述しなくてOK。
• 三つ目のid引数にはページ内で固有のIDを指定する。
  省略可能だが、設置したページを他ページに引用した際に、意図しない引用の挙動を防ぐことができる。

#lazy_fold(もっと見る,,id01){{
隠されていたテキスト
複数行
複数行
}}

• 【注意】#contents や #contentsx はページの最上位構造で処理されるように設計されているらしく、遅延読み込みの #lazy_fold の内部では正しく動作しない。
  • #include/#includex を使って読み込んだ内容に #contents が含まれていても、#lazy_fold で囲んでいる場合は目次は表示されない。
  • 代替案として、 #contentsx(page=ページ名) で引用先ページの目次を疑似的に作成することはできる。
     

低負荷な折りたたみ：#lazy_accordion

• #lazy_foldのaccordion版。

#lazy_accordion(もっと見る,***,close,id02){{
隠されていたテキスト
複数行
複数行
}}

タブ：#tab

▶ 公式マニュアル：Tab
複数の情報ブロックをタブで切り替えて表示できる。
必要な情報を選択して閲覧してもらったり、スクロールすることなくワンクリックで複数の情報を確認してもらう使い方が可能。

#tab_container([left|justify]){{{
#tab_content(タブ名1){{
ここにタブ1の内容を書きます。
}}
#tab_content(タブ名2){{
ここにタブ2の内容を書きます。
}}
}}}

#tab_container

タブ全体を囲むコンテナ。

• [left]：タブを左寄せ(※デフォルト)
• [justify]：タブを均等幅で配置

#tab_content(タブ名)

各タブのラベルと中身を定義する。

• タブの並び順は、上から書いた順に表示される。
• 最初に定義されたタブの内容が、初期表示として表示される。

• タブ名は他のプラグインで装飾できるが、「,」が含まれる場合は「"」で名前を挟む必要がある。

#tab_container(left){{{
#tab_content(【タブ名1】){{
【内容1】
}}
#tab_content(【タブ名2】){{
【内容2】
}}
#tab_content(【タブ名3】){{
【内容3】
}}
}}}

＜使用時の注意＞

• タブが横幅いっぱいになると、自動的に省略記号(…)が付加されてタブ名が見えなくなってしまうので、以下の数が目安。
  • PCの場合：おおよそ 5～7個程度
  • スマートフォンの場合：おおよそ 3～5個程度
• タブ内の高さ(内容のボリューム)も重要。
  高さがありすぎると、結局スクロールが必要になり、タブを切り替えた際にも再び上からスクロールする必要がある。
  各タブの内容は適度な高さに保つことで、全体の操作性が向上する。
   

画像の貼り付け

画像添付ボタン：&attachref

&attachref(,nolink,[サイズ],[表示テキスト]);

nolink

画像を拡大リンクにしないよう指定。nolink指定しない場合、拡大リンクになる。

サイズ

添付する画像の表示サイズを指定(幅x高さ)。
省略時は対象画像のサイズになる。幅を優先し、縦横比を保持する。

表示テキスト

ファイル名の代わりに表示する文字列や画像の代替文字列を指定できる。
指定しない場合は、ファイル名になる。このパラメタを指定する場合は、最後に記述する。

＜画像の添付方法＞

1. 添付ボタンを押し、 ファイルの選択 ボタンを押して任意のファイルを選択する。
   • ファイルの選択 ボタンにファイルをドラッグ&ドロップしても良い。
   • この時WIKIWIKIのファイルサイズ上限(512KB)を超過していると、下記の警告が出て画像が縮小されるので注意。

     ⚠ファイルサイズの上限を超えているため、縮小した画像を送信します。

2. アップロード ボタンを押す。

他のページに添付済の画像の貼り付け：&ref

&ref(画像/画像の名前.webp,nolink,[サイズ]);

• Wikiでよく使う画像(キャラやハーモニーのアイコン)は▶画像のページに添付されているので、毎回添付する必要はない。
  以下のようにキャラ名と表示サイズ指定するとアイコンを表示できる。

&ref(画像/キャラ名.webp,nolink,[サイズ]);

【例】&ref(画像/アンコ.webp,nolink,50x50);

画像の引用(ホスティングされた画像の貼り付け)：&ref

&ref([引用元の画像のURL],nolink,[サイズ],[表示テキスト]);

• 画像のURL：Xから公式ポストの画像を引用したい場合

1. ポストの画像を表示し、右クリックで「画像のURLをコピー」
2. URLの「?」以降の部分を拡張子(.jpg)に書き換える
   【https://pbs.twimg.com/media/GRIoM0vbYAA1qsJ?format=jpg&name=small】
   【https://pbs.twimg.com/media/GRIoM0vbYAA1qsJ.jpg】

【例】&ref(https://pbs.twimg.com/media/GRIoM0vbYAA1qsJ.jpg,nolink,250x250,Ver1.1);

外部コンテンツ埋め込み

Xポストの埋め込み：#twitter_tweet

プラグイン名は旧Twitterの名残り

#twitter_tweet( ID,明るさ,水平位置)

• ID : ポストのID（ポストの詳細を表示したURLの一番後ろの数字）
• 明るさ : defaultまたはdark
• 水平位置 : right, center, left

公式XのVer2.0告知ポスト
【https://x.com/WW_JP_Official/status/1874629181851513134】

#twitter_tweet(1874629181851513134,default)

• 小技：#cssboxと組み合わせることで表示を小さくできる。

#cssbox(max-width: 300px;){{
#twitter_tweet(1874629181851513134,default)
}}

YouTube埋め込み：#youtube

#youtube(ビデオID,横幅,高さ)

• ビデオID：動画URLの末尾（もしくは「watch?v=」以降）の英数字の部分。
• ちなみに時間指定したい動画を再生し、右クリックから「現時点の動画のURLをコピー」をクリックすると、クリックした時点での時間指定URLが取得できる。
  （このプラグインで埋め込みはできないが、補足情報を書く時などのリンクには使える）

公式動画『鳴潮』正式リリーストレーラー丨 荒波と踊れ
【https://youtu.be/jeIouRAxR1E】

#youtube(jeIouRAxR1E,500)

編集の小技プラグイン

コメント行(コメントアウト/編集画面のメモ書き)： //

//コメントアウトする記述

行頭に「//」を置くとページ表示上では見えない、編集フォーム上でのみ見ることができる文章が書ける。

• Wikiは大勢の人が編集するため、ほかの人が見てわかるように編集メモを残したりすることができる。
• 編集画面でまとめてコメントアウト・解除をすることもできる。
• コメント行は、他の要素と無関係に行単位でどの位置にも記述できる。
• コメント行は、前後の他の要素に影響を及ぼさない。
   

非表示のテキスト：&null

&null{テキスト};

• null で囲われた部分は非表示になる。
• テキスト自体は非表示になるが、#includexの引用(文字列指定)にはヒットする。
  この仕様を利用して、ハーモニー効果一覧のような他のページに引用するのに必要な文字列(この場合はハーモニー効果の名称)を&nullで差し込んでいる。
• ブロック型プラグインでも動作するが、#includex のオプション section の指定箇所より上に #null があると引用先で行がずれる不具合があるため、使用は非推奨。
   

ゼロ幅スペース：&shy

­

• 編集画面でのみ表示される文字。AutoAliasNameやプラグインの無効化に役立つ。
  数値参照文字と違い構文ハイライトで強調表示されるため、わかりやすいという利点がある。
   

空白文字(スペース)：&nbsp

    　： 無視・改行されない空白(スペースキーの半角スペースと同じ広さ)
    　：「 」より少し広い空白スペース
     ：「 」より広い空白スペース
     ：「 」より狭い空白スペース

• 行頭や表内にスペースを入れたい場合に使用。
  テキストでは単純にキーボードの　空白　でもOK。ヘッダ行にスペースを入れる場合は空白文字を使用しないと表示が崩れてしまう。
• スマホで見ると全部nbspの幅になる？(機種によるかも)
   

自動折返しを無くす：#nobr / &nobr

#nobr{{
テキスト
テキスト
}}

• 文字、表組み、画像等、全ての要素がページ幅で折り返さなくなる。
• ページ幅を超えた場合はスクロールによって閲覧できる。
• スマホでの閲覧も考慮に入れ、文章を含む表での使用は慎重に。

&nobr{テキスト};

• 行内で囲った部分のテキストの折り返しを無くす。
• 主に一覧表などのスマホ表示時の横幅を最低保証するために、長文が入る一覧表のヘッダ行に使用している。
  (例 ▶ 料理一覧 武器/長刃 NPC)
  適宜「空白文字」と組み合わせて使用するのがおすすめ。

＜ヘッダ行にnobrと空白文字を入れて列幅を制御＞
表示幅が狭くても、アイコン画像のサイズなどが確保される。

画像	レシピ	テキスト	地域
	ピザ・トロピカーレ	リナシータ料理の異端児。ピザ生地にヤブヘビイチゴの実のソースとチーズ、そして…クラウナップル！？甘酸っぱい香りがたまらない、新感覚ピザ。でも、このピザについて、以下の3つの掟は絶対に守ってください！ 1.ラグーナ人の前ではピザ・トロピカーレについて言及してはいけない。 2.ラグーナ人の前ではピザ・トロピカーレについて言及してはいけない。 3.ラグーナ人の前ではピ……	ラグーナ

コード

 |~&nobr{ 画像 };|~&nobr{ レシピ };|~&nobr{    テキスト    };|~&nobr{地域};|h
 |BGCOLOR(#333):&ref(料理/ピザ・トロピカーレ.webp,nolink,48x48);|ピザ・トロピカーレ|リナシータ料理の異端児。ピザ生地にヤブヘビイチゴの実のソースとチーズ、そして…クラウナップル！？甘酸っぱい香りがたまらない、新感覚ピザ。でも、このピザについて、以下の3つの掟は絶対に守ってください！ &br;1.ラグーナ人の前ではピザ・トロピカーレについて言及してはいけない。&br; 2.ラグーナ人の前ではピザ・トロピカーレについて言及してはいけない。&br; 3.ラグーナ人の前ではピ……|ラグーナ|

＜制御なしだとこうなる＞
アイコン画像が小さくなったり、極端に縦書きになったりしてしまう。

画像	レシピ	テキスト	地域
	ピザ・トロピカーレ	リナシータ料理の異端児。ピザ生地にヤブヘビイチゴの実のソースとチーズ、そして…クラウナップル！？甘酸っぱい香りがたまらない、新感覚ピザ。でも、このピザについて、以下の3つの掟は絶対に守ってください！ 1.ラグーナ人の前ではピザ・トロピカーレについて言及してはいけない。 2.ラグーナ人の前ではピザ・トロピカーレについて言及してはいけない。 3.ラグーナ人の前ではピ……	ラグーナ

ブロック要素にインライン要素を有効にする： ""

一部のプラグインは  " (ダブルクォーター[2+shiftで入力])で囲うと、インライン書式が使えるようになる。

＜#fold / #navfold＞

#fold("&ref(画像/焦熱.webp,nolink,20x20);#foldに画像を入れる"){{
隠されていたテキスト
複数行
複数行
}}

#foldに画像を入れる

隠されていたテキスト
複数行
複数行

＜#shadowheader＞

#shadowheader(3,"&ref(画像/凝縮.webp,nolink,16x16);shadowheaderに画像を入れる")

部分編集の追加：#areaedit

• 部分編集できるリンクを追加するプラグイン。複雑なソースがあっても編集事故を減らせるかも。

#areaedit(btn:編集リンク)
-リンク名は自由に変更可能
-編集リンクは自動的に右寄せになりる
#areaedit(end)

負荷対策：#fcache

#fcache{{
テキスト
}}

• 特定のプラグイン表示やデータ取得に時間がかかる場合は #fcache を使うことで、ページを表示するたびに都度実行されるような処理の重いプラグインの結果を一時保存し、次回の表示を高速化できるようになる。
• 一部の処理が重い部分に限って使うように設計されているため過度に使う必要はない。
  使用するなら#includeをたくさん並べて使用する場合。（例：集音の内容一覧）

• #fcacheの中にinclude系プラグインを置いていた場合、引用元の編集がすぐに反映されない時がある。
  キャッシュが更新されるタイミングで反映されるため数時間後にはちゃんと更新される。
  また、引用後のページを更新すると即時反映される。
• 2024年11月までは#ecacheプラグインだったが、以降は#fcacheに移行した。
   

上級者向けプラグイン

正規表現

後述の#includexと#contentsxで使うことがあるので、軽く知っておくと理解がスムーズかもしれない。
（とはいえ実際の使用箇所にはコメントアウトで編集方法が書いてるので、全然覚えなくても大丈夫です）

正規表現とは「文字のパターン」を指定して、文字列の中から特定の情報を探したり置き換えたりするためのルール（記号の組み合わせ）のこと。

目次の調整・#contentsの拡張版：#contentsx

#contentsx(オプション)

• #contents の拡張版で、目次に表示する節に条件をつけたり、見出しレベルを選べたり、他のページの節を呼び出したりできる。

 ＜サンプル＞

#contentsx(depth=1:2)

• 見出しレベル1-2の節のみを目次化(レベル3の小見出しは目次に表示しない)
• キャラの詳細ページなど細かい見出しまで表示すると目次がとても長くなってしまうページに多用している。

#contentsx(include=off)

• include(引用)部分の節を目次に表示しない

他のページを引用（取り込み）する：#include

#include(ページ名[,title|,notitle] )

• 記述した位置に指定したページを挿入する。複数のページをまとめて表示し、1つのページのように表示できる。
• ページ名には挿入するページを指定する。
  • 第2引数にnotitleを指定すると、引用元ページ名の表示を消す。titleはその逆。

• 1ページに多用すると重くなるので注意。
• 1ページあたりの目安上限は合計60となっている。それ以上設置することもできるが、負荷パネルに警告が表示されるのでなるべく避けたい。
• 多用する場合は#fcacheを使用して負荷を軽減させることも検討。
   

ページの一部分の引用：#includex

#includex(ページ名[,オプション])

• 他のページを取り込んでページ内に表示するプラグイン。
• #include の拡張版で、ページ全体ではなく一部分のみを呼び出したり、呼び出す見出しレベルを選べたりする。
• ※ブラウザによってはソースの「\(バックスラッシュ)」の表示が「￥」表示になっているかもしれませんが、コピペには支障ないので気にしないでください。

見出しを指定して引用

【他キャラの反応のページから「漂泊者」の項目を引用して表示】

#includex(他キャラの反応,titlestr=off,firsthead=off,section=(filter=漂泊者))

1. 他キャラの反応のページから引用する
2. titlestr=off：引用元ページのタイトルを表示しない
3. firsthead=off：見出しを表示しない（見出しごと引用したい場合は指定しない）
4. section=(filter=漂泊者)：「漂泊者」に一致する見出しを指定

一覧から指定ワードの行を引用

【武器/増幅器から指定の武器名のある行を引用＋#tablesortをつける】

#tablesort{{
#includex(武器/増幅器,section=(filter=増幅器),titlestr=off,filter=\|[ch]|糸繰りの奇術|栄枯の湖岸|清らかな音)
}}

1. 武器/増幅器のページから引用
2. section=(filter=増幅器)：「増幅器」に一致する見出しを指定
3. titlestr=off：引用元ページのタイトルを表示しない
4. filter=(名称|名称)：引用したいキーワードの指定
5. \|[ch]：書式指定行(c)とヘッダ行(h)を指定（ヘッダ行が無いと#tablesortが動作しない）

指定ワードを除外して引用

【音骸一覧からハーモニー「軽雲」を指定して、音骸スキルで「変身」が必要な音骸を除外する】
ハーモニー効果のアイコン画像名を利用して引用行を指定している。

#includex(音骸一覧,titlestr=off,filter=\|[ch]|軽雲,except=変身)

1. 音骸一覧のページから引用
2. titlestr=off：引用元ページのタイトルを表示しない
3. filter=軽雲：引用したいキーワード（軽雲）の指定
4. except=変身：「変身」を含んだ行を除外

アイコン(Font Awesome)：&fa

▶ 公式マニュアル：&faプラグイン / Font Awesome

&fa(fa-[solid/regular] [アイコンの名前] fa-[サイズ], #[色]);

• Font Awesome のアイコンはフォント(文字)として使うことができる
  • アイコンはFont Awesomeのfree/brandsのタブにあるものが全て使える
  • アイコンの転送量はわずか数KB
  • 画像を用意しなくてもすぐに使える
  • 簡単な記述でアニメーション効果を付けたりすることができる
  • 表示サイズを大きくしても粗くならない

&fa(fa-solid fa-comment fa-fw,steelblue);

 ＜サンプル＞

&fa(fa-brands fa-youtube fa-fw, crimson);

 ＜サンプル＞ ←Youtube動画を貼るときのアイコンによく使う

|CENTER:170|CENTER:100|c
|表示|クラス|h
|&fa(fa-solid fa-comment fa-2xs, #fc6); sample|fa-2xs|
|&fa(fa-solid fa-comment fa-xs, #fc6); sample|fa-xs|
|&fa(fa-solid fa-comment fa-sm, #fc6); sample|fa-sm|
|&fa(fa-solid fa-comment, #fc6); sample|なし|
|&fa(fa-solid fa-comment fa-lg, #fc6); sample|fa-lg|
|&fa(fa-solid fa-comment fa-xl, #fc6); sample|fa-xl|
|&fa(fa-solid fa-comment fa-2xl, #fc6); sample|fa-2xl|

//見やすいように改行を入れている。
&fa(fa-solid fa-music fa-1x, #7bc);
&fa(fa-solid fa-music fa-2x, #7bc);
&fa(fa-solid fa-music fa-3x, #7bc);

#fa_ul{{
- &fa_li(fa-solid fa-check-square); 項目
- &fa_li(fa-regular fa-square); 項目
-- &fa_li(fa-solid fa-check-square); サブ項目
-- &fa_li(fa-regular fa-square); サブ項目
- &fa_li(fa-regular fa-square); 項目

&­fa_stack{&­fa(fa-regular fa-square fa-stack-2x);&­fa(fa-solid fa-plus fa-stack-1x);};
　
&­fa_stack{&­fa(fa-solid fa-square fa-stack-2x);&­fa(fa-solid fa-plus fa-stack-1x fa-inverse);};

ボックス型レイアウト：#flex_box

▶ 公式マニュアル：Flexbox

#flex_container([配置方法][,列幅の初期値][,折り返し方法]){{{
#flex_box([幅]){{
 ...
}}
#flex_box([幅]){{
 ...
}}
#flex_box([幅]){{
 ...
}}
}}}

• ボックス型レイアウトモード。
  flex_containerとflex_boxを入れ子にすることで水平方向に並べることができ、コンテンツの幅によって折り返される。

#flex_container(flex-start){{{
#flex_box(幅){{
内容
}}
#flex_box(幅){{
内容
}}
}}}

• 基本的にはこれでいい。幅も省略可だが、内容に長文テキストがある場合は幅を合計1100(Wikiの表示幅)以内に指定しないと横に並ばなくなってしまう。
• 使用例 ▶ キャラページのステータス、逆境深塔

レスポンシブレイアウト：#responsive_layout

▶ 公式マニュアル：レスポンシブレイアウト

#responsive_layout_container(S){{{
#responsive_layout_item(8){{
内容
}}
#responsive_layout_item(4){{
内容
}}
}}}

• 基本的なコードの構造は #flex_box と同じ。
  横並び時の横幅がこちらの方がちょっと広い。自動的に等間隔に並ぶので、左寄せにしたい時などは向かない。
• デスクトップ時の段組の比率が内容によって変わるのを防ぐには、responsive_layout_item に 1 ～ 12 の数値を指定する。
  合計が12になるように調整すると綺麗に幅が分配される。
  （数値に px をつけて、特定の列の幅をピクセル固定値で指定することもできる。）
• responsive_layout_container(レイアウト指定) のデフォルトは S 。
  • N：モバイルデバイスを含む全てで常に水平レイアウト
  • S：デスクトップとタブレットでは水平だが、モバイルデバイスでは垂直になる
  • M：デスクトップでは水平だが中間サイズ (タブレット) 以下では垂直になる
  • L：デスクトップでも常に垂直になる
• 使用例 ▶ 編成集
   

CSS形式のレイアウト：#cssbox

▶ 公式マニュアル：cssbox

#cssbox(プロパティ){{
テキスト
}}

• CSSの書式をボックス型で適用するプラグイン。CSSの知識がすこし必要だが、自由で多様な装飾が可能。
• margin,padding,borderなどのプロパティ（CSSの設定項目）が使える。
• プロパティの値は 上（top）→ 右（right）→ 下（bottom）→ 左（left）のように、時計回りの順番で指定する。
  • 値を1つだけ指定した場合、四辺すべてに対応する。
  • 値を2つだけ指定した場合、 上下 → 左右 の順番に対応する。

使用例

透明枠

#cssbox(max-width:800px;)
内容
}}

• 枠のない透明なボックス。幅制限をすることで画面幅の広いPCでも長文が少し読みやすくなる。
  （使用例：キャラのストーリー）

シンプルボックス

#cssbox(border: solid silver 1px; margin: 0 24px 0 13px; padding: 0 8px;){{
内容
内容
}}

フレーバーテキストボックス

#cssbox(padding:1px 15px; background-color: whitesmoke; border:1px solid #e5e5e5; border-radius:4px; margin-bottom:5px; max-width:500px){{
内容
}}

幅伸縮テキストボックス

#cssbox(padding:1px 15px; background-color: whitesmoke; border-radius:4px; margin:5px 0; width:fit-content){{
内容
}}

点線

#cssbox(margin: 0px; width: 100%; border-bottom: 1px dotted #bbb;)

boxにしないことで ↑このように ただのラインにもできる。通常の----と比較して存在感ひかえめ。

応用

 [[&ref(漂泊者/漂泊者.webp,nolink,192x192,漂泊者);>漂泊者]]
 #cssbox("background-image: linear-gradient(0deg, #111 30%,#aaa 100%); height:295px; width:192px; margin-top:-257px; text-align:center; vertical-align: bottom;"){{{
 #cssbox(margin-top:-90px;){{
 &ref(画像/不明.webp,nolink,80x80,不明);
 }}
 #cssbox(margin-top:-64px){{
 &font(serif){&color(wheat){&size(18){''&ruby(ひょうはくしゃ){漂泊者};''};};};
 }}
 }}}