編集のイロハ

Last-modified: 2021-12-12 (日) 21:06:32

目次

文章の装飾などの方法

WIKIWIKIのサンプルページや整形ルールにだいたいのことが書かれています。
それを真似しつつ、ためしがきで練習してみてください。

 

文字の装飾

文字は太字にしたり、取り消し線をつけたり、色を変えたり、背景色をつけたり、いろいろな装飾をすることができます。
ほとんどのことはWIKIWIKIサンプルの文字装飾のページに記載されています。

  • 太字
    • ''（アポストロフィ2つ）で文字を囲むことで太字にできます。太字にしたい箇所を選択して　Bold　を押すだけでもOKです。
  • 斜体
    • '''（アポストロフィ3つ）で文字を囲むことで斜体にできます。同様に　Italic　を押すだけで出来ます。
    • メイリオフォントでは漢字カナに斜体が用意されていないため、斜体にできません。
  • アンダーバー
    • %%%（パーセント3つ）で文字を囲むことで文字に下線を引くことができます。同様に　underline　を押すだけで出来ます。
  • 取り消し線%%%
    • %%（パーセント2つ）で文字を囲むことで文字に取り消し線を引くことができます。
  • Wikiの書式を文字として使う
    • テキストを選択して数値文字参照を押すと、文字コードに変換します。
      [[]]、(())、***など、Wikiの書式になってしまう文字をテキストとして表示するときに利用できます。
  • 文字列の色・背景色を変更する
    • &color(文字色,背景色){文字列}; 　という記述で文字列の色や背景色を変更できます。
      色名またはカラーコードで指定できます。
    • テキストを選択して　色選択　をクリックすると、その範囲の色を簡単に指定できます。
  • 文字サイズを変更する
    • &size(サイズ){文字列};　という記述で文字列のサイズをpx単位で変更できます。
    • テキストを選択して　Size　をクリックすると、その範囲のサイズを簡単に指定できます。


  • 例えばこう書くと 
    ''太字にする''　'''斜体するABCDEFG'''　%%%下線を引く%%%　%%取り消し線を引く%%
&color(Red){赤字にする};　&color(Red,Black){赤字・黒背景にする};
&color(#0066ff){青字にする};　&color(#0066ff,#ccffcc){青字・薄緑背景にする};　
&size(20){20pxの文字にする};　&size(9){9pxの文字にする};
&color(#0066ff,#ccffcc){%%%''&size(20){%%20pxの青字・薄緑背景の太文字に下線と取り消し線を引く%%};''%%%};
  • こうなります。
    太字にする　斜体するABCDEFG　下線を引く　取り消し線を引く
    赤字にする　赤字・黄背景にする
    青字にする　青字・薄緑背景にする　
    20pxの文字にする　9pxの文字にする
    20pxの青字・薄緑背景の太文字に下線と取り消し線を引く
 

特によく使う便利な構文

  • リンク
    • ページ同士をつなぐものです！
    • ページ名を "[[" と "]]" で囲むと、そのページへのリンクになります。
    • 大文字・小文字含めて完全一致していないと正しくリンクされないことに注意してください。
      • 例えばこう書くと 
        [[ためしがき]]
      • こうなります
        ためしがき
    • 見出しには「アンカー」というものが自動で設定されます。
  • 見出し（セクション分け）
    • 行頭に「*」「**」「***」を置くと見出しになります。
      話題やコンテンツごとに見出しを追加すると、内容が見やすくなります。
      セクションごとの編集ができるのも便利です。
  • 箇条書き（リスト）
    • 行頭に「-」「--」「---」を置くと箇条書きになります。
    • 行頭に「+」「++」「+++」を置くと番号付きの箇条書きになります。
      • 箇条書きの次の行に文章を書くと、
        その箇条書きと同じ段落に文章が入ります。
        新たな段落から文章を書き始めたい場合、空白の行を開けてください。
  • コメントアウト
    • 編集に関するメモや、一時的に非表示にしておきたい記述は、コメントアウト機能を使うと隠すことができます。
      • 例えばこう書くと 
        ★この部分の記述は表示されます。
//★この部分の記述は隠れます。
      • こうなります
        ★この部分の記述は表示されます。
  • 改行
    • 単純にテキストエリア内で改行するだけでも改行されます。
    • 表組みの中など、改行すると書式が崩れてしまう場合は　&br;　と記述することで改行命令ができます。
      改行ボタン　を押すと挿入されます。
      • 例えばこう書くと 
        |1行目&br;2行目|
      • こうなります
        1行目
        2行目
  • 注釈
    • 文章を"(("と"))"で囲むと、その部分は注釈になります。注釈番号は自動で振られます。
    • 注釈の部分にカーソルを合わせるとツールチップが表示され、クリックするとページ最下部の脚注欄に飛びます。
    • こう書くと 
      フランメ寮((魔法学園の南側に存在する寮))
    • こうなります
      フランメ寮*1

表組みを作る

表組み
表組みの基本

  • |(バーティカルバー ) でセルを区切ることで表組み（テーブル）を作ることができます。|は「SHIFT+￥」で入力できます。
  • 複数の行で表組みを作る場合、各行の | の数が一致している必要があります。
    プレビュー機能を使ってよく確認してください。
  • >で水平方向に、~で垂直方向にセルを連結させることができます。
  • こう書くと 
    |セル1|セル2|セル3|
|セル4|セル5|セル6|
　
|セル1|>|セル3|
|~|セル5|セル6|
  • こうなります
    セル1セル2セル3
    セル4セル5セル6

    セル1セル3
    セル5セル6

表組みの装飾

  • 各セルは以下の記述で書式の装飾ができます。 
    表示位置　→　LEFT:　CENTER:　RIGHT:
セル内文字色、背景色　→　COLOR(色):　BGCOLOR(色):
文字サイズ　→　SIZE(サイズ):
  • 行末に c を記述すると、表示されない書式指定行となります。
    • こう書くと 
      |BGCOLOR(#eee):100|100|100|c
|COLOR(red):セル1|CENTER:セル2|RIGHT:BGCOLOR(yellow):セル3|
|RIGHT:セル4|LEFT:セル5|CENTER:セル6|
    • こうなります
      セル1セル2セル3
      セル4セル5セル6

ヘッダ・フッタ

  • 行末に h や f を記述すると、表組みのヘッダ・フッタになります。
    • こう書くと 
      |>|>|CENTER:100|c
|列1|列2|列3|h
|列1|列2|列3|f
|>|>|LEFT:|c
|セル1|セル2|セル3|
|セル4|セル5|セル6|
    • こうなります
      列1列2列3
      列1列2列3
      セル1セル2セル3
      セル4セル5セル6
 

画像の添付方法

ファイル(画像)を貼り付ける
編集画面で 添付 ボタンを押すと画像添付リンクが挿入されます。

  • こう書くと 
    &attachref;
  • こうなります
    [添付]

挿入された[添付]リンクをクリックするとファイルを選択してアップロードする画面に移行します。
アップロードが完了すると、元のページに画像が表示されています。

File not found: "attachref.png" at page "画像置場"[添付]

画像のオプション

  • 表示サイズ指定
    適正な表示サイズではない場合、表示サイズ指定のオプションを使います。
    元のサイズで表示&attachref(画像置場/flamme120.png);
    flamme120.png
    100pxで表示&attachref(画像置場/flamme120.png,100x100);
    flamme120.png
    50%で表示&attachref(画像置場/flamme120.png,50%);
    flamme120.png
 
  • リンクを貼らない
    デフォルトでは添付画像ファイルへのリンクが貼られます。これを消す場合は nolink オプションを使います。
    リンクを消す&attachref(画像置場/flamme120.png,nolink,50%);
    flamme120.png
 
  • 代替文字列
    マウスカーソルを合わせたときに表示される文字列を指定するオプションです。
    読み上げソフトを使ったときに画像の代わりに読み上げられる文章を指定する機能ですが、隠し文字のような使い方もできます。
    代替文字列を付ける&attachref(画像置場/flamme120.png,nolink,50%,代替文字列);
    代替文字列
 

ワンクッションを置く方法

いきなり情報を全部表示してしまうと、不都合なことがあります！
下のほうからではなく、上から順番に読んでほしい……
ネタバレになってしまうからワンクッション置きたい……
単純に文章量が多くてワッてなる……

そんなときに便利な構文があります！

  • 折りたたみ(＃fold)
    • 囲んだ範囲を折りたたみます。
      長くなりすぎたテキストを格納したり、ネタバレにワンクッション置きたいときに便利です。
    • ちゃんと閉じないとfold以下全てが折り畳まれちゃいます。最後は }} できちんと閉じましょう。
      一例
      • こう書くと 
        #fold(){{
1
2
3
}}
      • こうなります

        1
        2
        3

      • 最初から開いた状態で表示させる 
        #fold(番号,open){{
1
2
3
}}
      • こうなります
        番号

        1
        2
        3

  • 見出し付きの折りたたみ（#accordion）
    • こちらは囲んだ範囲を「見出し」付きで折りたたむことができます。
    • 見出しのレベルは　*、**、***　の3種類を指定できます。

      一例

      • こう書くと 
        #accordion(番号,***,close){{
1
2
3
}}
      • こうなります

        番号

        1
        2
        3

      • 最初から開いた状態で表示させる 
        #accordion(番号,**,open){{
1
2
3
}}
      • こうなります

        番号

        1
        2
        3

  • ネタバレを伏せる(&ntbr #ntbr)
    • ntbrタグを使うことで、クリックされるまで情報を隠すことができます。　詳細
      伏せたい情報を　"&ntbr{"　と　"};"　で囲むと、その情報は伏せられます。
    • 文章だけでなく画像や表組みを隠したり、伏せる色を指定することもできます。
    • 伏せた中にさらに
      • 例えばこう書くと 
        これは&ntbr{ネタバレ};です。
これも&ntbr(#90ee90){&attachref(画像置場/book.png,nolink,zoom);};です。
      • こうなります。
        これはネタバレです。
        これもbook.pngです。
 

困ったときは

編集画面を開いても編集したい箇所を探せないときは

ページ内検索を活用しましょう。
検索ボックスに入力した文字列の箇所を検索・ハイライト表示してくれます。

Windowsパソコンの場合は「CTRL+Fキー」、Macパソコンの場合は「Command+Fキー」で検索ボックスが表示されます。
モバイルSafariの場合、アドレスバーに文字列を入力→「このページ」をタップすることでページ内の検索・ハイライト表示ができます。
モバイルChromeの場合、右上メニューをタップ→ページ内検索を選択することで検索ボックスが表示されます。

zoom,ページ内検索
 

ページを見失ってしまったときは

画面右上のサイト内検索を使いましょう。

サイト内検索

ページのタイトルや、ページ内の記述の一部を入力して検索すると、その条件にあったページの一覧が表示されます。
その中から目的のページを探してみてください。

Tag: Wiki ガイド 編集方法

*1 魔法学園の南側に存在する寮