Wikidotのつかいかたエッセイ
評価: +114+x

みなさん、記事執筆はすすんでいますか?
私は今、SpaceEngineersと言うゲームにハマったせいで進んでいません

SCP-JPでは、様々なガイドでWiki構文やSCP記事の書き方に関する説明が為されています。
しかし、SCP-JPで使用しているWikiサービス「Wikidot」の使い方自体に関する説明は、殆どされてきませんでした。

このエッセイでは、この「Wikidot」自体の使い方について、ご説明します。

このエッセイはWikidotが日本語に対応していた時期に書かれたものですが、現在は英語表記となっているためエッセイ中の表記を一部変更しています。
現在、Wikidotを日本語化するChrome拡張機能がukwhatnukwhatn氏により開発されています。詳細はこちらを参照してください(この拡張機能は現在も開発途中のものであるため、一部日本語化されていない箇所もあるとのことです)。
この情報は 2020-08-17 のものです。


ページ編集

2020_edit_01.png

ページ下部の操作パネル

まずは、メインとなる「ページの編集方法」についてです。

通常の機能

Edit(編集)

ページの編集画面が開きます。ページタイトル、本文、変更の要約(後述)が保存できます。

基本的には、投稿内容を書く→「Preview」を見ながら見た目を調整する→「Save」で投稿する の流れです。具体的な使い方は、「SCP記事作成のガイド」や、「Wiki構文」を見ましょう。

注意点として、タイトルの直し忘れには気をつけましょう。よく忘れてしまいます。

Rate(評価)

投票した人の一覧を見ることができます。

評価をここから付けることもできますが、評価モジュールのない記事は、多くの場合評価対象としては認められていません。

Tags(タグ)

ページのタグ付けができます。付けて良いタグは「タグガイド」にまとめられています。

注意点として、タグの区切りは必ず半角スペースにする必要があります。

Discuss(ディスカッション)

フォーラムスレッドが開くリンクです。そのページに関するディスカッションをする場合はここを開きましょう。

History(履歴)

別名「リビジョン」です。Wikidotでは、ページの編集履歴が保存されています。

編集時の「変更の要約」は、ここに表示されます。

万が一「ページの内容を間違えたまま保存してしまった!」なんてことがあっても、ここから差戻しができます。やりかたは簡単、該当の保存履歴を探して、「V (View page revision)」で内容を確認、「R (Revert to revision)」で、完了です。

また、記事の作者を調べるときにも役立つでしょう。一番最初の編集者が、恐らく作者です。

Files(ファイル)

ページに画像等のファイルを添付する際に使用します。

但し、ハブページやフォーラム等の共用ページには、必要がなければ直接アップしないほうが良いでしょう。

Print(印刷)

印刷用のウィンドウが開きます。あまり使う機会は無さそうです。

Site tools(サイトツール)

サイトにあるページや下書きのリストが開きますが、これもあまり使う機会はありません。

+ Options(オプション)

更に応用的な使い方ができる、オプションの機能が開きます。

Edit Sections(セクションを編集)

編集時に「Hタグ(見出しタグ)」を使った場合、その見出しから次の見出しまでの一区切り(セクション)だけ、編集する事が出来ます。長い記事を編集する際、非常に便利です。

ただし、ページ内で「Tab構文」等を使用していると、うまく使用できない場合があります。この辺りはHTMLの知識が必要です。

Append(追加)

この機能は、既存のページ内容を編集せず、ページ末尾に新しい内容を、文字通り「追加」する事が出来る機能です。

使う機会は少ないかもしれません。

Edit Meta(メタを編集)

HTMLのメタタグを追加する機能です。

サイト全体に影響が出る可能性がある上、HTMLの知識が必要なため、触らない方が良いかもしれません。

Watchers(ウォッチャー)

ウォッチャー機能は、そのページの更新を監視しているメンバーの、一覧を表示する機能です。

Wikidotのデフォルト設定では、ページを訪れた時点で監視を始めるような設定になっています。監視をするとアカウントページのアクティビティに、更新通知が表示されます。

なお、ウォッチャー機能は、ウォッチ、お気に入りに登録する、など訳語がぶれているので、機能を理解するのは難しく、使いこなしている人はあまり居ないようです。

Backlinks(バックリンク)

このページが、どのようなページからリンクされているかを確認することができます。

但し、Moduleタグ等でリンクを生成している場合は、ここに表示されないようです。

Page Source(ページのソース)

ページを一切編集せずに、Wiki構文を確認することが出来るページです。

もし誰かの記事を参考にしたい場合、「編集」ではなく、こちらを使って構文を確認しましょう。こちらなら、間違えて保存してしまったり、ページロックを掛けてしまう可能性が無いため、誰にも迷惑がかかりません。

Parent(親)

いわゆる「パンくずリスト」を表示させることが出来る機能です。

親となるページを登録しておけば、自動でページ上部にパンくずリストが表示されます。

ガイド系の記事や、ハブページを作る時には、積極的に使いましょう。

Lock Page(ページロック)

スタッフ向けの機能です。ページの編集を制限する事ができます。

使う機会は殆どないでしょう。

Rename(名前を変更する)

ページのURLを変更する事ができます。※ページタイトルではありません!ページタイトルは「編集」で変更できます。

注意点として、一度作成した記事のURLを変更する場合、リンクを張っている記事一覧なども、手作業で変更する必要があります。ちょっと手間がかかるので、URLは出来るだけ変えないほうが良いでしょう。

Delete(削除)

ページを削除する事ができます。「ページを完全に削除する」を選択して削除すれば、ページが完全に削除されます。

削除のルールに関しては、「削除のガイドライン」をよく確認してください。


フォーラム

続いては、フォーラムの使い方についてです。

フォーラムの機能は、機能を使える人に制限がある場合があります。

各スレッドの機能

2020_thr_01.png

一般的なスレッドの画面(※画像はIkr_4185のテストサイトの物)

New Post(新しくコメントを投稿する)

新しくスレッドにポストする際は、こちらから投稿します。

但し、投稿に関してルールが決まっているスレッドが幾つかあります。初めてのポストの際は、「サイトルール」「サイトへの参加を希望される方へ」等を、よく確認してください。

また、そのカテゴリにピン留めされた 初めにお読みください といったスレッドがある場合もあります。そのスレッドだけでなく、「フォーラム」から、各カテゴリのスレッド一覧も確認してください。

使い方はページ編集と同じく、内容を書く→「Preview」で確認→「Save」でポストする の流れです。また、幾つか制限はありますが、Wiki構文を使うことができます。

Reply(返信)

他の人のフォーラムポストに、返信を付けることが出来ます。

普通の新規ポストと違う点は、新しいポストが、スレッドの一番下ではなく、返信先の下に追加される点です。

話題によっては、返信でまとめた方が、スレッドが見やすくなります。活用していきましょう。

+ More Options(追加のオプション)

Edit Title & Description(タイトルと説明を編集)

スレッドを建てた人と、スタッフが可能です。

スレッドのタイトルと、サマリー(スレッドの説明文)を変更する事ができます。

下書きスレッドなどで使える応用的な使い方として、サマリーに「【批評待ち】」「【投稿済み】」などを付けておくと、批評する人がコメントを付けやすくなります。

Stickness(ピン留め) / Lock Thread(スレッドをロックする) / Move Thread(スレッドの移動)

この機能は、スタッフしかできません。

それぞれ、スレッドをカテゴリ内の一覧上部で固定する、スレッドの新規書き込みを禁止する、スレッドを適切なカテゴリに移動する事ができます。

+ Options(オプション)

Permanent Link

そのポストへのリンクURLを知ることができます。

スレッドではなく、個別のポストへのリンクを貼りたい場合、このURLを使いましょう。

Edit(編集)

そのポストを書き込んだ人と、スタッフが可能です。

