先ずはサイトを作ろう
何をするにしてもWikiがなくては…ということで、サイトを作りましょう。
もし、あなたがWikiDotアカウントを持っているなら、このページ上部右側にもある"マイアカウント"からプロフィールページにアクセスしましょう。そして、「アクティビティ」、「メッセージ」などが並ぶリストから「サイト」を選んで、そこにある「+ サイトを作る」をクリック/タップします。
すると、「✓ Wikidotで新しいサイトを作る」というフォームが現れます。
タイトルは、サイトの左上に表示されるサイト名で、SCP-JPWikiだと「SCP財団」となります。
タグラインはサイト名の下に表示される文字列で、SCP-JPWikiだと「確保、収容、保護」にあたります。
Webアドレスは「[フォームに入力した文字列].wikidot.com」となるので、フォームには日本語の他、一部記号を入力できません。
続いてテンプレートですが、「Personal Blog」を選択してください。黒い猫がこちらをのぞき込んできているタブですね。
最後にアクセスポリシーです。利用規約を読み終わって異論がなければチェックボックスに✓を入れましょう。そして「自分のWikidotサイトを入手」をクリック/タップすれば、晴れてあなたもそのサイトの最高管理者です。
sigma-9を適用してSCP風にしよう
さて、サイトが手に入ったので、SCP風にして見慣れた形にしていきましょう。
先ず、1番最初に登場したプロフィールページの「サイト」に移動すると、先程作ったサイトの項に"役職 最高管理者"と表示されているはずです。そのままその下に目を移すと、「Admin Panel」という設定ページへのリンクがあります。
アクセスすると、「ダッシュボード」、「主要な設定」などと設定項目が並んでいるので、「デザイン」を選択した後「テーマ」を選択しましょう。この時、タブレット端末やスマートフォンを使用している場合は、リストのピクトグラムが描かれたボタンがあるのでそこをタップして下さい。
そうしたら「wikidot」、「コミュニティ」…などとまたズラッと出てくるので、「外部の」を選択しましょう。そして出てきた"URL"のブロックに
http://ja.scp-wiki.net/component:theme/code/1
を入力して、忘れずに「変更を保存」してください。
ちなみに、このアドレスを検索すると「サイトのテーマ(SCP-シグマ-9)」がヒットするはずです。これこそ紛うこと無き、sigma-9、その人?です
ついに、ねんがんの エスシーピーふうサイトを てにいれたぞ!
しかし、お気づきだと思いますが、この時点ではサイドバーやトップバーは使いづらいですし、スマートフォンやタブレット端末用の表示が出来ません。第II章では、サイトに基本的なカスタムを施して、実用に耐えうるものにしていきましょう。
トップページを整える
ではサイトの顔を整えましょう。以下の構文をトップページに貼り付けてみてください。
この構文の2段目にあるのが、幾多の初心者を惑わせた警告表示です。個人Wikiごとに特色があるので、各所回ってみるのも面白いものです。ぜひ思い思いの警告表示に変えて、トップページに貼り付けましょう。
また、点線の上にある[[module CSS]]から始まるかたまりは、ページの題名を消す為の構文です。
[[module CSS]]
#page-title {display:none;}
[[/module]]
----
[[div style="text-align: center; color: #600;"]]
[[div class="unmargined"]]
警告:
[[/div]]
[[div class="unmargined" style="font-size: 400%; font-weight: bold; margin: 2px 0 5px;"]]
機密指定
[[/div]]
[[div class="unmargined"]]
財団データベースへの許可無きアクセスは固く禁止されています
違反者は追跡、特定、拘留されます
[[/div]]
[[/div]]
----
[[div class="content-panel centered standalone"]]
[[size 90%]]SCP財団日本支部、及びSCP Foundationのメインテーマ **Sigma-9** は[[user Aelanna]]氏によって制作され、クリエイティブ・コモンズ・ライセンス-表示-継承 3.0([[[3.0([[[https://creativecommons.org/licenses/by-sa/3.0/deed.ja |CC-BY-SA]]])の元で使用されています。
[[/size]]
[[/div]]
更に、トップバー上の灰色のバーが気になる人は、右上のバツボタンから設定にアクセスし、✓を外しましょう。
サイドバーを整える
サイトのトップバーに、「Home」、「Pages」などのボタンが並んでいますが、その1つに「Admin」があります。そこを開き、「Edit side menu」からサイドバーを編集していきましょう。
ここは通常のwikidot構文のリンク構文が使えるので、初心者でもカスタムしやすい上に、サイトの使い勝手を向上させるにはいち早くカスタムしたい所です。せっかくですからSCPWiki風のアイコンがついた格好いいモノにしてみましょう。
まず、以下の構文をコピペして置き換えます。
[[div class="side-block"]]
[[module NewPage button="新規ページを作成" size="21"]]
[[/div]]
----
[[div class="side-block"]]
[[div class="menu-item"]]
[[image home.png]][/ メインページ]
[[/div]]
[[div class="heading"]]
記事
[[/div]]
[[div class="menu-item"]]
[[image series.png]][[[in-writing|作成中の記事]]]
[[/div]]
[[div class="menu-item"]]
[[image series.png]][[[works|作成済の記事]]]
[[/div]]
[[div class="heading"]]
サイト
[[/div]]
[[div class="menu-item"]]
[[image main.png]][[[system:recent-changes|最近の更新]]]
[[/div]]
[[div class="heading"]]
リンク
[[/div]]
[[div class="menu-item"]]
[[image default.png]][*http://ja.scp-wiki.net/ SCP-JP]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][*http://www.scp-wiki.net/ SCP-EN]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][*http://scp-int.wikidot.com/ SCP-INT]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][*http://scp-jp-sandbox3.wikidot.com/start サンドボックス3]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][*http://scp-jp-sandbox2.wikidot.com/start サンドボックス2]
[[/div]]
[[div class="menu-item"]]
[[image forum.png]][*http://ja.scp-wiki.net/forum:start/ SCP-JPフォーラム]
[[/div]]
[[div class="menu-item"]]
[[image forum.png]][*http://ja.scp-wiki.net/chat-guide/ チャット]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][*http://njr-sys.net/ Nijiru-System]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][*http://scpper.com/ ScpperDB]
[[/div]]
----
[[div class="side-block" style="background-color: #fff0f0;"]]
[[collapsible show="管理" hide="管理"]]
[[div class="menu-item"]]
[[image main.png]][/_admin サイトマネージャ]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][[[system:list-all-pages|すべてのページ]]]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][[[system:members|サイトメンバー一覧]]]
[[/div]]
[[div class="menu-item"]]
[[image default.png]][[[nav:side|サイド]]] | [[[nav:top|トップ]]] | [[[component:theme|テーマ]]]
[[/div]]
[[/collapsible]]
[[/div]]
~~~~
[[a href="#" class="close-menu"]]
[[image black.png style="z-index:-1; opacity: 0.3;"]]
[[/a]]
[[module css]]
.scpnet-interwiki-wrapper {
width: 20em;
margin-left: -4.5px;
margin-top: -5px;
}
.scpnet-interwiki-frame {
height: 300px;
width: 20em;
border: none;
}
@media (min-width: 768px) {
.scpnet-interwiki-frame {
height: 300px;
width: 18em;
}
.scpnet-interwiki-wrapper {
width: 18em;
}
}
[[/module]]
[[a href="#" class="close-menu"]]
[[image black.png style="z-index:-1; opacity: 0.3;"]]
[[/a]]
残念ながら、これをコピペしただけでは完成しません。[[image]]で呼び出している画像データがサイトにないからですね。
そこでSCP-JPWikiのサイドバーを設定しているこのページにアクセスしてください。そして、ページ下部の「ファイル」を選択後、アップロードされている全てのファイルをダウンロードしましょう。このファイル達を先程構文を貼り付けたページにアップロードします。アップロードの場合は「ファイル」を選択した後、「コンピュータからファイルをアップロードする」でアップロードしましょう。
アップロード後、ページをリロードすれば見慣れたサイドバーが完成しているはずです。
なお、"作成中/作成済の記事"のリンク先ページはまだ存在しないはずなので、リンクにアクセスしページを作成した後、SCP-JPWikiで記事を作るようにページ名を日本語に変更したり、リンクを貼り付けるなり、カスタムを施してください。それらに役立つ構文はWikidotシンタックスにまとめられています。
また、構文の先頭にあるまとまりはページ作成モジュールです。ここに入れた文字列がwebアドレスのスラッシュ以下の文字列になります。
新たにサイト内リンク先を追加する場合は以下の構文を参考にしてください。ページ名というのはサイトURLのスラッシュ(/)より右にある文字列です。ページ作成時に入力し、日本語に変更する前に「ページのタイトル」に表示されていたアルファベットと各種記号を指します。
[[div class="menu-item"]]
[[image default.png]][[[〈ページ名〉|〈表示するテキスト〉]]]
[[/div]]
サイト外リンク先を追加する場合は以下の構文を参考にしてください。
[[div class="menu-item"]]
[[image default.png]][[[*〈リンク先のサイトURL〉|〈表示するテキスト〉]]]
[[/div]]
また、[[image]]の部分をアップロードした任意のアイコン素材のファイル名に変えれば、アイコンも変えることが可能です。
トップバーを整える
先程、サイドバーをカスタムするために先程通過したトップバーの「Admin」にある、「Edit this menu」から、トップバーを編集しましょう。正直サイドバーをカスタムした現状、トップバーをまたカスタムする必要性は低いので、これは先人の教えに従って、以下の構文に書き換えましょう。この作業はスマートフォンでバーを閲覧する為に必要なのです。
[[div class="top-bar"]]
* [/ Home]
* [# Pages]
* [[[About]]]
* [[[Contact]]]
* [[[Favourites]]]
* [[[Gallery]]]
* [# Admin]
* [[button edit text="Edit page"]]
* [[button print text="Print page"]]
* [/nav:top/edit/true Edit this menu]
* [/nav:side/edit/true Edit side menu]
* [/system:list-all-categories Page categories]
* [/system:recent-changes Recent changes]
* [/admin:themes Change theme]
* [[[/_admin|Manage site]]]
* [# Help]
* [/help Wiki syntax]
* [/modules-reference Modules reference]
[[/div]]
[[div class="mobile-top-bar"]]
[[div class="open-menu"]]
[#side-bar ≡]
[[/div]]
* [/ Home]
* [# Pages]
* [[[About]]]
* [[[Contact]]]
* [[[Favourites]]]
* [[[Gallery]]]
* [# Admin]
* [[button edit text="Edit page"]]
* [[button print text="Print page"]]
* [/nav:top/edit/true Edit this menu]
* [/nav:side/edit/true Edit side menu]
* [/system:list-all-categories Page categories]
* [/system:recent-changes Recent changes]
* [/admin:themes Change theme]
* [[[/_admin|Manage site]]]
* [# Help]
* [/help Wiki syntax]
* [/modules-reference Modules reference]
[[/div]]
Wikiをスマホに対応させよう
最低限シリーズ、ラストです。サイトのトップページを開いてください。
ページの下部にはページのソースから隠された文を見るために使ったりする「+オプション」がありますが、その中にある「メタを編集」とその次に出てくる「新しいメタタグ」をクリック/タップして下さい。
そうしたら、name=""の部分に「viewport」、content=""の部分に「width=device-width,initial-scale=1」と入力して「全てのページに追加」を選択しましょう。
これでスマートフォン表示への対応、完了です。もし、これを完了してもスマホ表示になっていない場合は、「トップバーを整える」の項でトップバーを変更していない可能性があるので、一度確認してみて下さい。
もし、あなたの個人wikiを複数人で使うとなれば作成されるページも当然沢山のものになるでしょう。
ここでは「最近作成された記事」、「最近編集された記事」を導入していきます。
最近作成された記事
先ずは、新規ページ作成モジュールから、適当なページ名(ちなみに、"most-recently-created" がSCP-JPWikiでは使われています)でページを作りましょう。
そして、以下の構文を貼り付けましょう。
[[module CSS]]
.content-panel .content-type-title > p {
margin: 0;
}
.content-panel .content-type-title {
font-size: 120%;
font-weight: bold;
padding: 5px 20px;
background-color: #666;
color: #fff;
border-radius: 8px 8px 0 0;
box-shadow: inset 0 1px 1px rgba(255,255,255,.8),
inset 0 15px 1px rgba(255,255,255,.2),
inset 0 15px 10px rgba(255,255,255,.2);
}
.content-panel .content-type-description {
padding: 0 20px;
text-align: justify;
}
.content-panel.content-row .content-type-description {
padding: 5px 20px;
}
table.listpages-table {
width: 100%;
}
tr.listpages-table-head th {
background-color: #666;
color: #fff;
text-align: center;
}
tr.listpages-table-head th:first-child {
text-align: left;
}
tr.listpages-table-body td {
vertical-align: top;
text-align: center;
}
tr.listpages-table-body a {
word-break: break-all;
}
tr.listpages-table-body td:first-child {
text-align: left;
}
[[/module]]
[[div class="content-panel standalone content-row"]]
[[div class="content-type-title"]]
最近作成された記事
[[/div]]
[[div class="content-type-description"]]
[[module ListPages order="created_at desc" perPage="30" separate="false" rss="最近作成された記事" category="_default,author"]]
[[head]]
[[table class="listpages-table"]]
[[row class="listpages-table-head"]]
[[hcell style="width: 40%;"]]ページ[[/hcell]]
[[hcell style="width: 20%;"]]作成日[[/hcell]]
[[hcell style="width: 20%;"]]作成者[[/hcell]]
[[hcell style="width: 10%;"]]コメント[[/hcell]]
[[hcell style="width: 10%;"]]評価[[/hcell]]
[[/row]]
[[/head]]
[[body]]
[[row class="listpages-table-body"]]
[[cell]]%%title_linked%%[[/cell]]
[[cell]]%%created_at|%Y年%m月%d日 %H:%M|agohover %%[[/cell]]
[[cell]]%%created_by_linked%%[[/cell]]
[[cell]]%%comments%%[[/cell]]
[[cell]]%%rating%%[[/cell]]
[[/row]]
[[/body]]
[[foot]]
[[/table]]
[[/foot]]
[[/module]]
[[/div]]
[[/div]]
貼り付けたら、サイドバーからアクセスできるようリンクを追加しておくことを忘れずに。
最近編集された記事
これも最近作成された記事と同じです。適当な名前として、SCP-JPWikiでは、"most-recently-edited"が使われています。構文は以下のものです。
[[module CSS]]
.content-panel .content-type-title > p {
margin: 0;
}
.content-panel .content-type-title {
font-size: 120%;
font-weight: bold;
padding: 5px 20px;
background-color: #666;
color: #fff;
border-radius: 8px 8px 0 0;
box-shadow: inset 0 1px 1px rgba(255,255,255,.8),
inset 0 15px 1px rgba(255,255,255,.2),
inset 0 15px 10px rgba(255,255,255,.2);
}
.content-panel .content-type-description {
padding: 0 20px;
text-align: justify;
}
.content-panel.content-row .content-type-description {
padding: 5px 20px;
}
table.listpages-table {
width: 100%;
}
tr.listpages-table-head th {
background-color: #666;
color: #fff;
text-align: center;
}
tr.listpages-table-head th:first-child {
text-align: left;
}
tr.listpages-table-body td {
vertical-align: top;
text-align: center;
}
tr.listpages-table-body a {
word-break: break-all;
}
tr.listpages-table-body td:first-child {
text-align: left;
}
[[/module]]
[[div class="content-panel standalone content-row"]]
[[div class="content-type-title"]]
最近編集された記事
[[/div]]
[[div class="content-type-description"]]
[[module ListPages order="updated_at desc" perPage="30" separate="no" rss="最近編集された記事"]]
[[head]]
[[table class="listpages-table"]]
[[row class="listpages-table-head"]]
[[hcell style="width: 40%;"]]ページ[[/hcell]]
[[hcell style="width: 20%;"]]編集日[[/hcell]]
[[hcell style="width: 20%;"]]編集者[[/hcell]]
[[hcell style="width: 10%;"]]コメント[[/hcell]]
[[hcell style="width: 10%;"]]評価[[/hcell]]
[[/row]]
[[/head]]
[[body]]
[[row class="listpages-table-body"]]
[[cell]]%%title_linked%%[[/cell]]
[[cell]]%%updated_at|%Y年%m月%d日 %H:%M|agohover %%[[/cell]]
[[cell]]%%updated_by_linked%%[[/cell]]
[[cell]]%%comments%%[[/cell]]
[[cell]]%%rating%%[[/cell]]
[[/row]]
[[/body]]
[[foot]]
[[/table]]
[[/foot]]
[[/module]]
[[/div]]
[[/div]]
こちらも貼り付けたら、サイドバーからアクセスできるようリンクを追加しておくことを忘れずに。
もし、あなたの個人wikiを複数人で使うとなれば(デジャヴュ…)、フォーラムやディスカッションを使用したくなるかもしれません。
ここではフォーラムとディスカッションの導入方法を紹介します。
まず、再びサイトの「Admin Panel」を開き、「フォーラム」を選択しましょう。項目の中に「設定」があるのでそれを更に開き、「Default nesting」のLevelを1に上げましょう。これを設定することでSCP-JPWikiの様にコメントに返信できるようになります。変更の保存も忘れずに。
次にフォーラムの設定項目から「Structure」を開き、ページ毎のディスカッションを有効にしていきましょう。まずは唯一あるグループ、「Hidden」にある「Edit」を選択。グループ名を適当に"Discussions"にでも変えてしまって、わかりやすくしましょう。まだ、グループタイトルの後ろには (hidden)の文字があるので、「Edit」の列にある「show」を選択し、フォーラムにページを表示させましょう。
せっかくですから、フォーラムディスカッションも作りましょう。1番下にある「+ 新しいグループ」を選択し、グループ名に"フォーラムディスカッション"と入力、できれば要約もうめて保存します。要約の部分はフォーラムグループの説明文になります。
できたてほやほやのフォーラムグループを確認したら「Add Category」を選択し、下位のカテゴリグループを作成します。カテゴリ名は適当に"雑談"とでもしておきましょう。あとから必要になればそれぞれ編集、追加してください。
ここまでできたら、1番下から「変更の保存」をしましょう。これをしないと今までの操作が水の泡に帰してしまいます。
次に権限の設定をします。再びフォーラムの設定項目に戻り、「パーミッション」を開きます。すると各権限についての表が現れるので、それぞれ設定していきましょう。ただ、"投稿(とスレッドのメタ)を編集"は著者だけに限定することを強く推奨しますし、匿名ユーザーへの権限付与は慎重に選択しましょう。ちなみに"Registered at Wikidot.com"はWikidotアカウントの所持者を指します。
また、フォーラムカテゴリの選択欄を選べば、カテゴリグループ毎に権限付与の設定ができます。
これでAdmin Panelでの設定は終了です。最後に以下のURLのページを作っていきましょう。例えば現在このエッセイ執筆用に使っているWikiはtesting-tark-iol.wikidot.comなので、"forum:start"を作る場合はURLの後ろにスラッシュを入れて、"testing-tark-iol.wikidot.com/forum:start"の様になります。これらのページを作る時は、編集ボックスの中身が空白ですが全く問題ないので、タイトルを日本語に変えたあとは「保存」して下さい。
forum:start
forum:category
forum:thread
forum:recent-posts
forum:new-thread
ページが全て完成したら、forum:startからフォーラムの各機能を実際に動かしてみて下さい。