QuickGuide
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
早稲田加奈恵
渡邊優希
十時明日香
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
佐藤美月
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
庭瀬美来
橋本音花
若狭映那
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
地域ブランド企画演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
地域ブランド企画演習IIIA
地域ブランド企画演習IIIB
情報デザイン研究II
地域ブランド企画研究II
通信ネットワーク演習
データサイエンス
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*QuickGuide
RIGHT:[[▶︎ 動画解説>QuickGuide/Video/限定]]
~
***CONTENTS
#contents2_1
~
~
**はじめに
[[PukiWiki>https://pukiwiki.osdn.jp/]] は Webブラウザ...
~
***利用者ID とパスワード
限定公開ページの閲覧、記事の編集、ファイルのアップロード...
~
***はじめに現在のページ名をご確認下さい
Wiki はページ単位に管理されるものなので「ページ名」は非常...
Wikipedia 等では、ページの最上部に大きく表示されますが、...
#image(PageName.png,right,30%)
-例えば、JohnSmith さんのページであれば、右図のようにロゴ...
-基本的に、あなた(このWikiサイトへの参加者)が編集するペ...
-ページの編集中は「 @◯◯◯◯ の編集」、また画像をアップロー...
~
~
**編集・新規作成・削除
***ページを編集・更新するには
#image(EditButton.png,right,30%)
-編集対象となるページ(あなた自身の名前がページ名とな...
-ここで、利用者ID、パスワードが求められます。事前にお伝え...
#image(EditWindow.png,right,30%)
-ログインに成功すると、右のような編集画面が表示されます...
-試しに、適当な文字を書いてみてください。
-編集後に「更新」を押して下さい。編集した結果がペーシ...
~
***新規にページを作成するには
-ページフッターの「NEW」のボタンをクリックして、ペー...
-あとは、上記の編集のプロセスと同じです。
~
***ページを削除するには
-編集画面内ですべての記述を削除して更新するとペーシ...
-間違ってページを作成してしまった場合は、この方法で削除し...
-くれぐれも必要なページを削除しないよう、''現在のページ名...
~
~
**ページ内の編集記法
***基本3要素
記事の基本要素は、''見出し・本文・箇条書き'' です。これを...
&small(ちなみにこのページも、見出し・本文・箇条書きと、画...
-行頭に''半角アスタリスク [ * ]'' を付けると''見出し''に...
*: 大見出し
**:中見出し
***:小見出し
-編集画面で入力した文章はそのまま''本文段落''として表示...
ワードプロセッサでの記述とWeb記事の違いで、ちょっと違和感...
画面上で大きく行間を開けたい場合は、''半角のチルダ記号 ...
~
-''行頭にハイフン ( - ) ''を付けると''箇条書き ( リスト )...
-: 箇条書きレベル1
--:箇条書きレベル2
---:箇条書きレベル3
~
***特殊な記法
-''行頭に半角スペース''があると、''整形済みテキスト''...
*大見出し ← 実際に大見出しとしてではなく、そのまま表示...
この部分は、行頭に「半角スペース」があります。
-''行頭に半角の2連スラッシュ [ // ] ''を書くと、その行は...
// この部分はコメントとして、編集画面の中のみに表示され...
// このようにして、非表示にすることを「コメントアウト」...
~
~
**リンクの掲載
リンクとは、あるページから別のページへと、クリックで誘導...
リンクには、同一サイト内の別ページにジャンプする「内部...
~
***内部リンク
-同一のサイト内にある別ページへのリンクを「内部リンク」と...
-Wikiでは、''既存のページ名を二重括弧 [[ ]]で括る''...
[[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
v= の後の文字列 ''EexXu1UhLMY'' が動画のIDです。
//#image(QuickGuide/youtubeID.png,right,30%)
-動画のIDは、共有ボタンから見つけることもできます。YouTub...
https://youtu.be/''EexXu1UhLMY''?si=QLVu0Plsh4WJVg-f
このとき''[ ・・.be/ ] の後の太字部分が動画のID''です。
-このIDを使って以下のように記載すると動画が表示されます。
#youtube(EexXu1UhLMY)
#youtube(EexXu1UhLMY)
-サイズ変更等、いくつかのオプションの利用も可能です。詳細...
--[[Plugin/YouTube]]
--[[Plugin/Vimeo]]
~
***付記:動画の埋め込みはOKです。
YouTubeなどの「動画共有サイト」は、文字通り、動画を共有す...
但し、違法にアップロードされた動画は、それ自体が問題で...
~
~
**画像の掲載
画像つまり、写真やイラストの掲載には、いくつかの予備知識...
はじめに、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の場合、利用者がアップした画像は、サービス...
~
以上、ご自身の経験上、問題なければ、先へ進んでください。
''画像の最適化について自信がない方は、以下のページをお読...
画像のサイズを変更するためのWebサービスも紹介しています。
-[[EditGuide/Images]]
~
***面倒な話は抜きで、とりあえず試したい・・という方へ
#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/限定]]
~
***CONTENTS
#contents2_1
~
~
**はじめに
[[PukiWiki>https://pukiwiki.osdn.jp/]] は Webブラウザ...
~
***利用者ID とパスワード
限定公開ページの閲覧、記事の編集、ファイルのアップロード...
~
***はじめに現在のページ名をご確認下さい
Wiki はページ単位に管理されるものなので「ページ名」は非常...
Wikipedia 等では、ページの最上部に大きく表示されますが、...
#image(PageName.png,right,30%)
-例えば、JohnSmith さんのページであれば、右図のようにロゴ...
-基本的に、あなた(このWikiサイトへの参加者)が編集するペ...
-ページの編集中は「 @◯◯◯◯ の編集」、また画像をアップロー...
~
~
**編集・新規作成・削除
***ページを編集・更新するには
#image(EditButton.png,right,30%)
-編集対象となるページ(あなた自身の名前がページ名とな...
-ここで、利用者ID、パスワードが求められます。事前にお伝え...
#image(EditWindow.png,right,30%)
-ログインに成功すると、右のような編集画面が表示されます...
-試しに、適当な文字を書いてみてください。
-編集後に「更新」を押して下さい。編集した結果がペーシ...
~
***新規にページを作成するには
-ページフッターの「NEW」のボタンをクリックして、ペー...
-あとは、上記の編集のプロセスと同じです。
~
***ページを削除するには
-編集画面内ですべての記述を削除して更新するとペーシ...
-間違ってページを作成してしまった場合は、この方法で削除し...
-くれぐれも必要なページを削除しないよう、''現在のページ名...
~
~
**ページ内の編集記法
***基本3要素
記事の基本要素は、''見出し・本文・箇条書き'' です。これを...
&small(ちなみにこのページも、見出し・本文・箇条書きと、画...
-行頭に''半角アスタリスク [ * ]'' を付けると''見出し''に...
*: 大見出し
**:中見出し
***:小見出し
-編集画面で入力した文章はそのまま''本文段落''として表示...
ワードプロセッサでの記述とWeb記事の違いで、ちょっと違和感...
画面上で大きく行間を開けたい場合は、''半角のチルダ記号 ...
~
-''行頭にハイフン ( - ) ''を付けると''箇条書き ( リスト )...
-: 箇条書きレベル1
--:箇条書きレベル2
---:箇条書きレベル3
~
***特殊な記法
-''行頭に半角スペース''があると、''整形済みテキスト''...
*大見出し ← 実際に大見出しとしてではなく、そのまま表示...
この部分は、行頭に「半角スペース」があります。
-''行頭に半角の2連スラッシュ [ // ] ''を書くと、その行は...
// この部分はコメントとして、編集画面の中のみに表示され...
// このようにして、非表示にすることを「コメントアウト」...
~
~
**リンクの掲載
リンクとは、あるページから別のページへと、クリックで誘導...
リンクには、同一サイト内の別ページにジャンプする「内部...
~
***内部リンク
-同一のサイト内にある別ページへのリンクを「内部リンク」と...
-Wikiでは、''既存のページ名を二重括弧 [[ ]]で括る''...
[[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
v= の後の文字列 ''EexXu1UhLMY'' が動画のIDです。
//#image(QuickGuide/youtubeID.png,right,30%)
-動画のIDは、共有ボタンから見つけることもできます。YouTub...
https://youtu.be/''EexXu1UhLMY''?si=QLVu0Plsh4WJVg-f
このとき''[ ・・.be/ ] の後の太字部分が動画のID''です。
-このIDを使って以下のように記載すると動画が表示されます。
#youtube(EexXu1UhLMY)
#youtube(EexXu1UhLMY)
-サイズ変更等、いくつかのオプションの利用も可能です。詳細...
--[[Plugin/YouTube]]
--[[Plugin/Vimeo]]
~
***付記:動画の埋め込みはOKです。
YouTubeなどの「動画共有サイト」は、文字通り、動画を共有す...
但し、違法にアップロードされた動画は、それ自体が問題で...
~
~
**画像の掲載
画像つまり、写真やイラストの掲載には、いくつかの予備知識...
はじめに、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の場合、利用者がアップした画像は、サービス...
~
以上、ご自身の経験上、問題なければ、先へ進んでください。
''画像の最適化について自信がない方は、以下のページをお読...
画像のサイズを変更するためのWebサービスも紹介しています。
-[[EditGuide/Images]]
~
***面倒な話は抜きで、とりあえず試したい・・という方へ
#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...
~
~
~
ページ名: