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

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

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

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


ページ編集

edit_01.png

ページ下部の操作パネル

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

通常の機能

編集

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

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

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

評価

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

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

タグ

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

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

ディスカッション

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

履歴

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

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

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

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

ファイル

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

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

印刷

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

サイトツール

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

+ オプション

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

セクションを編集

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

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

追加

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

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

メタを編集

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

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

ウォッチャー

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

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

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

バックリンク

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

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

ページのソース

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

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

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

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

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

ページロック

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

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

名前を変更する

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

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

削除

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

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


フォーラム

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

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

各スレッドの機能

thr_01.png

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

新しくコメントを投稿する

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

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

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

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

返信

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

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

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

タイトルと説明を編集

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

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

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

ピン留め / スレッドをロックする / スレッドの移動

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

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

+ オプション

Permanent Link

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

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

編集

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

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

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

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

削除

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

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

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

カテゴリの機能

cat_01.png

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

新しいスレッドを作る

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

「スレッドタイトル」でスレッド名を、「サマリー」でスレッドの説明文を入力し、最初のポストを投稿すると、スレッドが立ち上がります。


PMの送受信

pm_02.png

PMが届いている状態

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

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

受信箱の確認

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

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

PMを送る

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

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

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

prf_01.png

プロフィールウィンドウ

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

そのプロフィールウィンドウの下部にある「プライベートメッセージを書く」から、PMの送信画面を開くことができます。

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

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

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

3. 新規にPMを作成する

pm_01.png

PMが届いている状態

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

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


Wiki構文

構文を使う

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

基本的な良く使う構文は 「Wiki構文」のガイドに、その他の構文を含む一覧は「Wiki Syntax(英語)」に載っています。

また、フォーラムでも「あなたのよく使う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ライセンス の元で利用可能です。