開始行: *EditGuid [#b441d591] ~ &color(red){※九州産業大学ソーシャルデザイン学科のサイトの... &color(red){当サイトでは一部機能が使えない場合があるので... ~ -PukiWiki公式HELP:[[Help]] //-入門マニュアル:&ref(PukiWikiManual.pdf); //-画像の掲載方法:[[EditGuide/Images]] //-[[FormatCheck]] こう書けば、こう表示される・・のサン... ~ ***CONTENTS [#sc5cb935] #contents2_1 ~ ~ *基本編 [#l3ac8987] **編集・新規・名前変更 [#i2e56bf4] ***既存のページを編集するには [#m2a0cacf] -ページ下のツールバーから「編集」をクリックします。 -ワープロで文章を打つように入力すれば、そのまま文章が表示... -詳細な編集記法については、次の項で説明します。 ~ ***新しいページをつくるには [#z8b4622d] -ページ下のツールバーから「NEW」をクリックします。 -新規ページ名を入力して、「編集」をクリックすれば準備完了... -当然中身が空の状態ですが、あとは「編集」の場合と同じです。 -既存のページと同様のスタイルになる場合は、「雛形の読み込... -ページ名の付け方については、以下が参考になります。 [[Wikipedia:記事名の付け方>https://ja.wikipedia.org/wiki/... ~ ***既存のページ名を変更するには [#fa471b90] -ページ下のツールバーから「RENAME」をクリックします。 -新しいページ名を入力して「次へ」をクリックすればOKです。 &small(編集用とは別の(画像添付時と同じ)パスワードが必要で... ~ ~ **編集記法 [#w329b0f5] ***改行 [#a319059e] このWikiでは、編集画面での改行操作がそのまま「改行」とし... したがって、入力した原稿は、ほぼそのままのイメージで表示... ~ ***強制改行 [#cecea1e4] このWIkiでは、空の行送りがパラグラフの終端(</p>)と認... ~ また、プラグイン #br、&br; でも改行可能です。例えば、プ... &size(12){一行目の文です。&br;ここから2行目です。}; &size(12){一行目の文です。&br;ここから2行目です。}; ~ ***見出し [#ha12980c] 行頭で * を記述すると、見出しになります。 見出しは *、**、*** の3段階あります。 ~ ***リスト [#o73d5bc8] HTML の UL(Unordered List)にあたるものです。 -ITEM01 --ITEM01-1 ---ITEM01-1-1 :以下略 -ITEM01 --ITEM01-1 ---ITEM01-1-1 ---ITEM01-1-2 --ITEM01-2 --ITEM01-3 -ITEM02 --ITEM02-1 --ITEM02-2 --ITEM02-3 -ITEM03 -ITEM04 ~ //***番号付きリスト [#b4c543e1] //HTML の OL(Ordered List)にあたるものです。 // +ITEM01 // ++ITEM01-1 // +++ITEM01-1-1 // :以下略 //+ITEM01 //++ITEM01-1 //+++ITEM01-1-1 //+++ITEM01-1-2 //++ITEM01-2 //++ITEM01-3 //+ITEM02 //++ITEM02-1 //++ITEM02-2 //+ITEM03 //~ // //***定義リスト [#k6677796] //HTML の DL(Definition List)にあたるものです。 // :TERM01|DESCRIPTION 01 // :TERM02|DESCRIPTION 02 // :以下略 //:TERM01|DESCRIPTION 01 //:TERM02|DESCRIPTION 02 //:TERM03|DESCRIPTION 03 //~ // // ***囲み表示(整形済みテキスト) [#tdff0f17] 行頭で半角スペースを記述すると、 このようになります。 ~ ***左寄せ・センタリング・右寄せ [#pa2ed307] 行頭に以下の記述で実現します。 LEFT: CENTER: RIGHT: ~ ***文字の強調・斜体・サイズ変更 [#a65e3cc9] 文字列を ' ' (シングルクオーテーション2つ)ではさむと、強... 文字列を ' ' ' (シングルクオーテーション3つ)ではさむと、... 行中に &size(サイズ){(文字列)}; という書き方をすると、文字サイズを指定することができます。 サイズの単位はピクセルです。 ~ ***文字の色の変更 [#yc99c44d] 行中に &color(文字色,背景色){(文字列)}; という書き方をすると、文字色、背景色を指定することができ... 色の指定は、次のいずれかの形式で行ないます。 ・色を意味するキーワード(red, blueなど) ・#16進数6桁(#FF0000) ← 赤です。 ~ ***ページ内の区切り [#q349ab91] 行頭で4つ以上の - を書くと水平線になります。 #hr と書くことでも、同様に水平線が入ります。 ~ ***表組み [#pce94723] 以下のように縦ストロークを利用することで、簡単に表が作成... | TITLE | COLUMN1 | COLUMN2 | COLUMN3 |h | ROW1 | DATA | DATA | DATA | | ROW2 | DATA | DATA | DATA | | ROW3 | DATA | DATA | DATA | | REMARKS | ABC | DEF | GHI |f | TITLE | COLUMN1 | COLUMN2 | COLUMN3 |h | ROW1 | DATA | DATA | DATA | | ROW2 | DATA | DATA | DATA | | ROW3 | DATA | DATA | DATA | | REMARKS | ABC | DEF | GHI |f -幅100%、左揃えになります( PukiWiki デフォルトは幅自動、... -行の最後に h でヘッダー行、f でフッター行 として処理され... -システムの仕様で、罫線は非表示です。 ~ ***表組み(応用) [#q62dc2d6] 以下のように カラム幅を指定することで、レイアウトの調整が... | 20 | 20 | 20 | 20 | 20 | c | TITLE | COLUMN1 | COLUMN2 | COLUMN3 |(空白)| h | ROW1 | DATA | DATA | DATA |(空白)| | ROW2 | DATA | DATA | DATA |(空白)| | ROW3 | DATA | DATA | DATA |(空白)| | REMARKS | ABC | DEF | GHI |(空白)| f |20|20|20|20|20|c | TITLE | COLUMN1 | COLUMN2 | COLUMN3 ||h | ROW1 | DATA | DATA | DATA || | ROW2 | DATA | DATA | DATA || | ROW3 | DATA | DATA | DATA || | REMARKS | ABC | DEF | GHI ||f ~ ***カレンダー2 [#rf61ab34] #calendar2 #calendar2 //~ // //***カレンダー9 [#vf1306d9] //以下の記述で、カレンダーが表示されます。各日記ページに... // #calendar9 // //#calendar9 ~ ***ページ内メニュー [#mc697401] 以下の記述によって、それ以下の見出しが自動的にメニュー化... #contents2_1 ~ ***簡易掲示板 [#ze567670] 編集権限のない一般の方からも、投稿を受付けることができま... #article //#article ~ ***コメント欄 [#i4319165] 編集権限のない一般の方からも、簡単なコメントを受付けるこ... #comment , #comment(below)←投稿されたコメントが下に表示... //#comment(below) ~ //**書籍の紹介 // // &amazon( ISBN ); //~ ***カウンタの表示 [#cebe1f92] &counter そのページにアクセスした人の数を表示することができます。 ・&counter には次のオプションを指定できます。 ・today : 今日のアクセス数を表示します。 ・yesterday : 昨日のアクセス数を表示します。 ・total : アクセス総数を表示します。 &small(オプションを省略した場合はtotalが指定されたものと... ~ ***コメントアウト [#k3a95212] 行頭で // を指定すると、コメント行になります。コメント行... ~ ~ **リンクの張り方 [#y6037325] サイト内の他のページへのリンクを張る内部リンクと、他のサ... ~ ***内部リンク [#xeff41a8] [[(ページ名)]] のように、サイト内のページ名を [[ と ]] で囲むだけでOKで... ~ ***任意のキーワードからの内部リンク [#ua0be9b4] ページ名とは異なるキーワードから、内部リンクしたい場合は、 [[ キーワード > (ページ名) ]] とすればOKです。 ~ ***外部リンク [#caf8c860] [[ キーワード > http:// ~ ]] のように、キーワードとURLを > または : でつなげて [[ と ]... ~ ~ **ページ内容の個別バックアップ [#j66aa81a] システム自体もバックアップを持ちますが、個人のページに関... 編集画面の内容(テキストデータ)をそのままテキストファイ... ''1.Wikiの編集画面に入ります。'' 「編集」->「すべてを選択」 の後 「編集」->「コピー」 ''2.メモ帳やWORDなど何でも構いません。ソフトを起動しま... 「ファイル」->「新規ページ」 の後 「編集」->「ペー... で編集内容が貼り付けられますので、それを保存して下さい。 これで完了です。 もしもの場合は、バックアップしたファイルを開いて、 これと逆の操作をすれば復元できることになります。 原始的な方法ですが、確実です。 ~ ~ *応用編 [#c9e8e0db] ~ **画像の掲載 [#e35c9cca] ***はじめに [#xc194ba3] ページに画像を掲載するには、 -1.画像の準備(Web用に縮小) -2.当該ページにアップロード -3.ページの編集 という3つの手順が必要になります。 ~ ***画像の準備(Web用に縮小) [#u3c74945] デジカメで撮った写真や、スキャナーで取り込んだ写真は、 一般にはWebページ用には大きすぎますので、 画像処理ソフトでサイズ変更する必要があります。 -参考:画像のサイズ変更が一発でできるWebサイトがあります。 Support Ware - Image Resizer|http://myct.jp/resize/ 画像処理ソフトを立ち上げるより簡単です。 ~ ~ ***当該ページにアップロード [#k8c89e57] まず、画像を掲載したいページに移動して下さい(画像はペー... 管理アイコン「添付(クリップ)」をクリックします。 「参照」から用意した画像(○○.jpg)を見つけて選択します。 「添付」をクリックすると画像が送信されて、「(ページ名)... &small(「添付」には編集用とは別の(ページ名変更時と同じ)パ... ~ ***ページの編集 Image [#haf779ee] 当該ページで管理アイコン「編集」をクリックして、編集画面... 画像を掲載したい箇所で、 #image(添付した画像ファイル名) と記述すれば完了です。 サイズを変更したい場合は、 #image(添付した画像ファイル名,right,30%) などと記述すると、画面右寄せで、30%幅で表示されます。 //#image は「クリックで拡大」の機能があります。 //詳細については以下のページで説明しています。 //-[[image プラグインの使い方>Plugin/Image]] ~ ***参考:他のサイトの画像の埋め込み [#kca212ae] Flickrなどにアップ済みの画像であれば、それをリンク表示で... #image(http:// ~ ) ただし、他者の著作物である画像を直接自分のページに埋め込... ~ ***参考:別ページにある画像の利用 [#y2d4e6a9] 別のページに添付された画像を流用したい場合は、以下のよう... #image(添付されたページ名 / 画像ファイル名) //事例、[[images]]ページに掲載されている dummy.jpg をここ... // #image(images/dummy.jpg,left,25%) #image(images/dummy.jpg,left,25%) #clear ~ ~ **PDF等のファイルを提供する [#n0d4e566] 画像の掲載と同様で、以下の手順です。 ***当該ページにアップロード [#m6eb274c] まず、ファイルを提供したいページに移動して下さい(ページ... 管理アイコン「添付(クリップ)」をクリックします。 「参照」から用意したデータを見つけて選択します。 「添付」をクリックするとファイルが送信されて、「(ページ... &small(「添付」には編集用とは別の(ページ名変更時と同じ)パ... ~ ***ページの編集 [#o46d8b6c] 当該ページで管理アイコン「編集」をクリックして、編集画面... ファイルを掲載したい箇所で、 #ref( 添付したファイル名 ); と記述すれば完了です。 &small(アップロードできるファイルは1件につき1MB以内とい... ~ ~ **その他 [#va72baf3] ***Wikiフォルダ内の実ファイル名を知るには(管理者用) [#f... アドレスの入力フォームで、以下のようにコマンドを入力する... http://- URL - /index.php?cmd=filelist ~ ~ #hr ''参考'':[[PukiWiki公式ヘルプ>Help]] ~ ~ 終了行: *EditGuid [#b441d591] ~ &color(red){※九州産業大学ソーシャルデザイン学科のサイトの... &color(red){当サイトでは一部機能が使えない場合があるので... ~ -PukiWiki公式HELP:[[Help]] //-入門マニュアル:&ref(PukiWikiManual.pdf); //-画像の掲載方法:[[EditGuide/Images]] //-[[FormatCheck]] こう書けば、こう表示される・・のサン... ~ ***CONTENTS [#sc5cb935] #contents2_1 ~ ~ *基本編 [#l3ac8987] **編集・新規・名前変更 [#i2e56bf4] ***既存のページを編集するには [#m2a0cacf] -ページ下のツールバーから「編集」をクリックします。 -ワープロで文章を打つように入力すれば、そのまま文章が表示... -詳細な編集記法については、次の項で説明します。 ~ ***新しいページをつくるには [#z8b4622d] -ページ下のツールバーから「NEW」をクリックします。 -新規ページ名を入力して、「編集」をクリックすれば準備完了... -当然中身が空の状態ですが、あとは「編集」の場合と同じです。 -既存のページと同様のスタイルになる場合は、「雛形の読み込... -ページ名の付け方については、以下が参考になります。 [[Wikipedia:記事名の付け方>https://ja.wikipedia.org/wiki/... ~ ***既存のページ名を変更するには [#fa471b90] -ページ下のツールバーから「RENAME」をクリックします。 -新しいページ名を入力して「次へ」をクリックすればOKです。 &small(編集用とは別の(画像添付時と同じ)パスワードが必要で... ~ ~ **編集記法 [#w329b0f5] ***改行 [#a319059e] このWikiでは、編集画面での改行操作がそのまま「改行」とし... したがって、入力した原稿は、ほぼそのままのイメージで表示... ~ ***強制改行 [#cecea1e4] このWIkiでは、空の行送りがパラグラフの終端(</p>)と認... ~ また、プラグイン #br、&br; でも改行可能です。例えば、プ... &size(12){一行目の文です。&br;ここから2行目です。}; &size(12){一行目の文です。&br;ここから2行目です。}; ~ ***見出し [#ha12980c] 行頭で * を記述すると、見出しになります。 見出しは *、**、*** の3段階あります。 ~ ***リスト [#o73d5bc8] HTML の UL(Unordered List)にあたるものです。 -ITEM01 --ITEM01-1 ---ITEM01-1-1 :以下略 -ITEM01 --ITEM01-1 ---ITEM01-1-1 ---ITEM01-1-2 --ITEM01-2 --ITEM01-3 -ITEM02 --ITEM02-1 --ITEM02-2 --ITEM02-3 -ITEM03 -ITEM04 ~ //***番号付きリスト [#b4c543e1] //HTML の OL(Ordered List)にあたるものです。 // +ITEM01 // ++ITEM01-1 // +++ITEM01-1-1 // :以下略 //+ITEM01 //++ITEM01-1 //+++ITEM01-1-1 //+++ITEM01-1-2 //++ITEM01-2 //++ITEM01-3 //+ITEM02 //++ITEM02-1 //++ITEM02-2 //+ITEM03 //~ // //***定義リスト [#k6677796] //HTML の DL(Definition List)にあたるものです。 // :TERM01|DESCRIPTION 01 // :TERM02|DESCRIPTION 02 // :以下略 //:TERM01|DESCRIPTION 01 //:TERM02|DESCRIPTION 02 //:TERM03|DESCRIPTION 03 //~ // // ***囲み表示(整形済みテキスト) [#tdff0f17] 行頭で半角スペースを記述すると、 このようになります。 ~ ***左寄せ・センタリング・右寄せ [#pa2ed307] 行頭に以下の記述で実現します。 LEFT: CENTER: RIGHT: ~ ***文字の強調・斜体・サイズ変更 [#a65e3cc9] 文字列を ' ' (シングルクオーテーション2つ)ではさむと、強... 文字列を ' ' ' (シングルクオーテーション3つ)ではさむと、... 行中に &size(サイズ){(文字列)}; という書き方をすると、文字サイズを指定することができます。 サイズの単位はピクセルです。 ~ ***文字の色の変更 [#yc99c44d] 行中に &color(文字色,背景色){(文字列)}; という書き方をすると、文字色、背景色を指定することができ... 色の指定は、次のいずれかの形式で行ないます。 ・色を意味するキーワード(red, blueなど) ・#16進数6桁(#FF0000) ← 赤です。 ~ ***ページ内の区切り [#q349ab91] 行頭で4つ以上の - を書くと水平線になります。 #hr と書くことでも、同様に水平線が入ります。 ~ ***表組み [#pce94723] 以下のように縦ストロークを利用することで、簡単に表が作成... | TITLE | COLUMN1 | COLUMN2 | COLUMN3 |h | ROW1 | DATA | DATA | DATA | | ROW2 | DATA | DATA | DATA | | ROW3 | DATA | DATA | DATA | | REMARKS | ABC | DEF | GHI |f | TITLE | COLUMN1 | COLUMN2 | COLUMN3 |h | ROW1 | DATA | DATA | DATA | | ROW2 | DATA | DATA | DATA | | ROW3 | DATA | DATA | DATA | | REMARKS | ABC | DEF | GHI |f -幅100%、左揃えになります( PukiWiki デフォルトは幅自動、... -行の最後に h でヘッダー行、f でフッター行 として処理され... -システムの仕様で、罫線は非表示です。 ~ ***表組み(応用) [#q62dc2d6] 以下のように カラム幅を指定することで、レイアウトの調整が... | 20 | 20 | 20 | 20 | 20 | c | TITLE | COLUMN1 | COLUMN2 | COLUMN3 |(空白)| h | ROW1 | DATA | DATA | DATA |(空白)| | ROW2 | DATA | DATA | DATA |(空白)| | ROW3 | DATA | DATA | DATA |(空白)| | REMARKS | ABC | DEF | GHI |(空白)| f |20|20|20|20|20|c | TITLE | COLUMN1 | COLUMN2 | COLUMN3 ||h | ROW1 | DATA | DATA | DATA || | ROW2 | DATA | DATA | DATA || | ROW3 | DATA | DATA | DATA || | REMARKS | ABC | DEF | GHI ||f ~ ***カレンダー2 [#rf61ab34] #calendar2 #calendar2 //~ // //***カレンダー9 [#vf1306d9] //以下の記述で、カレンダーが表示されます。各日記ページに... // #calendar9 // //#calendar9 ~ ***ページ内メニュー [#mc697401] 以下の記述によって、それ以下の見出しが自動的にメニュー化... #contents2_1 ~ ***簡易掲示板 [#ze567670] 編集権限のない一般の方からも、投稿を受付けることができま... #article //#article ~ ***コメント欄 [#i4319165] 編集権限のない一般の方からも、簡単なコメントを受付けるこ... #comment , #comment(below)←投稿されたコメントが下に表示... //#comment(below) ~ //**書籍の紹介 // // &amazon( ISBN ); //~ ***カウンタの表示 [#cebe1f92] &counter そのページにアクセスした人の数を表示することができます。 ・&counter には次のオプションを指定できます。 ・today : 今日のアクセス数を表示します。 ・yesterday : 昨日のアクセス数を表示します。 ・total : アクセス総数を表示します。 &small(オプションを省略した場合はtotalが指定されたものと... ~ ***コメントアウト [#k3a95212] 行頭で // を指定すると、コメント行になります。コメント行... ~ ~ **リンクの張り方 [#y6037325] サイト内の他のページへのリンクを張る内部リンクと、他のサ... ~ ***内部リンク [#xeff41a8] [[(ページ名)]] のように、サイト内のページ名を [[ と ]] で囲むだけでOKで... ~ ***任意のキーワードからの内部リンク [#ua0be9b4] ページ名とは異なるキーワードから、内部リンクしたい場合は、 [[ キーワード > (ページ名) ]] とすればOKです。 ~ ***外部リンク [#caf8c860] [[ キーワード > http:// ~ ]] のように、キーワードとURLを > または : でつなげて [[ と ]... ~ ~ **ページ内容の個別バックアップ [#j66aa81a] システム自体もバックアップを持ちますが、個人のページに関... 編集画面の内容(テキストデータ)をそのままテキストファイ... ''1.Wikiの編集画面に入ります。'' 「編集」->「すべてを選択」 の後 「編集」->「コピー」 ''2.メモ帳やWORDなど何でも構いません。ソフトを起動しま... 「ファイル」->「新規ページ」 の後 「編集」->「ペー... で編集内容が貼り付けられますので、それを保存して下さい。 これで完了です。 もしもの場合は、バックアップしたファイルを開いて、 これと逆の操作をすれば復元できることになります。 原始的な方法ですが、確実です。 ~ ~ *応用編 [#c9e8e0db] ~ **画像の掲載 [#e35c9cca] ***はじめに [#xc194ba3] ページに画像を掲載するには、 -1.画像の準備(Web用に縮小) -2.当該ページにアップロード -3.ページの編集 という3つの手順が必要になります。 ~ ***画像の準備(Web用に縮小) [#u3c74945] デジカメで撮った写真や、スキャナーで取り込んだ写真は、 一般にはWebページ用には大きすぎますので、 画像処理ソフトでサイズ変更する必要があります。 -参考:画像のサイズ変更が一発でできるWebサイトがあります。 Support Ware - Image Resizer|http://myct.jp/resize/ 画像処理ソフトを立ち上げるより簡単です。 ~ ~ ***当該ページにアップロード [#k8c89e57] まず、画像を掲載したいページに移動して下さい(画像はペー... 管理アイコン「添付(クリップ)」をクリックします。 「参照」から用意した画像(○○.jpg)を見つけて選択します。 「添付」をクリックすると画像が送信されて、「(ページ名)... &small(「添付」には編集用とは別の(ページ名変更時と同じ)パ... ~ ***ページの編集 Image [#haf779ee] 当該ページで管理アイコン「編集」をクリックして、編集画面... 画像を掲載したい箇所で、 #image(添付した画像ファイル名) と記述すれば完了です。 サイズを変更したい場合は、 #image(添付した画像ファイル名,right,30%) などと記述すると、画面右寄せで、30%幅で表示されます。 //#image は「クリックで拡大」の機能があります。 //詳細については以下のページで説明しています。 //-[[image プラグインの使い方>Plugin/Image]] ~ ***参考:他のサイトの画像の埋め込み [#kca212ae] Flickrなどにアップ済みの画像であれば、それをリンク表示で... #image(http:// ~ ) ただし、他者の著作物である画像を直接自分のページに埋め込... ~ ***参考:別ページにある画像の利用 [#y2d4e6a9] 別のページに添付された画像を流用したい場合は、以下のよう... #image(添付されたページ名 / 画像ファイル名) //事例、[[images]]ページに掲載されている dummy.jpg をここ... // #image(images/dummy.jpg,left,25%) #image(images/dummy.jpg,left,25%) #clear ~ ~ **PDF等のファイルを提供する [#n0d4e566] 画像の掲載と同様で、以下の手順です。 ***当該ページにアップロード [#m6eb274c] まず、ファイルを提供したいページに移動して下さい(ページ... 管理アイコン「添付(クリップ)」をクリックします。 「参照」から用意したデータを見つけて選択します。 「添付」をクリックするとファイルが送信されて、「(ページ... &small(「添付」には編集用とは別の(ページ名変更時と同じ)パ... ~ ***ページの編集 [#o46d8b6c] 当該ページで管理アイコン「編集」をクリックして、編集画面... ファイルを掲載したい箇所で、 #ref( 添付したファイル名 ); と記述すれば完了です。 &small(アップロードできるファイルは1件につき1MB以内とい... ~ ~ **その他 [#va72baf3] ***Wikiフォルダ内の実ファイル名を知るには(管理者用) [#f... アドレスの入力フォームで、以下のようにコマンドを入力する... http://- URL - /index.php?cmd=filelist ~ ~ #hr ''参考'':[[PukiWiki公式ヘルプ>Help]] ~ ~ ページ名: