#author("2024-08-20T22:36:13+00:00","","") #author("2024-08-20T22:37:30+00:00","","") *Wiki編集マニュアル [#l12dfb16] Wikiの編集に興味を持っていいただきありがとうございます。 ここではWikiの編集方法を取りまとめております。 なお、下記に表示してある構文はわざと全角を使用しております。（半角だと構文として完成してしまい文字として見せられないため） そのため引用していただける場合は必ず【半角】で打ち直していただけるようお願いいたします。 **ページの作成方法 [#v345b10d] ・ページを新たに作成するには下記の方法で作成します。 &attachref(新規.png,,100%,title);&br; &br; ・画面上部にある「新規」の項目をクリックします ・下図の画面に遷移するので、作成したいページ名（例：「テストページ」）を入力して「編集」ボタンをクリックすると新規ページが作成されます。 &attachref(テストページ.png,,100%,title); &br; 例えば、作成したテストページの下層のページ（「テストページ2」）を作成したい場合は、下記のようにページを作成します。 &attachref(テストページ2.png,,100%,title); **子ページの作成方法 [#h35f09e9] ・各ページの下層に新しくページを作成する場合は、子ページを作成したい上位のページに移動しヘッダー部分にある「子ページ作成」のボタンを押下します。 &attachref(子ページ作成.png,,100%,title); ・ボタンを押下すると下図が表示されます。 左のボックスには、親となるページが表示されており、こちらには何もする必要はありません。 この親ページの下に子ページを作成されます。 &attachref(子ページテスト.png,,100%,title); ・右のボックスに新たに作成する子ページの名前を記入して「編集」ボタンを押下します。 **ページの編集方法 [#ea8f2392] ・ページを編集する場合ページ上部にある「編集」をクリックします。 ・新しくページを作成した場合、下記のように何も表示されていない状態からの編集になります。 &attachref(編集.png,,100%,title); ・「プレビュー」を押すことで、ページ変更後の内容をページを変更せずに確認することができます。 &attachref(プレビュー.png,,100%,title); ・作成済みのページ内の見出しにあるペンボタンを押すと見出し内の部分のみが編集できます。また、この状態で、編集プレビューを行うと、見出し内の部分だけのプレビューができます。 **表の作成方法 [#i029d497] ・pukiwikiでは表を作成することが可能ですが、作成には一手間掛ける必要があります。 ・編集ボタンをクリックすると編集画面に遷移します。 ・pukiwikiで表を作成する場合、セルをこちらで指定してあげなければなりません。 半角【|】がセルを指定する記号になります。 ||でセルを作成した後に文字列又は、数字を入力します。 **ヘッダ表示 [#ab864089] |~テスト名| |テスト| |~テスト名| |テスト| 文字列の前に~をいれることでヘッダーとして機能させることができる。 2行目の「テスト」のセルと比べて~を入れたセルの色が変更されており表が見やすくなっています。 **セルの結合 [#m0ce3a18] ||>|文字列| ||>|文字列| 上図のように半角「＞」を入れることでセルの結合を行うことができる。 結合させて表示させる文字列は、一番最後のセルに入力すること **見出し [#x5bf7ff3] *見出し1 [#a99e0cf8] *見出し1 **見出し2 [#eea14e10] **見出し2 ***見出し3 [#d350c534] ***見出し3 上図のように半角｢*｣を入れると見出し表示となる 「*」の数により見出しの表示がかわるため、基本的に大項目、中項目、小項目のように分類するとよい **行間あけ [#pe41bd1e] |文字列&br;文字列| |文字列&br;文字列| 上図のように1つのセル内で2行に分かれて表示される 文章が長いと自動で折り返されるが、こちらは任意の場所で段落わけが可能になる **WIKIのページにリンクを追加する方法 [#w060212e] ページの編集画面にて、リンクを作成したいページの前後に [[リンクさせたいページ名]] [[リンクさせたいページ名]] を入力するとそのページにリンクを張ることができる。 ※リンク先のページがない場合は、?マークが表示される。?マークを押すとリンク先のページが作成されます。 **ページ内リンク [#fe48a4fc] [[表示させる文字列>リンクさせるページアドレス]] [[表示させる文字列>リンクさせるページアドレス]] 上図のようにサイト内にリンクを貼りたいが、ページアドレスを表示させたくない場合、文字列+半角「>」にリンクを貼りたいページアドレスにすることで、ページアドレスを非表示にすることができる。 **コメント [#v73cd87a] コメントを入れる為の構文 #pcomment(reply) **ページの削除 [#ac76a4a3] ・誤ったページを作成してしまった場合、編集ページを開き、編集内容を全て削除し「ページの更新」ボタンを押下することによりページを削除することができます。 **文章の折りたたみ [#m5179773] *文章の折り畳み [#gbc74fef] **regionプラグイン [#sabc7759] #region 記入したい文章 #endregion 上記を記入するとこのように表示されます #region 記入したい文章 #endregion &br; また、このように記入すると折り畳み時に表示される文章を変更することもできます #region(''表示したい文章'') 記入したい文章 #endregion #region(''表示したい文章'') 記入したい文章 #endregion //***折り畳みの初期状態 //タイトル部分にopen, closeと記入する事により折りたたみの初期状態を指定できます //省略は「close」と同じです // #region(''表示したい文章'',open) // 記入したい文章 // #endregion //上記を記入するとこのように表示されます //#region(''表示したい文章'',open) //記入したい文章 //#endregion **divregionプラグイン [#m70e1972] regionプラグインの亜種です。同様の使い方をする事により、文章を折り畳み表示する事が可能になります #divregion(タイトル) 記入したい文章 #enddivregion 上記を記入するとこのように表示されます #divregion(タイトル) 記入したい文章 #enddivregion ***折り畳みの初期状態 [#sbea7ecb] 折り畳みの初期状態を指定することができます 省略は「close」と同じです #divregion(タイトル,open) 記入したい文章 #enddivregion 上記を記入するとこのように表示されます #divregion(タイトル,open) 記入したい文章 #enddivregion ***別スタイル適用 [#p7ac1d1b] divregionプラグインではh1,h2をタイトル部分に記入する事により別スタイルを適用できます 以下一例です #divregion(タイトル,h1) 記入したい文章 #enddivregion 上記を記入するとこのように表示されます #divregion(タイトル,h1) 記入したい文章 #enddivregion &br; #divregion(タイトル,h2) 記入したい文章 #enddivregion 上記を記入するとこのように表示されます #divregion(タイトル,h2) 記入したい文章 #enddivregion ***色指定 [#i3dadee3] color:#xxxxxx, background-color:#xxxxxx タイトル部分に上記の文章を記入する事でスタイルシート指定を無視し、タイトル部分の文字色/背景色を変更できます xxxxxxは16進（0-9,A-F)指定。「Red」などの文字指定はできません （参考サイト：[[WEB色見本http://www.colordic.org/>http://www.colordic.org/]]） #divregion(タイトル,color:#FF0000,background-color:#dddddd) 記入したい文章 #enddivregion 上記を記入するとこのように表示されます #divregion(タイトル,color:#FF0000,background-color:#dddddd) 記入したい文章 #enddivregion *ソート機能付きの表 [#w8824678] wiki内部で使用出来る表にソート機能を付け加える事が出来ます 以下が実装例となります。記述に関しては以下の例を参考にして下さい #sortabletable(sort=String|Number){{ |LEFT:80|LEFT:150|c |果物|価格|h |林檎|25| |オレンジ|5| |梨|20| |マンゴー|500| }} #sortabletable(sort=String|Number){{ |LEFT:80|LEFT:150|c |果物|価格|h |林檎|25| |オレンジ|5| |梨|20| |マンゴー|500| }} 上記のように「#sortabletable(){{}}」と指定して「{{ }}」間に通常の表組みを行うような感じで記述すると使用することが出来ます 「sort=」の部分の「Number」は数字の整列に、「String」は文字列の整列に使用できます。「h」はヘッダーを指します &br; 更に2番目のオプションに「1」を加えるとフィルタが使えるようになります 「#sortabletable(sort=Number|Number,1)」このように記述すると 「Enable Filter」というチェック項目が出現します。要約するとエクセルにおけるプルダウンメニューによる絞り込み機能です 以下が実装例となります #sortabletable(sort=String|Number,1){{ |LEFT:80|LEFT:150|c |果物|価格|h |林檎|25| |オレンジ|5| |梨|20| |マンゴー|500| }} #sortabletable(sort=String|Number,1){{ |LEFT:80|LEFT:150|c |果物|価格|h |林檎|25| |オレンジ|5| |梨|20| |マンゴー|500| }} 複雑で大量のデータが記述されている表を扱う際に便利な機能です 注意点として、&color(#ff3300){「◯◯円」や「◯◯cm」など数字と文字列が同時に記載されている場合は正常に動作しません}; 純粋な数字のみ、あるいは文字列のみのソートでのみ機能します *投票機能 [#d6017e68] 以下のように記入すると利用者が星1から星5までの投票を行う事が出来ます 星をクリックする事で好きな評価を下せます 注意点として、同機能を使う場合は''必ず1から5までの間で最初の数字を指定しておいて下さい'' 無投票状態の対応は仕切れていないためです #raty([3]) #raty([3,5,5,2,5,5,5,5]) &br; また、以下のように記入することで利用者の投票を凍結しそれ以上の投票が出来ないようにする事ができます #raty([readonly,3]) #raty([readonly,3]) *簡易掲示板機能（''現在は機能していません''）[#k4593f35] #bbs2ch(掲示板タイトル) 上記のように入力するとwiki内で簡易掲示板を立てる事が出来ます この際何でもいいのでタイトルを記入しておかないと文章中の表示が大幅に崩れることになります。ご注意下さい。 *動的メニュー表示プラグイン [#jb89abf7] #divplus(start) #divplus(elem) #divplus(end) 上記のプラグインを使用することでブラウザの画面幅に応じて自動的に列数が変更されるメニューを作成する事が出来ます 以下が簡易実装例となります。実際に使用してみる場合は以下の実装例を参考にして下さい #divplus(start) #divplus(elem) &color(#ff0033){Text-A}; #divplus(elem) &color(#ff0033){Text-B}; #divplus(elem) &color(#ff0033){Text-C}; #divplus(elem) &color(#ff0033){Text-D}; #divplus(elem) &color(#ff0033){Text-E}; #divplus(end) &br; #divplus(start) #divplus(elem) &color(#ff0033){Text-A}; #divplus(elem) &color(#ff0033){Text-B}; #divplus(elem) &color(#ff0033){Text-C}; #divplus(elem) &color(#ff0033){Text-D}; #divplus(elem) &color(#ff0033){Text-E}; #divplus(end) &br; 具体的にどういう感じで上記プラグインの列が変更されるかは 以下を参考にしつつ、お使いのブラウザの画面幅を変更する等してご確認下さい ※最大で4列表示となります &br; （画面横幅1700px以上なら4列表示） Text-A Text-B Text-C Text-D Text-E &br; （画面横幅1400px以上、1700px以下なら3列表示） Text-A Text-B Text-C Text-D Text-E &br; （画面横幅1400px以下なら2列表示） Text-A Text-B Text-C Text-D Text-E &br; 横並びになっている各要素の縦幅について 各要素のうち最も縦幅が大きいものに統一されます。 そのため、「#divplus(elem)」の内容の縦幅はできるだけ同じになるようにした方が、 無駄なスペースが発生せずに綺麗な表示となります。 **画像の挿入方法 [#f285aba1] &attachref(,,100%,title); と記入すると画面上に画像を挿入することができます。 画像の大きさを変更させたい場合は、(,,100%,title);の～％の部分を変更します。 100％で挿入画像の元の大きさのためサイズや用途により％の値を変更してください。 *YouTube貼り付け [#ec7dfcae] #youtube(貼り付けたい動画下記参照) 上記のように記入するとYouTubeの動画をwiki内に張る事が出来ます 注意点として(貼り付けたい動画下記参照)の部分には以下の文章を記入して下さい https://www.youtube.com/watch?v=WQYN2P3E06s #youtube(WQYN2P3E06s) #youtube(WQYN2P3E06s) 上記は今作Civilization6のメインテーマ曲「Sogno di Volare」の動画です 上記は前作Civilization6のメインテーマ曲「Sogno di Volare」の動画です（今作のOPが来たら変更します） この時(貼り付けたい動画下記参照)の箇所には 「watch?v=WQYN2P3E06s」のうち v= 以降に記入されている文章を入力していることが分かります 同プラグインをご利用したい場合は上記を参考にして下さい *コメント [#k2a1ae19] #pcomment(reply)