ポストの内容を編集する事ができます。

なお、こちらも編集履歴が残り、編集されたポストには「Last edited on 1 Jan 2017, 15:24 by Ikr_4185 Show More」のような表示が出ます。

過去の履歴を見たい場合、この「もっと見る」から履歴(リビジョン)を閲覧可能です。

Delete(削除)

ポストの削除は、スタッフしかできません。

よくある間違いとして、編集でポスト内容を空にする事がありますが、これは消えたことにはなりません。

もしポストを削除したい場合は、必ずスタッフへ依頼してください。

カテゴリの機能

2020_cat_01.png

一般的なカテゴリの画面(※画像はIkr_4185のテストサイトの物)

Create a new thread(新しいスレッドを作る)

新規スレッドを立てる事ができます。

「Thread title」でスレッド名を、「Summary」でスレッドの説明文を入力し、最初のポストを投稿すると、スレッドが立ち上がります。


PMの送受信

2020_pm_02.png

PMが届いている状態

Wikidotには、個人のアカウント宛にメッセージを送る「プライベートメッセージ」、通称「PM」という機能があります。スタッフとの連絡や、メンバー同士の個別のやりとり等で利用します。

サイトのページ最上部右側に、「renerd | My account ▼」のような表示があります。基本的には、PMはここから操作します。

受信箱の確認

「マイアカウント」の右に点滅する数字が出ている場合、それはPMが届いている事の通知です。PMの受信箱は、この数字をクリックすると、開くことができます。

また、「▼」をクリックして、「Messages」を開く事でも、受信箱を開くことが出来ます。

PMを送る

PMを送るには、大体 3通りの方法があります。どちらも、同じ送信画面を開くことができます。

なお、送信方法自体は、Gmail等の普通のメールと同じように送れるため、ここでは省きます。

1. 送り先のアカウントから直接送信する

2020_prf_01.png

プロフィールウィンドウ

フォーラム等で、メンバーのアイコン付きアカウント名をクリックすると、そのメンバーのプロフィールを開くことができます。

そのプロフィールウィンドウの下部にある「Write private message」から、PMの送信画面を開くことができます。

2. PMへの返信として送信する

先程の受信箱を開き、届いたPMを見てみてください。件名と本文の間の線に、「Reply | Delete」とあると思います。

この「返信」をクリックする事でも、PMの送信ができます。これは普通のメールの返信機能と、同じ使い方です。

3. 新規にPMを作成する

2020_pm_01.png

アカウント画面の「Message」タブ内の左側

受信箱を開くと、左側のメニューに「New message」というボタンがあります。ここをクリックすれば、PM送信画面を直接開くことができます。

宛先には、相手のWikidotアカウントを入力してください。


Wiki構文

構文を使う

Wikidot では、文章の装飾などに使うWiki構文を、フォーラムポストやPMにも使用する事ができます。

基本的な良く使う構文は 「Wiki構文」のガイドに、その他の構文を含む一覧は「Wikidotシンタックス」に載っています。

また、フォーラムでも「あなたのよく使うwiki構文を教えてください。」等、Wiki構文に関するスレッドが立っています。もし構文に関して詳しい人に聞きたい場合、「質問カテゴリ」にスレッドを立てましょう。

知らない構文を使ってみたい場合、サンドボックス等で試してみてください。

不具合が起きてしまった!そんな時

発展的なWiki構文を使用する場合、たまに間違えて著しい不具合を発生させてしまう事があります。
人間ですから、間違いはつきものです。

そんな時に、直す為のノウハウをご紹介します。

使うもの

  • パソコン
  • Google Chrome (他のブラウザでも出来ます)

あると良い物

  • HTML/CSS の知識
  • 落ち着く為の1杯のコーヒー

========================================

例として、フォーラムポストでエラーをおこしてみましょう(真似してはいけません)。

下記のような構文を、ポストに入れたとします。

[[div style="background: #ddd; padding: 20px; margin: 10px;"]]

