QuickGuide
をテンプレートにして作成
HOME
ABOUT
造形表現専攻概要
大学院進学希望の方へ
INFORMATION
論文等執筆要領
学位申請に関わる書類
学位論文等スケジュール
研究成果の公表
大学からのお知らせ
STUDENTS
STAFF
[ EDIT ]
?
SEARCH
開始行:
*QuickGuide
~
RIGHT:[[動画解説(要ログイン)>QuickGuide/Video/限定]]
~
***はじめに
当サイトは、Webブラウザからページの発行・編集なと...
Wikipedia と同様の [[Markdown>Google:Markdown]] 形式なの...
~
***利用者ID とパスワード
限定公開ページの閲覧、記事の編集、ファイルのアップロード...
~
***はじめに現在のページ名をご確認下さい
Wiki はページ単位に管理されるものなので「ページ名」は非常...
Wikipedia 等では、ページの最上部に大きく表示されますが、...
#image(PageName.png , right , 30%)
-例えば、JohnSmith さんのページであれば、右図のようにロゴ...
-ページの編集中は「 @◯◯◯◯ の編集」、また画像をアップロー...
~
~
**編集・新規作成・削除
***ページを編集・更新するには
#image(EditButton.png,right,30%)
-編集対象となるページを表示して、ページフッター(ペー...
-ここで、利用者ID、パスワードが求められます。事前にお伝え...
#image(EditWindow.png,right,30%)
-ログインに成功すると、右のような編集画面が表示されます...
-試しに、適当な文字を書いてみてください。
-編集後に「更新」を押して下さい。編集した結果がペーシ...
~
***新規にページを作成するには
-ページフッターの「NEW」のボタンをクリックして、ペー...
-あとは、上記の編集のプロセスと同じです。
~
***ページを削除するには
-編集画面内ですべての記述を削除して「更新」すると、ヘ...
-間違ってページを作成してしまった場合は、この方法で削除し...
-くれぐれも、必要なページを削除しないよう、''現在のページ...
~
~
**ページ内の編集記法
***基本3要素
記事の基本要素は、''見出し・本文・箇条書き'' です。これを...
&small(ちなみにこのページも、見出し・本文・箇条書きと、画...
-行頭に''半角アスタリスク [ * ]'' を付けると''見出し''に...
*: 大見出し
**:中見出し
***:小見出し
-編集画面で入力した文章はそのまま''本文段落''として表示...
ワードプロセッサでの記述とWeb記事の違いで、ちょっと違和感...
画面上で大きく行間を開けたい場合は、''半角のチルダ記号 ...
~
-''行頭にハイフン ( - ) ''を付けると''箇条書き ( リスト )...
-: 箇条書きレベル1
--:箇条書きレベル2
---:箇条書きレベル3
~
***特殊な記法
-''行頭に半角スペース''があると、''整形済みテキスト''...
*大見出し ← 実際に大見出しとしてではなく、そのまま表示...
この部分は、行頭に「半角スペース」があります。
-''行頭に半角の2連スラッシュ [ // ] ''を書くと、その行は...
// この部分はコメントとして、編集画面の中のみに表示され...
// このようにして、非表示にすることを「コメントアウト」...
~
~
**リンクの掲載
リンクとは、あるページから別のページへと、クリックで誘導...
リンクには、同一サイト内の別ページにジャンプする「内部...
~
***内部リンク
-同一のサイト内にある別ページへのリンクを「内部リンク」と...
-Wikiでは、''既存のページ名を二重括弧 [[ ]]で括る''...
[[JohnSmith]] ← JohnSmithさんのページへジャンプしま...
[[JohnSmith]]
-以下のように''リダイレクト記号 [ > ] ''を用いると、任意...
詳細は [[こちら>EditGuide]] をご覧ください。
詳細は [[こちら>EditGuide]] をご覧ください。
~
***外部リンク
-他所のWebサイトへのリンクを「外部リンク」と言います。
-Wikiでは、''URLを直接記載する''だけでリンクになります。
https://www.kyusan-u.ac.jp
-以下のように''リダイレクト記号 [ > ] ''を用いると、任意...
[[九州産業大学>https://www.kyusan-u.ac.jp]]
[[九州産業大学>https://www.kyusan-u.ac.jp]]
~
***付記:リンクに許諾は不要です
重要なことですが、''リンクするのに相手の許諾は不要です。'...
Webサイトというものは、あちこちからリンクされる(被リン...
~
~
**動画の掲載
当サイトでは、YouTube, Vimeo の動画を簡単に埋め込み掲載で...
~
***動画の掲載手順
-動画のID を取得します。例えば、動画のURL(アドレス)が以...
https://www.youtube.com/watch?v=EexXu1UhLMY
-このIDを使って以下のように記載すると動画が表示されます。
#youtube(EexXu1UhLMY)
#youtube(EexXu1UhLMY)
-サイズ変更等、いくつかのオプションの利用も可能です。詳細...
--[[Plugin/YouTube]]
--[[Plugin/Vimeo]]
~
***付記:動画の埋め込みはOKです。
YouTubeなどの「動画共有サイト」は、文字通り、動画を共有す...
但し、違法にアップロードされた動画は、それ自体が問題で...
&aname(images);
~
~
**画像の掲載
画像つまり、写真やイラストの掲載には、いくつかの予備知識...
はじめに、Web用の画像の最適化について、確認・下準備を行な...
~
***画像の掲載に必要な予備知識
はじめに、''画像データの取り扱いに関するあなたの現在の知...
-画像ファイルを自由に移動できますか?
--スマホで撮影した写真をSNSにアップする
--''スマホ・デジカメで撮影した写真をパソコンに取り込む''
&small(AirDrop、iCloud 経由、GoogleDrive経由、MicroSD・・...
--デジカメで記録したSDカード等のデータをパソコンに取り込む
-拡張子について知っていますか?
画像に限らず、コンピュータが扱うファイルには、ファイルの...
--sample.jpg :JPEG形式の写真のデータ
--sample.docx:WORDで作成された文書データ
--sample.html:一般的なWebページのファイル
-画像データの形式について知っていますか?
Webに掲載できる画像には、一般に以下の形式(拡張子)があり...
--JPEG(.jpg):細かな色の変化の多い「写真(自然物)」向...
--PNG(.png):スクリーンショットなどの「画像(人工的なも...
--GIF(.gif):フラットな塗りの多いイラスト等で、効率よく...
-&color(red){付記:iPhone特有の HEIC(.heic)形式の画像は...
Web用に利用するには、以下の2つの手段が考えられます。
--iPhone の設定・アプリ>カメラ>フォーマット>''互換性優...
--以下のような画像フォーマット変換サービスにアップして変換
https://convertio.co/ja/heic-jpg/
-画像サイズを最適化できますか?
SNSにアップする場合と違って、画像はあらかじめWebに適した...
&small(注)SNSの場合、利用者がアップした画像は、サービス...
~
~
***面倒な話は抜きで、とりあえず試したい・・という方へ
#image(QuickGuide/MonaLisa.jpg,right,20%)
-右のモナリザの画像を「右クリック>画像を保存」などで、あ...
-それを、以下の説明に沿ってアップ・掲載をお試しください。
-この画像は、PublicDomain つまり著作権が切れた共有財産と...
~
***参考:画像のリサイズが簡単にできるオンラインツール
以下、2つ紹介します。''Google Squoosh''がおすすめです。
-''Google Squoosh'':https://squoosh.app/
[[参考:Google Squooshの使い方>https://blog.marswee.com/e...
-''Bulk Resize Photos'':https://bulkresizephotos.com/
[[参考:Bulk Resize Photosの使い方>https://freesoft-100.c...
~
***Wikiへの画像の掲載手順
-画像は''それを掲載するページにアップロード(添付)''する...
&color(red){''今見えているのが自分のページであることを確...
~
#image(QuickGuide/Upload.png,right,30%)
-画像を掲載するページのフッター(ページの一番下の部分)で...
-ファイルのアップロードを促す画面が表示されるので、「ファ...
-管理者パスワードが要求されますが、みなさんが今使っている...
-注)&color(red){ご注意下さい。アップした時点でインターネ...
#image(QuickGuide/Attach.png,right,30%)
-アップロードが完了すると、ページには、右図のように、画像...
-注)&color(red){''間違えてアップロードした場合の削除は?...
&color(red){添付ファイルの右側にある「詳細」ボタンをクリ...
-次に、ページの編集を行います。ページフッターのEDIT から...
#image(sample.jpg)
#image(images/sample.jpg)
&color(red){''sample.jpg'' の部分は、掲載する画像のファイ...
-以下のように、サイズ調整、レイアウトが可能です。
--画面幅の 50%・左寄せで表示
#image( 画像ファイル名 , left , 50% )
--画面幅の 20% で横に並べて表示
&image( 画像ファイル名 ,, 20% ); &image( 画像ファイル名 ...
-注)説明では、読みやすくするために項目間に余白を作ってい...
#image( sample.jpg , left , 50% ) ← ダメです。
#image(sample.jpg,left,50%) ← OK。
~
***画像の「回り込み」とその解除
画像を左右に振った場合、その下の文章が空いたすき間にせり...
#clear
~
//''普通に記載した場合''
// #image(images/sample.jpg,right,30%)
// Lorem Ipsum is simply dummy text of the printing and t...
//
// Lorem Ipsum has been the industry's standard dummy te...
// 1500s, when an unknown printer took a galley of type a...
// make a type specimen book.
//#image(images/sample.jpg,right,30%)
//Lorem Ipsum is simply dummy text of the printing and ty...
//
//Lorem Ipsum has been the industry's standard dummy text...
//~
''具体例''
#image(images/sample.jpg,right,30%)
Lorem Ipsum is simply dummy text of the printing and typ...
#clear
[ここから次のブロックの文章] Lorem Ipsum has been the in...
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to
make a type specimen book.
#image(images/sample.jpg,right,30%)
Lorem Ipsum is simply dummy text of the printing and type...
#clear
[ここから次のブロックの文章] Lorem Ipsum has been the ind...
~
~
~
終了行:
*QuickGuide
~
RIGHT:[[動画解説(要ログイン)>QuickGuide/Video/限定]]
~
***はじめに
当サイトは、Webブラウザからページの発行・編集なと...
Wikipedia と同様の [[Markdown>Google:Markdown]] 形式なの...
~
***利用者ID とパスワード
限定公開ページの閲覧、記事の編集、ファイルのアップロード...
~
***はじめに現在のページ名をご確認下さい
Wiki はページ単位に管理されるものなので「ページ名」は非常...
Wikipedia 等では、ページの最上部に大きく表示されますが、...
#image(PageName.png , right , 30%)
-例えば、JohnSmith さんのページであれば、右図のようにロゴ...
-ページの編集中は「 @◯◯◯◯ の編集」、また画像をアップロー...
~
~
**編集・新規作成・削除
***ページを編集・更新するには
#image(EditButton.png,right,30%)
-編集対象となるページを表示して、ページフッター(ペー...
-ここで、利用者ID、パスワードが求められます。事前にお伝え...
#image(EditWindow.png,right,30%)
-ログインに成功すると、右のような編集画面が表示されます...
-試しに、適当な文字を書いてみてください。
-編集後に「更新」を押して下さい。編集した結果がペーシ...
~
***新規にページを作成するには
-ページフッターの「NEW」のボタンをクリックして、ペー...
-あとは、上記の編集のプロセスと同じです。
~
***ページを削除するには
-編集画面内ですべての記述を削除して「更新」すると、ヘ...
-間違ってページを作成してしまった場合は、この方法で削除し...
-くれぐれも、必要なページを削除しないよう、''現在のページ...
~
~
**ページ内の編集記法
***基本3要素
記事の基本要素は、''見出し・本文・箇条書き'' です。これを...
&small(ちなみにこのページも、見出し・本文・箇条書きと、画...
-行頭に''半角アスタリスク [ * ]'' を付けると''見出し''に...
*: 大見出し
**:中見出し
***:小見出し
-編集画面で入力した文章はそのまま''本文段落''として表示...
ワードプロセッサでの記述とWeb記事の違いで、ちょっと違和感...
画面上で大きく行間を開けたい場合は、''半角のチルダ記号 ...
~
-''行頭にハイフン ( - ) ''を付けると''箇条書き ( リスト )...
-: 箇条書きレベル1
--:箇条書きレベル2
---:箇条書きレベル3
~
***特殊な記法
-''行頭に半角スペース''があると、''整形済みテキスト''...
*大見出し ← 実際に大見出しとしてではなく、そのまま表示...
この部分は、行頭に「半角スペース」があります。
-''行頭に半角の2連スラッシュ [ // ] ''を書くと、その行は...
// この部分はコメントとして、編集画面の中のみに表示され...
// このようにして、非表示にすることを「コメントアウト」...
~
~
**リンクの掲載
リンクとは、あるページから別のページへと、クリックで誘導...
リンクには、同一サイト内の別ページにジャンプする「内部...
~
***内部リンク
-同一のサイト内にある別ページへのリンクを「内部リンク」と...
-Wikiでは、''既存のページ名を二重括弧 [[ ]]で括る''...
[[JohnSmith]] ← JohnSmithさんのページへジャンプしま...
[[JohnSmith]]
-以下のように''リダイレクト記号 [ > ] ''を用いると、任意...
詳細は [[こちら>EditGuide]] をご覧ください。
詳細は [[こちら>EditGuide]] をご覧ください。
~
***外部リンク
-他所のWebサイトへのリンクを「外部リンク」と言います。
-Wikiでは、''URLを直接記載する''だけでリンクになります。
https://www.kyusan-u.ac.jp
-以下のように''リダイレクト記号 [ > ] ''を用いると、任意...
[[九州産業大学>https://www.kyusan-u.ac.jp]]
[[九州産業大学>https://www.kyusan-u.ac.jp]]
~
***付記:リンクに許諾は不要です
重要なことですが、''リンクするのに相手の許諾は不要です。'...
Webサイトというものは、あちこちからリンクされる(被リン...
~
~
**動画の掲載
当サイトでは、YouTube, Vimeo の動画を簡単に埋め込み掲載で...
~
***動画の掲載手順
-動画のID を取得します。例えば、動画のURL(アドレス)が以...
https://www.youtube.com/watch?v=EexXu1UhLMY
-このIDを使って以下のように記載すると動画が表示されます。
#youtube(EexXu1UhLMY)
#youtube(EexXu1UhLMY)
-サイズ変更等、いくつかのオプションの利用も可能です。詳細...
--[[Plugin/YouTube]]
--[[Plugin/Vimeo]]
~
***付記:動画の埋め込みはOKです。
YouTubeなどの「動画共有サイト」は、文字通り、動画を共有す...
但し、違法にアップロードされた動画は、それ自体が問題で...
&aname(images);
~
~
**画像の掲載
画像つまり、写真やイラストの掲載には、いくつかの予備知識...
はじめに、Web用の画像の最適化について、確認・下準備を行な...
~
***画像の掲載に必要な予備知識
はじめに、''画像データの取り扱いに関するあなたの現在の知...
-画像ファイルを自由に移動できますか?
--スマホで撮影した写真をSNSにアップする
--''スマホ・デジカメで撮影した写真をパソコンに取り込む''
&small(AirDrop、iCloud 経由、GoogleDrive経由、MicroSD・・...
--デジカメで記録したSDカード等のデータをパソコンに取り込む
-拡張子について知っていますか?
画像に限らず、コンピュータが扱うファイルには、ファイルの...
--sample.jpg :JPEG形式の写真のデータ
--sample.docx:WORDで作成された文書データ
--sample.html:一般的なWebページのファイル
-画像データの形式について知っていますか?
Webに掲載できる画像には、一般に以下の形式(拡張子)があり...
--JPEG(.jpg):細かな色の変化の多い「写真(自然物)」向...
--PNG(.png):スクリーンショットなどの「画像(人工的なも...
--GIF(.gif):フラットな塗りの多いイラスト等で、効率よく...
-&color(red){付記:iPhone特有の HEIC(.heic)形式の画像は...
Web用に利用するには、以下の2つの手段が考えられます。
--iPhone の設定・アプリ>カメラ>フォーマット>''互換性優...
--以下のような画像フォーマット変換サービスにアップして変換
https://convertio.co/ja/heic-jpg/
-画像サイズを最適化できますか?
SNSにアップする場合と違って、画像はあらかじめWebに適した...
&small(注)SNSの場合、利用者がアップした画像は、サービス...
~
~
***面倒な話は抜きで、とりあえず試したい・・という方へ
#image(QuickGuide/MonaLisa.jpg,right,20%)
-右のモナリザの画像を「右クリック>画像を保存」などで、あ...
-それを、以下の説明に沿ってアップ・掲載をお試しください。
-この画像は、PublicDomain つまり著作権が切れた共有財産と...
~
***参考:画像のリサイズが簡単にできるオンラインツール
以下、2つ紹介します。''Google Squoosh''がおすすめです。
-''Google Squoosh'':https://squoosh.app/
[[参考:Google Squooshの使い方>https://blog.marswee.com/e...
-''Bulk Resize Photos'':https://bulkresizephotos.com/
[[参考:Bulk Resize Photosの使い方>https://freesoft-100.c...
~
***Wikiへの画像の掲載手順
-画像は''それを掲載するページにアップロード(添付)''する...
&color(red){''今見えているのが自分のページであることを確...
~
#image(QuickGuide/Upload.png,right,30%)
-画像を掲載するページのフッター(ページの一番下の部分)で...
-ファイルのアップロードを促す画面が表示されるので、「ファ...
-管理者パスワードが要求されますが、みなさんが今使っている...
-注)&color(red){ご注意下さい。アップした時点でインターネ...
#image(QuickGuide/Attach.png,right,30%)
-アップロードが完了すると、ページには、右図のように、画像...
-注)&color(red){''間違えてアップロードした場合の削除は?...
&color(red){添付ファイルの右側にある「詳細」ボタンをクリ...
-次に、ページの編集を行います。ページフッターのEDIT から...
#image(sample.jpg)
#image(images/sample.jpg)
&color(red){''sample.jpg'' の部分は、掲載する画像のファイ...
-以下のように、サイズ調整、レイアウトが可能です。
--画面幅の 50%・左寄せで表示
#image( 画像ファイル名 , left , 50% )
--画面幅の 20% で横に並べて表示
&image( 画像ファイル名 ,, 20% ); &image( 画像ファイル名 ...
-注)説明では、読みやすくするために項目間に余白を作ってい...
#image( sample.jpg , left , 50% ) ← ダメです。
#image(sample.jpg,left,50%) ← OK。
~
***画像の「回り込み」とその解除
画像を左右に振った場合、その下の文章が空いたすき間にせり...
#clear
~
//''普通に記載した場合''
// #image(images/sample.jpg,right,30%)
// Lorem Ipsum is simply dummy text of the printing and t...
//
// Lorem Ipsum has been the industry's standard dummy te...
// 1500s, when an unknown printer took a galley of type a...
// make a type specimen book.
//#image(images/sample.jpg,right,30%)
//Lorem Ipsum is simply dummy text of the printing and ty...
//
//Lorem Ipsum has been the industry's standard dummy text...
//~
''具体例''
#image(images/sample.jpg,right,30%)
Lorem Ipsum is simply dummy text of the printing and typ...
#clear
[ここから次のブロックの文章] Lorem Ipsum has been the in...
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to
make a type specimen book.
#image(images/sample.jpg,right,30%)
Lorem Ipsum is simply dummy text of the printing and type...
#clear
[ここから次のブロックの文章] Lorem Ipsum has been the ind...
~
~
~
ページ名: