ページ構築講座

ページ構築講座はいずれのページも編集するときに見ることができます。

第一回･･･ページの基本構成

作成者...AdminTeam
まず、これはこのWiki*をやる人に最低限必要なテクニックです。

こんにちは

　　　　↓
こんにちは
そのまま入力した文章は文字列(またはインライン要素)として扱われます。覚えておいてください。
まず、ページ作りの際、ページ作成ボタンを押します。(左上)
そしたら、ページ名を入力し、
編集画面が出てきます。
まずは、見出しについて説明します。

*文字列

このようにやることで、
その文字列の見出しが出来上がります。(ちなみに、文字列の部分は自己紹介等で置き換えてください。例・*こんにちは等文字列)
この後はここに自己紹介等を書いたりしましょう。
そして、目次を作ります。

目次
#contents

これでさっきの見出しが子要素として扱われます。
(子要素とは、簡単に言えば一つの固まり(親要素)の内の一つって事。)
次に、このWiki*では義務化されている、他ページ転送コメント欄について説明します。
先程の様に、

*コメント欄

と入力してください。
そしたら、
その下に

#pcomment

と入力してください。
ちょっと話が難しいですが、
pって言うのはPage、ページなので、他のページにコメントを置くと言う意味になります。
これの応用で、

#comment

って言うのもありますが、
これは他ページに置かないでこのページで管理される
っていう意味です。
恐らく、ここまでが出来ていれば次の様になります。

編集画面
目次
#contents
*自己紹介
この部分は任意です。
*コメント欄
#pcomment
質問等(作成しなくても良い)
#comment

反映結果
目次
自己紹介
コメント欄
　自己紹介
　この部分に任意のインライン要素
　コメント欄

• コメントはこのように表示されます -- まさかのかぜ 2015-09-01 (火) 16:11:59
• テスト -- 再現師 2015-10-17 (土) 22:32:54

ここまで成功すれば第一回は終了。
第二回に進めます。そのままどうぞ。

---

第二回･･･表組みと記述子の合わせ技

作成者...AdminTeam
こんにちは。
今回は、ステージ一覧を作る際に使う"表組み"について解説します。
Frontpageにもテンプレートがありますが、

|ステージ名|難易度|概要|
|ステージ1|★1|簡単です。|

これだけで出来ます。
↑の反映結果

上の部分は表組み内に文字列を入れ、
下の部分には真上の文字列に合った文字列を入れます。
次に、表組み内に

|~|

を入れてみましょう。
反映結果

この通り、[ステージ名]部分に色が付きましたね。
次に、今回一番難しい"記述子"について解説します。

記述子は以下の通りです。
LEFT:
CENTER:
RIGHT:
BGCOLOR:
COLOR:
SIZE:

簡単に言うと、上3つは左中右の文字列反映位置を変える役割があります。
実用例

編集画面
|LEFT:ステージ名|CENTER:難易度|RIGHT:概要|
|LEFT:ステージ1|CENTER:★1|RIGHT:簡単です。|

反映結果

これができます。
次に、BGCOLOR、COLORについて解説します。
今、

&colorで良くね?

って思った方、それもそうですが、表組み内ではこちらを推奨します。
このBGCOLOR()は背景色、COLOR()は文字色を()内に指定します。
カラーコード一覧で確かめましょう。

編集画面
|BGCOLOR(#9932cc):COLOR(#cc0000){ステージ名}|CENTER:難易度|COLOR(Red):概要|
|BGCOLOR(#9932cc):COLOR(#cc0000){ステージ1}|CENTER:★1|COLOR(Red):簡単です。|

実用例

最後に、サイズについて解説します。

編集画面
SIZE(30):文字列

こんな感じです。

&sizeでよくね?

って言う方、先程と同理由ですのでご了承下さいませ。

編集画面
|SIZE(30):ステージ名|SIZE(20):難易度|SIZE(35):概要|
|SIZE(30):ステージ1|SIZE(20):★1|SIZE(35):簡単です。|

反映結果

ここまで覚えれば初期編集はバッチリです。
覚えときたいその他の要素

行末にhを記述すると、ヘッダ行(thead)になります。

行末にfを記述すると、フッタ行(tfoot)になります。

セル内のインライン要素の先頭に~を付けると、ヘッダ(th)になります。

セル内に > を単独で記述すると右のセルと連結します(colspan)。

セル内に ~ を単独で記述すると上のセルと連結します(rowspan)。

これら当Wiki*内でやっている方は少ないです。
ただ、出来が良くなるので活用していってください!

第二回を振り返りましょう!

編集画面
|~ステージ名|難易度|概要|
|~ステージ1|★1|簡単です。|

反映結果

編集画面
|BGCOLOR(#cc6600):ステージ名|COLOR(#f5deb3):難易度|RIGHT:概要|
|BGCOLOR(#cc6600):ステージ1|COLOR(#f5deb3):★1|RIGHT:簡単です。|

反映結果

編集画面
|CENTER:COLOR(#cc6600){ステージ名}|LEFT:SIZE(50){難易度}|SIZE(60):概要|
|CENTER:COLOR(#cc6600){ステージ1}|LEFT:SIZE(50){★1}|SIZE(60):簡単です。|

反映結果

編集画面
|ステージ名、楽しさ|難易度|概要|h
|ステージ1|>|普通|★1|簡単です。|f

反映結果

実際に出来れば第二回内容は完璧です。
第三回が作られました。そのままどうぞ。内容は今回の応用です。

第三回 　書式指定行その他もろもろ

作成者...一般まさかのかぜさん
今回は、「書式指定行」なるものなどを勉強します。
難易度について、このような表記をします。
編集画面

|CENTER:|CENTER:|c
|~表記|~説明|h
|★1|とても簡単|
|★2|簡単|
|★3|普通|
|★4|難しい|
|★5|とても難しい|

反映例

今、何か思ったんじゃないでしょうか。

一番上の表記は何だよ。

一番上の表記は、書式指定行といいます。

行末にcを記述すると、書式指定行になります。
書式指定行には、次の記述子が選択できます。

LEFT:
CENTER:
RIGHT:
COLOR:
BGCOLOR:
SIZE:

また、書式指定行に、数字を記述すると、

|LEFT:30|RIGHT:100|c
|サン|プル|

反映結果

このように、セル幅がpx単位で指定できます。
出来上がったこれを、収納するにはこう書きます

#region(難易度)
|CENTER:|CENTER:|c
|~表記|~説明|h
|★1|とても簡単|
|★2|簡単|
|★3|普通|
|★4|難しい|
|★5|とても難しい|
#endregion

反映結果

ステージ集が長い時などに使えます。
ステージの部分ができたところで、ちょっとブレイクタイム。
リンク

[[整形ルール]]

↓
整形ルール

[[TOPへ>FrontPage]]

↓
TOPへ

[[Wiki*ホームへ>http://wikiwiki.jp]]

↓
Wiki*ホームへ
ページ更新状況

&new(更新Test,nolink);

↓

更新Test更新してみよう
3回目は終わり!
第四回は編集中です。お待ちください。

第四回･･･流れる流文に多々乗せて

Adminチームによって、内容が全面書き直しされています。
作成者...AdminTeam
こんにちは。
今回は、流文とその装飾について基本編としてお送り致します。
と、その前に
今回装飾を分かりやすくする為、装飾無しにも,を付けました。
本来なら、

#marquee(文字列)

で、

文字列

流文とは、文字列が枠内を電光掲示板の様に流れる事を差します。
流文をそのまま流してみましょう。

編集画面
#marquee(文字列,,,,,,)

反映結果

文字列

この様な感じです。
･･･寂しいですね･･･
そこで、ウィジェットとして表示させてみましょう。

編集画面
#marquee(文字列,,,#4b0082,Red,20)

反映結果

文字列

意味を解説します。
コンマを3つ付けた後に、背景色を指定します。この色はカラーコードも使えますので、かなり自由です。
そして、文字色を指定します。
文字の大きさを変える事も可能ですが、20が標準だと思ってください。
･･･気づいた方も居るかもしれませんが、後２つ項目が有りますね。
第七回の応用編で取り上げます。
今回の内容をおさらいしましょう!

編集画面
#marquee(Sample,,,,,,)

反映結果

Sample

編集画面
#marquee(Sample,,,Black,Yellow,20)

反映結果

Sample

これが出来れば第四回はバッチリです!
第五回へ行けます。そのままどうぞ。

第五回･･･樹形図の繋がりの様な三つ

編集者･･･AdminTeam
こんにちは。
今回は、時間とカウンターとコメントを解説します。
ここで皆様に謝罪がございます。
当文章は、第五回のみデータが消え書き直した内容です。
その為、かなり手短になっている事をご理解願います。
まずは時間です。何かと付けた物に対して記載される事が多々あります。
その一例が、lastmodを使った物です。
最終更新を表す為に使用します。
編集画面

&lastmod;

反映結果
2018-04-29 (日) 17:57:28
となります。また、他のページの最終更新を表すには、

&lastmod(ページ名);

となります。引数は指定したいページ名を挿入します。
また、&colorを使うと、
2018-04-29 (日) 17:57:28こんなことも出来ます。
基本的に時間は、年ー月ー日ー曜日ー時ー分ー秒の順に表示されると覚えてください。

---

次は、カウンターについて解説します。
書式は、

#counter
&counter(引数);

となっております。
引数は以下の通りです。

totalは設置したページが今まで回覧された回数の合計を表示します。

todayは設置したページが今日回覧された回数を表示します。

yesterdayは設置したページが昨日回覧された回数を表示します。

省略時はtotalが指定されたとみなします。
これら２つは、次回第六回のカレンダー編で応用しますので忘れないようにしてください。

---

次に、コメントについてです。
第一回でもcommentと、pcommemtを扱いましたね。
今回はそれの応用がメインパートです。
まずはcommentからやりましょう。
書式は、

#comment(引数)

です。
引数を使い、コメントの挿入方法を引数で指定します。

aboveは入力したコメントがコメント入力欄の上に追加します。

belowは入力したコメントがコメント入力欄の下に追加します。（省略時はaboveが指定されたとなる）

nodateは挿入するコメントに、挿入時の時刻を付加しない。（省略時は付加します）

nonameはコメント記入者名の入力欄を非表示とします。(省略時は表示します）

使用する一例を挙げるなら、
編集画面

#comment(below)

反映結果

• テスト #gyo2cal -- ekichi 2018-04-29 (日) 17:57:28
• ccccあかん -- 2016-04-25 (月) 14:23:53
• テスト -- 霧雨魔理沙 2015-09-07 (月) 14:33:41

---

となります。他の例文は今回のまとめで!
次に、pcommentについてですが、
とてつもなく長くなりますので、
簡単に分けると、

• 引数指定等
• コメント収納ページについて

となっています。

---

まずは引数指定からやっていきましょう!
書式

#pcomment(コメント記録ページ,表示件数,引数)

となっております。
コメント記録ページにはコメントを記録するページ名を指定します。
省略すると、プラグイン内で指定されたページにコメントが記録されます。デフォルトはコメント/設置したページ名です。
指定したページが存在しなくても、最初のコメント投稿時に作成されます。
表示件数は表示するコメントの数を指定します。第一レベルの番号なしリストのみカウントされます。
省略すると、pcommentのデフォルト件数(通常10件)が適用され表示されます。
表示件数はコメント記録ページより後に指定して下さい。
コメント記録ページを省略して表示件数を指定する場合は、コメント記録ページに空白を指定します。
編集画面(例)

#pcomment(,15)

引数でコメントの表示方法、入力方法を指定します。

nonameは名前の入力欄を表示しません。

nodateは日付を挿入しません。

aboveは挿入したコメントをフォームの上に表示します。コメントは上が古く、下に向かって新しい順に並びます。

belowは挿入したコメントをフォームの下に表示します。コメントは下が古く、上に向かって新しい順に並びます。

replyはコメントの左側にラジオボタンを表示します。リプライしたいコメントのラジオボタンを押す事で可能になります。

補足
更新が衝突したときは、予期せぬ場所にコメントが挿入されるのを防ぐため、
リプライ先を指定して記入したコメントはaboveまたはbelowの設定にしたがって 一番前か一番後ろに追加されます。
コメントを投稿しても、pcommentが書かれたページは更新されないので、
最終更新ページにはコメントを記録したページだけが更新として表示されます。
コメントとして相対参照(.../など)を用いた場合は、
書いたページと書き込まれたページのどちらかで、意図した通りに変換されない可能性がございます。

---

次に、コメントページについてです。
ページ構築講座

• こんにちは -- 霧雨魔理沙 2015-09-07 (月) 13:13:33

この様な仕組みになっています。では、編集画面はこの様になっています。

[[ページ構築講座]]
- こんにちは -- [[霧雨魔理沙]] &new{2015-09-07 (月) 13:13:33};

これを使えば、commentとpcommentのコメント整理等が出来ますので、ご活用下さい。

また、前述の事を駆使出来ればあなたはこの２つはマスター出来たも同然です。

---

最後に、rtcommentとzcommentについてです。
rtcommentは、リアルタイムで更新出来ますが、
自身のサーバーに負荷がかかる要因になるため原則全面禁止とさせていただきます。
zcommentはその代替として登場しました。登録済の方はトピックを開き移すのが適切です。

---

今回やった事をまとめましょう!
編集画面

&lastmod;

反映結果
2018-04-29 (日) 17:57:28
編集画面

#counter

反映結果

編集画面

&counter(today);

反映結果
?
編集画面

#comment(nodate)

反映結果

• テスト -- 霧雨魔理沙

編集画面

#comment(noname)

反映結果

• テスト -- 2015-09-07 (月) 14:32:53

編集画面

- テスト -- &new{2015-09-07 (月) 14:12:34};

反映結果

• テスト -- 2015-09-07 (月) 14:12:34

---

ここまで出来れば第五回は完璧です!
第六回へそのままどうぞ。

第六回　カレンダーと日付

作成者...一般まさかのかぜ
編集者：一般グラン
今回は、カレンダーと日付置き換え文字について勉強します。
日付置き換え文字
現在時刻

&_time;

↓

今日の日付

&_date;

↓

上の合成

&_now;

↓

カレンダー
カレンダーは、

#gyo2cal

とすると、
反映結果

4月のカレンダー　　きょうは2024/4/28(日曜日)です
日	月	火	水	木	金	土	日	月	火	水	木	金	土	日	月	火	水	木	金	土
・	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20
21	22	23	24	25	26	27	28	29	30	・	・	・	・	・	・	・	・	・	・	・

と表示されます。
これを利用し、

|CENTER:|CENTER:|c
|>|~#gyo2cal|h
|~現在時刻|&_time;|h
|~アクセス総数|&counter;アクセス|h
|~閲覧中|&online;人|h
|~昨日のアクセス数|&counter(yesterday);アクセス|h
|~今日のアクセス数(暫定的)|&counter(today);アクセス|h
|~最終更新|&lastmod;|h
|>|~[[チャット入室>http://mariomaker.chatx2.whocares.jp/]]|h

反映

このような、データ版を作ることができます。
実は、このデータ版は、僕のページから取って来たものです。
複製は大丈夫ですよ
※追記：チャット入室についてのリンク修正しました。byグラン

第七回･･･流れる流文に多々乗せて-応用

編集:一般やす
第四回で流れる文字について触れました。今回はその応用編です。
それでは早速いきます。
書式

#marquee(文字列,alternate);

反映結果

このように、「alternate」を表記することで端と端を何度も往復する文字になります。
ちょっと遊んでみましょう。
書式

#marquee(0123456789,alternate);
#marquee(　0123456789,alternate);
#marquee(　　0123456789,alternate);
#marquee(　　　0123456789,alternate);
#marquee(　　　　0123456789,alternate);
#marquee(　　　　　0123456789,alternate);
#marquee(　　　　　　0123456789,alternate);

反映結果

こんな風にウェーブをすることができます。
もちろん、色をつけることだって可能です。
書式

#marquee(色をつける&大きさ変更,alternate,,Aqua,Red,20)

反映結果

では、次に参りましょう。
書式

#marquee(文字列,slide);

反映結果

このように、「slide」を表記することで左へ行くと停止する流れる文字になります。
もちろん、色、大きさも変えられますが、そこはもう学びきったことだと思うのでカットさせて頂きます。
それでは次へいきます。
書式

#marquee(文字列,,5);

反映結果

このように、文字列を書いたあとにカンマを2つ書いてある特定の数字を指定すると、その数字の回数だけループします。単に

#marquee(文字列);

だけでは文字列が無限にループしますが、さきほどの書式ならループ回数を指定できます。この場合特定の数字に「5」と入力したので5回ループします。
おまけにこんなこともできます。
書式

#marquee(Sampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee(略),,,,,20)

反映結果

この書式を反映させると、文字の長さに伴って流れるところも長くなり画面外にいくと見苦しいですよね。そんな方は第二回のことを応用するといいです。
書式

|500|c
|#marquee(Sampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee(略),,,,,20)|

反映結果

これでどうでしょう。まあ、表組みじゃないとできない?ことなので仕方ないですが。
最後に、第四回と第七回で学んだことをまとめます。
書式

#marquee(見てくれてありがとう！,alternate,8,Lime,Silver,20)

反映結果

見てくれてありがとう！

書式

#marquee(Sample)

反映結果

Sample

書式

#marquee(Sample,,,Lime,Red,20)

反映結果

Sample

書式

#marquee(Sample,alternate,,Red,Silver,10)

反映結果

Sample

書式

#marquee(Sample,,10,Blue,Yellow,20)

反映結果

Sample

第七回はここで終了です。いかがでしたか。わからないところがあればコメント欄にて受け付けています。

第八回・・・URLとリストde応用

編集:一般Besdsead
今回は新しいテクニックと活用をします。
簡単に言うと、例えばこういうものです。

[[リンク名:URL]]

このようにして入力します。リンク名には、全角文字や半角空白文字を含めることもできます。
また、記述したURLが画像ファイルである場合は、その画像を表示します。
顔文字 です。
次に、行中変換のようなものを書きます。

&br;

こうすると、この
ようにになりま
す。
応用すると、こういうものです。
て
すとこういうものです。しかし、カウンターなどは起動しないものになります。
では、次行きます。

---

今のが水平線です。4つ以上-を置くと作動します。

--------------------------------------------

これも、作動しなくなるので注意を。では、次行きます。

---

今のはまた違う線です。

#hr

このように入力すると、真ん中らへんに線ができます。
一般的な区切りには水平線を使います。
違和感が出ますので、水平線をお勧めします。では次。

今のは中身が隠れるリストです。色も付けれます。URL対応です。

#region(''タイトル'')で始め、
#endregionで終わります。

うまく使うと、
あなたは整形講座を見ますか？

みたいなのも作れます。
では、まとめ。

では。いきます。
第1回目から

---

ここからが本当の地獄だ…行くぞ！

#hrは！水平線とは違う！

---

&br;は！行中変換と違う！

これが
証拠だ！

• が4つ以上で！水平線だ！

---

[[リンク名:URL]] は！画像対応だ！

証拠だ！
ふう。じゃあ復習。

[[リンク名:URL]] で、簡単にURLがはれます。

• が4つ以上で水平線です。

  #hrは区切りには使うのはやめたほうがいいです。

  このページの最初に行きたい？

  ぽちぃ

こんな感じで終わりです。ありがとうございました。

第九回

編集：一般グラン
ページ構築講座を編集したい方はチャットルームにて管理人さんがいるときにメッセージで伝えてください。また、タイトルも書くようお願いします。

コメント欄