難解Wikidot構文
評価: +152+–x

Wikidotは非常にパワフルなWikiシステムです。そのため、限界に挑戦すると魔法のようなページを作ることができてしまいます。このページは、そのようなエソテリックなWikidotノウハウのまとめです。このページはテクニカルスタッフが管理しています。ここに追加したい機能があれば、スタッフまで連絡してください。

スタッフ一覧

htmlブロックを拡張しよう！

"Expand the HTML Block" Presents by:C-takeC-take

前提 htmlブロックとは

本機能はhtmlブロックという機能を拡張するものです。htmlブロックとはWikidotページ内にhtml構文によって描画するスペースを作る機能です。

htmlブロック内ではjavascriptというプログラミング言語を用いたギミックを作成する事が可能になります。

詳細はこちら⇒HTMLブロック

基本機能

　皆さん！こんな事で困った事はありませんか？1

+ こんな事

こんな時はこれで解決！その名も"scp-WikidotCss.css"と"scpHTMLblockCtrl"！実際に使ってみましょう。
+ デモンストレーション

え？htmlブロックに面倒くさい記述を入れたんじゃないかって？そんな事ありません！簡単に作れるように仕上げました！

使い方:
htmlブロックに以下の記述を入れてください。

<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>
<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<script type="text/javascript">
isHTMLblockHide = true;
</script>

ここに記事の文章を入れてね

<div id="scpHTMLblockResizeSwitch"></div>


たったこれだけ、htmlブロック内の上下に上で示した構文を入れるだけです！
　更に折り畳み文を入れる場合は（※上記の決まりきった構文を入力した前提です）

<collapsible show = "+ 折り畳み1" hide="- 閉じる">
ここに折り畳みの文章を入れてね
</collapsible>


とwikidotの構文とほとんど同じものを入れるだけです。またhideLocation="bottom"の場合は

<collapsible show = "+ 折り畳み2" hide="- 閉じる" hideLocation="bottom">
ここに折り畳みの文章を入れてね
</collapsible>


これもwikidotの構文と同じです。
　さて、では引用囲いをする場合はどうするかというと

<blockquote>
ここに引用したい文章を入れてね
</blockquote>


この様に引用で囲いたい文章の上下に"<blockquote>"と"</blockquote>"をつけましょう。

　さぁ、これでもっと自由にhtmlブロックが使えるようになりました。調子に乗ればこんな事も出来ますよ！

+ 折り畳み第1層目

このスクリプトを使ってhtmlブロックを使いこなそう！

注意: もしhtmlブロックを折り畳みの中に入れない場合は下記のように書いてください。

<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>

<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>

ここに記事の文章を入れてね

<div id="scpHTMLblockResizeSwitch"></div>


折り畳み文に入れる時の違いは下記の構文が入っているか否かです。

<script type="text/javascript">
isHTMLblockHide = true;
</script>

折り畳みの中にhtmlブロックを入れていない状態で上記の構文を使用しても問題ありませんが、しかしこの構文を使用すると、「このhtmlブロックが入った折り畳み文が開かれたかどうかの監視」をずっと続ける事になります。
この監視は折り畳み文が一度開かれれば終わりますが、該当するhtmlブロックが折り畳みに入っていない場合は監視が終わりません。つまり、無駄なプログラムがずっと動いている事になります。
　繰り返しますが、折り畳み文にhtmlブロックを入れていない状態でこの構文を入れても問題はありません。ただ無駄なのです。

高度な設定について: ここからはhtmlおよびcssの知識が必要となります。今回紹介した"scpHTMLblockCtrl"ですが、これはhtmlブロック内で書かれた下記構文

<collapsible show = "+ 開く" hide="- 閉じる">
折り畳み文
</collapsible>

これを下記のhtmlコードに書き換えます。

<div class="ParentCollasible">

<div id="scpCollasibleLink+n+0">

<span class="fake-link" onclick="scpRunCollasible('scpCollasibleLink + n',0)">+ 開く</span>


</div>
<div id="scpCollasibleLink + n + 1">

<span class="fake-link" onclick="scpRunCollasible('scpCollasibleLink + n',1)">- 閉じる</span>
<div>

折り畳み文


</div>

</div>

</div>

上記の内

id= "scpCollasibleLink+n+0"

のnには、実際には該当するcollapsibleが同html内の何個目のcollapsibleかを示す数値が入ります。ただし、この数は0から始まる事にご注意ください。
　具体例としては以下のようになります。

1個目のcollapsible: scpCollasibleLink00
2個目のcollapsible: scpCollasibleLink10

同時に

onclick="scpRunCollasible('scpCollasibleLink + n',0)"

という箇所は該当するcollapsibleの位置によって下記のように変化します。

1個目のcollapsible: scpRunCollasible('scpCollasibleLink0',0)
2個目のcollapsible: scpRunCollasible('scpCollasibleLink1',0)

以上の事から"scpHTMLblockCtrl"を使う場合、"ParentCollasible"というクラス及び"scpCollasibleLink + 任意の数値"という形式のidを使用する事はできません。
　また、文章の開閉ボタンはfake-linkというクラスのspan要素に囲まれている為、例えば

<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);