hogehoge

[[/div]]

========================================

syn_01.png

background: #ddd; padding: 20px; margin: 10px;

表示は このようになります。

divタグは、HTMLタグの1つで、最も基本的な「囲み(ボックス)」を作ります。

background: #ddd; padding: 20px; margin: 10px; は、「背景を#dddに、ボックスの内側の余白は20px、外側の余白は10pxに」という設定をしている、CSSです。

========================================

ここで、敢えて不具合が起こるようなCSS構文を加えてみましょう。
position: absolute;top: 0;left: 0; という、囲みの位置を調整するCSSを追加します。

[[div style="padding: 20px; background: #ddd; margin: 10px; position: absolute; top: 0; left: 0;"]]

hogehoge

[[/div]]

========================================

syn_02.png

divのボックスが消えた

すると、divのボックスが何処かに居なくなります。
どこにいったのでしょう?

========================================

syn_03.png

スレッドタイトルに被るdivボックス

……スレッドの上の方に居ました。スレッドタイトルを隠してしまっています。

========================================

css_01.png

position: absolute; top: 0; left: 0;

position: absolute;top: 0;left: 0; は、「ボックスの位置を、絶対位置で、上から0px、左から0pxの位置に」という指定です。

絶対位置は、ボックスの入っている親ボックス1(図の青いボックス)を基準に、位置を指定するという意味です。

周りのボックスの位置は無視するため、他のボックスを隠してしまう事があります。

========================================

ではここで、もし「高さと横幅を、親ボックスのサイズぴったりにする」という設定を入れたら、どうなるでしょうか?
width: 100%; height:100%;というCSSを追加します。

[[div style="padding: 20px; background: #ddd; margin: 10px; position: absolute; top: 0; left: 0; width: 100%; height:100%;"]]

hogehoge

[[/div]]

========================================

syn_04.png

!?

……フォーラムページを覆い尽くし、スレッドタイトルはおろか、編集等のリンクさえ隠してしまいました。

直そうにも、編集画面が開けない状態です。

もしこの状態になったポストが「最近のフォーラム投稿」へ表示されれば、投稿一覧は全て「hogehoge」の灰色に沈むこととなるでしょう。さあ一大事です。

========================================

直す方法はいくつかありますが、最も汎用的な方法をご紹介します。

それは「ブラウザのデベロッパーツールを使って、問題のCSSを停止して、その隙に編集して直す」という方法です。

========================================

syn_05.png

Google Chrome デベロッパーツール

問題のある箇所(ここではdivのボックス)で右クリックし、「検証(I)」を選択してみてください。

Google Chrome の場合、「デベロッパーツール」というウィンドウが開きます。これは簡単に言うと、開発者がデバッグを行う為のツールです(※設定により、開き方が異なる場合がありますが、モノは同じです)。

現在、divボックスが、デベロッパーツールで選択された状態になっています。

========================================

さて、ここから問題のCSSを無効化してみましょう。

問題の根本原因となったのは、ボックスを絶対位置で指定する「position: absolute;」が入っていたことです。これが入っているために、本来ポストがあるべき位置を外れ、ページ全体を覆い尽くしてしまっています。これを外してやりましょう。

========================================

syn_06.png

赤枠で示した箇所

デベロッパーツールの右側の欄に、そのボックスに設定されているCSSの一覧が表示されています。

position: absolute; がありますね。

そのチェックボックスを外せば、一時的にCSSが無効化されます。

外してみましょう。

========================================

syn_07.png

position: absolute;を一時的に無効化した状態

問題となっていたdivブロックが、正常な位置に戻りました。「編集」も開けるようになっています。

あとは、実際に編集画面を開き、タグを直して保存してやれば、一件落着です。

========================================

付記

このエッセイは、2017-01-08 現在のものです。
Wikidotの仕様変更等により、内容が追記・修正される可能性があります。

また、必要な情報が増えれば、都度改訂が加えられます。

特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。