.specialCollapsible .fake-link{
display:block;
text-align:center;
cursor:pointer;
color:#000;
background-color:#EEE;
padding:2px;
margin:auto;
width:200px;
}

.specialCollapsible .fake-link:hover{
display:block;
text-align:center;
cursor:pointer;
color:#000;
background-color:#AAA;
padding:2px;
margin:auto;
width:200px;
}
</style>
<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<div class="specialCollapsible">
<collapsible show = "+ 折り畳み1" hide="- 閉じる">
<blockquote>
ここに折り畳みの文章を入れてね
</blockquote>
</collapsible>
</div>
<div id="scpHTMLblockResizeSwitch"></div>


のように折り畳み開閉ボタンのデザインを変更する事ができます。

　最後に"scpHTMLblockCtrl"のグローバル変数及びグローバル関数の名前の一覧を掲載します。本スクリプトを使用した上でjavascriptを組む場合、下記一覧に載っている名前は使用できないのでご留意ください。

scpHTMLblockUrl_array
scpHTMLblockIframe_hash
scpForResizeRandomNumber
scpHTMLblockResize_div_id
scpHTMLblockResize_iframe_id
scpHTMLblockResize_url
scpMonitoringTimeSpan
scpHTMLblockResizeSwitch
HTMLblockOldHeight
isHTMLblockHide
scpParentCollasibleClassName
scpCreateCollapsible
scpResizeHTMLblock
ctrlHideHTMLblockSize
scpRunCollasible
correctIframeSize

このスクリプトによって皆様の表現の幅が広がれば幸いです。

任意のタイミングでHTMLブロックをリサイズ！

※前述の決まりきった構文を守っている事が前提の話となります
皆さん！皆さんは例えばこんなギミックを作りたいと思った事はありませんか？

凡例:

  • 旧字は新字に変更する
  • ルビを加筆する

超現実主義私感
著: 古賀春江(1895～1933）

『アトリエ』第7巻1号超現実主義特集号、1930年1月、 p.53～58より

そう、つまりHTMLブロックの中でjavascriptを走らせて、HTMLブロック内の文章を次々と書き換えていくギミックですね。こういうのを作った時、こんな事に困った事はありませんか？

HTMLブロック内に長い文章を表示した後、短い文章に書き換えたらHTMLブロックの高さが伸びきったままになる

一度でもこういうのを作ろうとした人にはご共感頂けると思います。ただちょっと待ってください。上のHTMLブロック、文章の長さに合わせて大きさを変えていませんか？そう、実は本スクリプトのHTMLブロックのリサイズ機能は好きなタイミングで発動させる事ができるのです。

皆さんが作ったjavascriptの中で"correctIframeSize()"という関数を動かせば、そのタイミングでHTMLブロックのリサイズが行えます。

HTMLブロックの文章をJavascriptで書き換える時、その書き換えを行う関数の最後に

correctIframeSize();

というコードを挿入してみてください。

+ おまけ: 簡単なページ書き換えの方法

動画っぽい動画じゃない何かの作り方

有名な例

例えばこんなものが作れる

SCPの画像ボックスを使って、動画を入れる記事は有名なものだと、SCP-895がありますよね。今回はこういうものの作り方の情報共有です。

もしこれを丁寧なエッセイにしたら、凄まじい長さになると思うので、概要だけを掻い摘んで見ました。つまり、読者のhtmlとjsとcssの知識を前提にしています。わからないことがあれば、詳しそうなユーザーに聞いてくださいね！後、情報共有できそうなことがあったら是非教えてください！

基本的な考え方

動画やAnimated Gifを使わない

もちろん、動画やGifアニメをアップロードしても構いません。しかし、Gifアニメならまだしも動画だと埋め込みが困難です。
そして、これらのいずれもサイズが大きく、読み込みに時間がかかってしまいますし、何より監視カメラ感を出すためのタイムスタンプを入れることができません。したがって、動画やGifアニメなどの変化が起こらないファイルはSCP記事においては不利であるのです。

html+css+jsの組み合わせを全部アップロードして使おう！

SCP-845や、今回私が用意した例は、動画ではなく、JavaScriptでブラウザの読み込み時点で生成した映像です。ですから、軽く、タイムスタンプを押すことができて、実行時点で色々見た目が変わるという圧倒的な強みを持っています！

やり方

動画風のhtml+css+jsを書くときに気をつけること

重要なことから順に紹介していきます。

高さを固定する

動画ファイルは高さが変わることは、滅多にありませんよね？だからあなたが書くファイルも高さが変わらないようにしてください！

というのは建前で、これらの動画風ファイルはiFrameを使って読み込ませています。私の知る限りでは、ブラウザは横の長さの計算は非常にすんなりとやってくれますが、縦の長さはちょくちょく計算がバグります。(例えばCSSの縦書きは、えらいことになる）

ですから、最初から高さを固定して、ユーザー側からも高さを指定する方法を取るのが最も安全です。

相対パスが使える

同じページにアップロードしたファイルならば相対パスが使えるので覚えておきましょう。 こいつ→"./"です。

htmlの余白を全てなくす

画像フレームによくわからない余白があると不恰好なので、あなたの作るhtmlの時点で余白を全て無くしましょう。具体的には、cssファイルにこれを入れておくのが吉です。

body {
  padding:0px;
  margin: 0px;
 
}

スマホでも、パソコンでもまともに見えるようにする

SCP財団をスマホで見る方は多いです！なんとかしましょう！つまり、Flashを使って作るのは無茶ということです。FlashやShockWaveの代わりにHTML 5のCanvas要素の限界を極めるのが良いでしょう。

埋め込み方法のテンプレート

例えば縦横が(300px,300px)ならばこのような感じで、あなたの記事に埋め込みます。

[[div class="scp-image-block" style="width:300px;"]]
[[iframe 動画風作品のURL style="width:300px; height:300px;" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:300px;"]]
キャプション
[[/div]]
[[/div]]

参考になるものの見つけ方

ライセンスには気をつけよう

あなたが使う動画風のものも、CC-BY-SA 3.0とフレンドリーなライセンスで公開しなければなりません。動画風の内部の画像は、CC-BY-SA 3.0に対応するものを使うべきです。

ですからcssやjsファイルに使うコードも、商用不可能なものや、改変不可能なものを使ってはならないです。

つまり画像などのリソースはCC-BY-SA 3.0を使いましょう。そして、コードは無数のライセンス形式がありますが、その中でもMITライセンスが良いのではないでしょうか？もしMITライセンスならアップロードしたファイルの中に、直接MITライセンスの著作権表示および許諾表示を書いて、フォーラムでもMITライセンスを使っていることを説明すると良いでしょう。

CodePenが便利

CodePenはパブリック公開されている作品のライセンスが、MITライセンスです。
https://blog.codepen.io/legal/licensing/

例えば今回の例は、CodePenの Lucas Bebber氏のbase64 glitch anim + CSS CRT effectを参考に作りました。

CodePenは見ていて楽しいサイトなのでオススメですよ。

おまけ

今回の例のソースコード
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.html
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.css
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.js

CSS Filterの入門

鼻のあたりをじっと眺めていてください。すると、画像が切り替わります！でもその画像は白黒なのに色がついて見えますね……
993.png

今回は、画像をCSSのフィルター機能で、白黒にしたりする方法について軽く説明します。

993.png

SCP-993の画像ですね。この画像はこんな感じにすると、 
[[image http://ja.scp-wiki.net/local--files/scp-993/993.png size="small" style="-webkit-filter:grayscale(100%);-moz-filter: grayscale(100%);filter:grayscale(100%);max-width:200px;"]]

これをスタイルに入れると白黒になります。

993.png

スタイルの以下の部分が肝です。-moz-で始まる行はほとんど要らないようになりましたが… 
webkit-filter:grayscale(100%);
-moz-filter: grayscale(100%);
filter:grayscale(100%);
[[image http://ja.scp-wiki.net/local--files/scp-993/993.png size="small" style="filter: hue-rotate(125deg);max-width:200px;"]]

こんな感じにもできます。

993.png

これはfilterにhue-rotate(125deg)を適用させたものです。 
webkit-filter:hue-rotate(125deg);
-moz-filter:hue-rotate(125deg);
filter:hue-rotate(125deg);

これらのフィルターは合わせることもできます。

993.png

これは一旦セピア色にしてからhue-rotate(125deg)を適用させたものです。このようにフィルターは空白で区切ることで、複数のフィルターをかけることができます。 
webkit-filter:sepia(100%) hue-rotate(125deg);
-moz-filter:sepia(100%) hue-rotate(125deg);
filter:sepia(100%) hue-rotate(125deg);

Hey!画像ならば、最初から白黒にして持って来ればいいじゃん！？
A: これは、画像以外にも、cssが適用できる要素全てにかけることができます。例えば、サイドメニューを白黒にしたりね！画面全体をセピアにすることもできます。

等幅ビットマップフォント

この日本語表現用Wiki構文拡張スタイルを使うと、{{teletype (monospaced) text}}構文が使えなくなります。しかし、もともと日本語フォントでは、テレタイプの雰囲気が別のフォントを使わない限り出せません。例えば、黒、白、黒、白、黒、白、灰色はWikidotの備え付けの機能だと、日本語のフォントの場合以下のような表示になります。

昨日

俺は三人の男たちが血と糞と光に満ちた部屋で死ぬのを見た。一人がくしゃみをしただけで奴らは死んだ。

今日

また別の三人が部屋へと入る。安いモップとそいつら全員の命だけを持って。

昨日

俺は尊敬すべき男が撃たれて死ぬのを見た。与えられるべきではなかった傷でボロボロになった女の子に薔薇を残すためにそいつは死んだ。

今日

その子はそのことを覚えていない。三つの防音室が閉まっても俺は彼女の悲鳴を聞くことができる。

昨日

俺は兵士たちが戦いに行くのを見た。相手は奴らの死んだ戦友だった。

今日

俺達は次のサンプルのテストを行う。今度は子供だ。

確かに、等幅フォントですが、テレタイプ端末の雰囲気が出ません。そこで、ビットマップフォントで表示してみると以下のようになります。

昨日

俺は三人の男たちが血と糞と光に満ちた部屋で死ぬのを見た。一人がくしゃみをしただけで奴らは死んだ。

今日

また別の三人が部屋へと入る。安いモップとそいつら全員の命だけを持って。

昨日

俺は尊敬すべき男が撃たれて死ぬのを見た。与えられるべきではなかった傷でボロボロになった女の子に薔薇を残すためにそいつは死んだ。

今日

その子はそのことを覚えていない。三つの防音室が閉まっても俺は彼女の悲鳴を聞くことができる。

昨日

俺は兵士たちが戦いに行くのを見た。相手は奴らの死んだ戦友だった。

今日

俺達は次のサンプルのテストを行う。今度は子供だ。

一気に端末感が出ましたね。時にこのビットマップフォントを使うと、より翻訳の見た目がブラッシュアップされるかもしれません。

以下をインクルードしてください。

[[include :scp-jp-sandbox2:inc:ayu18]]

このように利用できます。

[[div class="monoayu"]]
> 昨日
> 
> 俺は三人の男たちが血と糞と光に満ちた部屋で死ぬのを見た。一人がくしゃみをしただけで奴らは死んだ。
[[/div]]

フォントは、自家製フォント工房さんが、ttfフォントに変換したAfter X-TT ProjectさんのAyu 18ドットゴシックを、ライセンスを埋め込るためwoff化してweb-fontで表示しています。元の、ttfは先ほどのリンクから得ることができます。ライセンスはpublic domainです。

ページ変更ギミックの単一ページ化

"Hyper page changer" Presents by:physicslikephysicslike

概要

SCP-2998やSCP-1111-JPに代表される記事は、特殊なギミックを用いることで複数の異なる内容のページを評価などが同じ一つのページとして表示しています。このギミックは、実はListPageモジュールと子ページを組み合わせる事で実現されています。これは逆に言えば、同じようなページを作りたいと思った場合子ページを複数作成しなければならず、そのアップロードの順番も厳密に管理しなければならないという面倒臭さがあります。また、何よりも通常のサンドボックス上では子ページを安易に作れないため、ギミックのテストをすることができずに一発勝負になってしまうというハードルの高さが問題となります。そこで、ここでは同じように動作するギミックを、単一のページで再現する方法を紹介します。下のリンクで次の文章を表示します。

>次の文章を読む

その他！

偽りの認証

HEY!パスワードなんて分からないぜ、ニック！

まあ、まあ、とにかく認証を押してみましょう。

職員コード
パスワード
認証

サイト名を変更する

ところで皆さん。このページの左上をご覧ください。「SCP財団日本支部」って書かれていますよね？
「え？いつの間にかサイト名変わったの？」
そんな風に思われるかも知れませんがそうではありません（実際他のページは「SCP財団」のままです）。これは下記の構文を使って表示されるサイト名を変更したのです。
SCP財団ページとサンドボックスⅢでの構文:

[[include :scp-jp-sandbox2:inc:changepagetitle |
TITLE=SCP財団日本支部|
COLOR=#EEE]]

サンドボックスⅡでの構文:

[[include inc:changepagetitle |
TITLE=SCP-JPサンドボックスII|
COLOR=#EEE]]

設定項目は下記の通りです。

項目名 設定内容
TITLE 変更するページタイトルを入力してください
COLOR 文字の色を入力してください

色はRGBによって指定します。RGBがよくわからない場合は下のスクリプトで色を作ってください（モダンなスタイルじゃありませんが……）。


上記の赤、緑、青のグラデーションがかかっている箇所を左クリックした状態でカーソルでなぞるか指でなぞるかすると、カラーサンプルと書かれた下の欄の色が変わります。この色がご自身の使いたい文字の色と同じになったら、"値"という欄に書かれている"#"から始まる文字をコピーしてください。この文字を本モジュールのCOLORの項目に記入すれば、変更後のタイトルの文字の色はそれと同じになります。

人事ファイル等にちょろっと使ってみてはどうでしょうか？

技術ノート:　これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。

+ 技術ノートを開く

サイト名の上にサブタイトルを付ける

注意点: このモジュールは上述の「サイト名を変更する」を一緒に使わないと機能しません。ページのタイトルをそのままに、ページの上部にサブタイトルを追加したいだけの方は「サイト名を変更する」に掲載した構文サンプルをコピペしてから、この構文をご使用ください。

説明: このページの左上を見ると「SCP財団日本支部」という文字の上に更に"SCP Foundation JP-branch"と書かれていますが、SCP財団の仕様が変わったのでしょうか？そうではありません。これは下記の構文によって追加されたものなのです。

SCP財団ページとサンドボックスⅢでの構文:

[[include :scp-jp-sandbox2:inc:topsubtitle |
TITLE=SCP Foundation JP-branch |
COLOR=#EEE]]

サンドボックスⅡでの構文:

[[include inc:topsubtitle |
TITLE=SCP Foundation JP-branch |
COLOR=#EEE]]

設定項目は以下の通りです。

項目名 設定内容
TITLE 追加するサブタイトルを入力してください
COLOR 文字の色を入力してください

文字の色はRGBによって指定します。RGBがよくわからない方は「サイト名を変更する」で記載した色作成のスクリプトを使ってください。

技術ノート:　これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。

+ 技術ノートを開く

ロゴ変更

このページの左上のロゴを見てください。アレ？いつものロゴじゃない。これはSCP-INTの日本支部のロゴだ（え？それどころかグルグル回ってる？それは後述します）。
ロゴの変更は下記の構文によって行えます。
SCP財団ページとサンドボックスⅢでの構文:

[[include :scp-jp-sandbox2:inc:changelogo |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

サンドボックスⅡでの構文:

[[include inc:changelogo |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

IMAGEの箇所にあなたのオリジナルロゴのURLを記入してください。

下に何のマークも入っていない財団ロゴの外枠を用意しましたので、こちらを使って皆さんのオリジナルロゴを作ってみてはいかがでしょうか？
logoModel.png
画像を編集する際は透明色が使用可能な画像編集ソフトをお使いください。

注意点: 変更するロゴの画像は必ず正方形のカンバスに収まった画像にしてください。そうしなければ画像が縦に潰れたり横に潰れたりします。

ぐるぐる

このページのロゴが回っているのに気がつきましたか？！

SCP財団ページとサンドボックスⅢでの構文:

[[include :scp-jp-sandbox2:inc:guruguru]]

サンドボックスⅡでの構文:

[[include inc:guruguru]]

更に下の構文を使えばあなたのオリジナルロゴをぐるぐる回す事ができます！（※上述のロゴ変更の構文は使えないのでご注意ください）

SCP財団ページとサンドボックスⅢでの構文:

[[include :scp-jp-sandbox2:inc:changeguruguru |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

サンドボックスⅡでの構文:

[[include inc:changeguruguru |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

IMAGEの箇所にあなたのオリジナルロゴのURLを記入してください。

注意点: オリジナルロゴをぐるぐる回す際は必ず

[[include :scp-jp-sandbox2:inc:guruguru]]
[[include :scp-jp-sandbox2:inc:changeguruguru |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

の様に、[[include inc:guruguru]]の下にグルグル用のロゴ変更の構文を記入してください。そうしなければロゴ変更は反映されません。

技術ノート:　これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。

+ 技術ノートを開く

サブタイトルの変更

このページのサブタイトルが変更されています！？これはSCPの仕業ですか！？
いいえ。これもincludeで実現されている魔法のような機能です。

[[include :scp-jp-sandbox2:inc:headsubtitle | title=確保、収容、ナナフシ]]

神代文字

ｺﾚﾊﾎﾂﾀﾏｴﾃﾞｽ
ｱﾅﾀﾊﾖｸﾜｶﾗﾅｲﾓｼﾞﾂﾃ
ｽﾃｷﾀﾞﾄｵﾓｲﾏｾﾇｶ
ﾐｼﾗﾇﾓｼﾞﾆﾖﾙｴｷｿﾞﾁｯｸﾀｲｹﾇ

以下をインクルードしてください。

[[include :scp-jp-sandbox2:inc:hotsu]]

このように利用できます。

[[div class="hotsu"]]
> ｺﾚﾊﾎﾂﾀﾏｴﾃﾞｽ _
> ｱﾅﾀﾊﾖｸﾜｶﾗﾅｲﾓｼﾞﾂﾃ _
> ｽﾃｷﾀﾞﾄｵﾓｲﾏｾﾇｶ _
> ﾐｼﾗﾇﾓｼﾞﾆﾖﾙｴｷｿﾞﾁｯｸﾀｲｹﾇ _
[[/div]]

フォントは、神代國ノ文字達から借りてきました。ライセンスはフリーですが、作成者の変更は厳禁です。このため、ライセンスを埋め込るためwoff化してweb-fontで表示しています。元の、ttfは先ほどのリンクから得ることができます。

折り畳みタブ・レイアウト変更

説明及び導入方法: 折り畳みタブと言えばサンドボックスで複数の下書きを収めるのに使いますよね。下の様な見た目です。

下書き1

ただ、たまには違ったレイアウトの折り畳みタブを使いたくありませんか？今回はいつもと違ったレイアウト違いの折り畳みタブを用意しました！下の様な見た目です。

下書き1



導入方法は以下の通りです。まず下記の構文を記します。

[[include :scp-jp-sandbox2:inc:addspecialcss]]

これは下記にご紹介する「記事の中にフォーラムを！」でも使う構文です。この記述が完了しましたら、後は折り畳みタブを以下の[[div]]で囲めば良いだけです！

[[div class="CustomTabRJ"]]
[[tabview]]
[[tab タブ1]]
折り畳み文章1
[[/tab]]
[[tab タブ2]]
折り畳み文章2
[[/tab]]
[[/tabview]]
[[/div]]


更に今回は、このレイアウト違いの折り畳みタブの色違いバージョンもご用意致しました。

折り畳み文1


構文は以下の通りです（[[include :scp-jp-sandbox2:inc:addspecialcss]]を導入した上でご使用ください）。

[[div class="CustomTabRJC"]]
[[tabview]]
[[tab タブ1]]
折り畳み文1
[[/tab]]
[[tab タブ2]]
折り畳み文2
[[/tab]]
[[tab タブ3]]
折り畳み文3
[[/tab]]
[[/tabview]]
[[/div]]


このように、[[include :scp-jp-sandbox2:inc:addspecialcss]]を使えば、後は折り畳みタブを[[div]]で囲むだけでちょっと違った折り畳みタブを使用する事ができます。

注意点: IEもしくはEdgeでこのページを閲覧している方は気付いたかも知れませんが、このレイアウト違いの折り畳みタブ、IEもしくはEdgeで閲覧した場合はタブの高さが固定されます。タブの長さ以上の文章は隠れて見えなくなります。

これは意図的な仕様であり、どうしてこのような仕様にしたのかは専門的な話になるので割愛します。また、このレイアウトの折り畳みタブでタブに長いタイトルを付けると見た目が格好悪いものになるので、このレイアウトの折り畳みタブを使用する際は、タブの中に書くタイトルはなるべく短くしてください。

記事の中にフォーラムを！

  • ガイド
  • 日本語表現用Wiki構文拡張スタイル
  • 記事の中にフォーラムを！
スレッドを立てた人: dummyaccount3.pngQuestionMan
日付: 2 Apr 2017 12:08
投稿数:: 3
feed-icon-14x14.pngRSS: 新しい投稿

フォーラムっぽい記事を書きたい！

すべて開く すべて閉じる 追加のオプション

記事の中にフォーラムを

dummyaccount3.pngQuestionMan 2 Apr 2017 12:08

フォーラムっぽい記事を書きたいけど、どうやって書けばいいの？

記事の中にフォーラムを

dummyaccount3.pngQuestionMan 2 Apr 2017 12:15

HTMLブロックは使いたくないんです。

Re:記事の中にフォーラムを

dummyaccount4.pngAnswerMan 2 Apr 2017 13:00

では[[include :scp-jp-sandbox2:inc:addspecialcss]]を使ってみてはどうでしょうか?

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


もしかしたら、これを読んでいる読者の中には、記事の中にフォーラムを出現させたい、なんて一風変わった事をしたい人もいるかも知れません。ここではフォーラム風の表現を可能にする構文をお伝えします。

注意点: この文章には、以下の形式で書かれた構文が頻出します。

[[include :scp-jp-sandbox2:inc:hoge]]

Code:1


上記の構文の内"hoge"には、その構文に合わせた様々な文が書き込まれます(ここからでるincludeの構文を見ると、"include :scp-jp-sandbox2:inc:"という文までは全て共通している事がわかります)。
実はこの書き方はSCP財団で疑似フォーラムを適用する書き方です。この書き方だとサンドボックス内では疑似フォーラムを適用できません。サンドボックス内で疑似フォーラムを作る場合は

[[include inc:hoge]]

Code:2


の様に"inc"の前にある":scp-jp-sandbox2"という文を削除してください。

2017年6月26日追記: サンドックス内においてもCode:1で記した構文を使用しても問題ありません。SCP記事に疑似フォーラムを使う際、サンドボックスでもCode:1の記述を用いた方がコピペで済みますので、Code:1の構文をご使用ください。

CSSの挿入: まずは下の一文を挿入してください。これ無しではここから紹介する構文を書いてもフォーラム風の表現はできません。

[[include :scp-jp-sandbox2:inc:addspecialcss]]

Code:3

アカウント画像: フォーラムではスレッドの作成者及びポストの投稿者のアカウント画像が表示されます。その画像には下記のものをご使用ください。もちろん、ご自身で制作した画像を使用する事もできます。

画像サンプル 画像URL
dummyaccount0.png http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount0.png
dummyaccount1.png http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount1.png
dummyaccount2.png http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount2.png
dummyaccount3.png http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png
dummyaccount4.png http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount4.png
dummyaccount5.png http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount5.png

日付について: wikidotのフォーラムでは日付がイギリス式に表示されます。つまり以下の順番です。

日　月　年　時間

例えば2017年4月2日の12時8分だと以下の様に表記します。

2 Apr 2017 12:08

日本での日付表記と順番が違うの注意してください。また、月に関しては以下のようにアルファベット3文字で表します。

1月 2月 3月 4月 5月 6月
Jan Feb Mar Apr May Jun
7月 8月 9月 10月 11月 12月
Jul Aug Sep Oct Nov Dec

以上を踏まえて日付の記述をおこなってください。

フォーラムのタイトル: フォーラムの各スレッドの上部には、スレッドのタイトルとそのスレッドのカテゴリーが書かれています。例えば下の様にです。

記事の中にフォーラムを！

  • ガイド
  • 日本語表現用Wiki構文拡張スタイル
  • 記事の中にフォーラムを！

上記の表現は下の構文で実現できます。

[[div class="DummyForumTitle"]]
記事の中にフォーラムを！
* Forum
* フォーラムディスカッション / 一般
* 記事の中にフォーラムを！
[[/div]]

Code:4


[[div class="DummyForumTitle"]]～[[/div]]の間に文章をそのまま打ち込むとそれがタイトルに、リスト（番号なし）を書き込むとそれがカテゴリになります。

サマリー: フォーラムではスレッドのタイトルの下にそのスレッドの趣旨を記述するサマリーが配置されています。

スレッドを立てた人: dummyaccount3.pngQuestionMan
日付: 2 Apr 2017 12:08
投稿数:: 3
feed-icon-14x14.pngRSS: 新しい投稿

フォーラムっぽい記事を書きたい！

すべて開く すべて閉じる 追加のオプション

上記のサマリーは以下の構文によって作られています。

[[include :scp-jp-sandbox2:inc:pseudosummary |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=26 Jan 2017 12:08|
POST=3|
SUMMARY = block]]
フォーラムっぽい記事を書きたい！
[[include :scp-jp-sandbox2:inc:pseudosummary-end]]

Code:5


ここでURL等の各種設定をおこなっていますが、その意味を説明します。これらの設定項目は以下の事を意味します。
項目名 設定内容
URL アカウント画像のURLを入力してください
NAME アカウント名を入力してください
DATE スレッド作成日を入力してください
POST ポスト数を入力してください
SUMMARY ※後述します

Explain:1


上記の内のSUMMARYという設定に関してですが、まずは下記のサマリーをご参照ください。
スレッドを立てた人: dummyaccount3.pngQuestionMan
日付: 2 Apr 2017 12:08
投稿数:: 3
feed-icon-14x14.pngRSS: 新しい投稿

すべて開く すべて閉じる 追加のオプション

このサマリーには説明文が記述されていませんが、同時に「サマリー」という文章も消えています。実はサマリーに何も書き込まない場合は、この「サマリー」という4文字も表示されないのです。この文字を消したい場合は上記の設定項目の内SUMMARYをnoneにします。

[[include :scp-jp-sandbox2:inc:pseudosummary |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
POST=3|
SUMMARY=none]]
[[include inc:pseudosummary-end]]

Code:6


「サマリー」という文字を表示する場合はここの設定はblockにしてください。
サマリーを表示する サマリーを表示しない
SUMMARY=block SUMMARY=none

ポストの表示: ここが一番複雑な構文になります。はりきってまいりましょう。フォーラムにおける1つのポストは以下の様に表示されます。

記事の中にフォーラムを！

dummyaccount3.pngQuestionMan 2 Apr 2017 12:08

フォーラムっぽい記事を書きたいけど、どうやって書けばいいの？


この表現は以下の構文で実現できます。

[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
TITLE=記事の中にフォーラムを]]
フォーラムっぽい記事を書きたいけど、どうやって書けばいいの？
[[/div]]
[[/div]]

Code:7


構文の最後に[[/div]]が2つ付いている事に注意してください。これはhtmlの構文に慣れた人の方がひっかかりやすいでしょう。上記の構文における各設定項目の意味をご説明します。
項目名 設定内容
URL アカウント画像のURLを入力してください
NAME アカウント名を入力してください
DATE 投稿日を入力してください
TITLE ポストのタイトルを記述してください

Explain:2


さて、この構文の最後にある[[/div]]と[[/div]]の間にCode:7と同じ構文を挟む事で、そのポストに対する返信を表現できます。

記事の中にフォーラムを！

dummyaccount3.pngQuestionMan 2 Apr 2017 12:08

フォーラムっぽい記事を書きたいけど、どうやって書けばいいの？

Re:記事の中にフォーラムを！

dummyaccount5.pngAnswerMan 2 Apr 2017 12:18

気合

[[include inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
TITLE=Re:記事の中にフォーラムを！]]
フォーラムっぽい記事を書きたいけど、どうやって書けばいいの？
[[/div]]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount5.png|
NAME=AnswerMan |
DATE=2 Apr 2017 12:18|
TITLE=記事の中にフォーラムを！]]
気合
[[/div]]
[[/div]]
[[/div]]

Code:8


恐らく何重も返信したり、1つのポストに対して複数の返信をつけると、最後の[[/div]]の数でこんがらがると思いますので、1つのポストの上下にコメントを挿入する事をおすすめします。

[!-- コメント1 Start --]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
TITLE=記事の中にフォーラムを！]]
フォーラムっぽい記事を書きたいけど、どうやって書けばいいの？
[[/div]]
[!-- レスポンス1 Start --]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount5.png|
NAME=AnswerMan |
DATE=2 Apr 2017 12:18|
TITLE=記事の中にフォーラムを！]]
気合
[[/div]]
[[/div]]
[!-- レスポンス1 End --]
[[/div]]
[!-- コメント1 End --]

Code:9


この返信の表現はかなり複雑な構文に感じると思います。[[/div]]という一文の数に注意する事を忘れないでください。

新しくコメントを投稿する: スレッドの最後には「新しくコメントを投稿する」という文が書かれた、下記のボタンが配置されています。

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


これは以下の構文で表現する事が可能です。

[[div class="DummyNew-post"]]
[[span class="fake-link"]]新しくコメントを投稿する[[/span]]
[[/div]]

Code:10


以上が疑似フォーラムを実現する構文です。この構文で皆様の表現の幅が広まれば幸いです。

星空とUFO

参考:
Parallax Star background in CSS By Saransh Sinha
UFO speeder By Louis Coyle
Introduced by Nanimono Daemon does not match any existing user name

2017年のエイプリルフールのデザインを覚えていますか？記事のヘッダーに上記の様な星空とUFOが出現していましたよね？これらは下記の構文で皆様の記事及びサンドボックスに出現させる事ができます。
星空:

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-stars_3.css);
[[/module]]

Code:1


UFO:

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-1010CSS6.css);
[[/module]]

Code:2


また下記の構文を挿入する事で

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/BasicNightBackScreen6.css);
[[/module]]

Code:3


下記のwikidot構文で任意の場所に星空とUFOを出現させる事ができます。

[[div class="nightskyScreen" style="width:90%;height:200px;margin:auto;"]]
[[div class="starBackScreen"]
[[/div]]
[[div class="starBackScreen2"]]
[[/div]]
[[div class="starBackScreen3"]]
[[/div]]
[[div class="ufo"]]
[[/div]]
[[/div]]

Code:4


夜空単体（グラーデション背景）は下記になります。この要素に文章を打ちたい場合はstyle="color:#FFF;"等の記述を追記する事を推奨します（そうしないと文字が見えない為）。

[[div class="nightskyScreen" style="color:#FFF;"]]
style="color:#FFF;"を追記する事でここに書かれた文字が白色になります。
[[/div]]

Code:5

style="color:#FFF;"を追記する事でここに書かれた文字が白色になります。


また、style="width:90%;height:200px;"の様な記述を加えると、夜景の大きさを調整できます。

夜景に星を追加する場合は下記のコードになります。

[[div class="nightskyScreen" style="width:90%;height:100px;margin:auto;"]]
[!-- 以下3つの要素を記述する --]
[[div class="starBackScreen"]
[[/div]]
[[div class="starBackScreen2"]]
[[/div]]
[[div class="starBackScreen3"]]
[[/div]]
[!-- 以上3つの要素を記述する --]
[[/div]]

Code:6


UFOを追加する場合は下記の記述になります。ただし、この場合はUFOの軌道の関係上夜景のheightは150以上にしてください。

[[div class="nightskyScreen" style="width:90%;height:150px;margin:auto;"]]
[!-- UFOの記述 --]
[[div class="ufo"]]
[[/div]]
[!-- UFOの記述終り --]
[[/div]]

Code:7


これであなたのページでも宇宙コスモを感じる事ができます。

技術ノート:　これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。

+ 技術ノートを開く

Colmod - 多重折り畳み

"Collapsible Modification - multiple collapsible blocks" Introduced by:Boyu12Boyu12

colmodは colmod自身 を…

    • _
    + 開く- 閉じる

    このように…

      • _
      + 開く- 閉じる

      何度でも…

        • _
        + 開く- 閉じる

        折り畳むことが出来ます。

        [[include component:coltop show=+ 開く|hide=- 閉じる]]
        このように...
        [[include component:coltop show=+ 開く|hide=- 閉じる]]
        何度でも...
        [[include component:coltop show=+ 開く|hide=- 閉じる]]
        折り畳むことが出来ます。
        [[include component:colend nohide=true]]
        [[include component:colend nohide=true]]
        [[include component:colend nohide=true]]

        colendの nohide を省略し hide を指定すると…

          • _
          + 開く▽ 閉じる

          collapsibleの hideLocation="both" を再現できます。
          加えて、coltopとcolendで別々のリンクテキストを表示することが出来ます。

          [[include component:coltop show=+ 開く|hide=▽ 閉じる]]
          collapsibleの hideLocation="both" を再現できます。
          加えて、coltopとcolendで別々のリンクテキストを表示することが出来ます。
          [[include component:colend hide=△ 閉じる]]

          △ 閉じる

        更にcoltopの hide を省略し nohide=true を指定すると…

          • _
          + 開く

          collapsibleの hideLocation="bottom" を再現できます。

          [[include component:coltop show=+ 開く|nohide=true]]
          collapsibleの hideLocation="bottom" を再現できます。
          [[include component:colend hide=- 閉じる]]

          - 閉じる

        coltopに folded=false を指定すると…

          • _
          + 開く- 閉じる

          collapsibleの folded="no" を再現できます。

          [[include component:coltop folded=false|show=+ 開く|hide=- 閉じる]]
          collapsibleの folded="no" を再現できます。
          [[include component:colend nohide=true]]

        colmodを [[div class="collapsiblealt"]]と[[/div]] で囲む、
        または coltopに ifprot=true を指定すると…

          • _
          認証ログアウト

          偽りの認証のcollapsibleを再現できます。

          [[div class="collapsiblealt"]]
          [[include component:coltop show=認証|hide=ログアウト]]
          [#toc23 偽りの認証]のcollapsibleを再現できます。
          [[include component:colend nohide=true]]
          [[/div]]

          または

          [[include component:coltop ifprot=true|show=認証|hide=ログアウト]]
          [#toc23 偽りの認証]のcollapsibleを再現できます。
          [[include component:colend nohide=true]]

        その他詳細情報は以下のページを参照して下さい。
        Append Syntax: Colmod - 多重折り畳み

Footnotes
jpリファレンス
ページリビジョン: 46, 最終更新: 13 Jan 2023 12:06
編集 評価 (+152) タグ ディスカッション (13) 履歴 ファイル 印刷 サイトツール + オプション
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。