QuickGuide をテンプレートにして作成

開始行:
*QuickGuide ~ ***はじめに [[PukiWiki>https://pukiwiki.sourceforge.io/]] は Webブ... ~ ***利用者ID とパスワード 限定公開ページの閲覧、記事の編集、ファイルのアップロード... ~ ***はじめに現在のページ名をご確認下さい Wiki はページ単位に管理されるものなので「ページ名」は非常... Wikipedia 等では、ページの最上部に大きく表示されますが、... #image(PageName.png,right,30%) -例えば、JohnSmith さんのページであれば、右図のようにロゴ... -基本的に、あなた（このWikiサイトへの参加者）が編集するペ... -ページの編集中は「 @◯◯◯◯ の編集」、また画像をアップロー... ~ ~ **編集・新規作成・削除 ***ページを編集・更新するには #image(EditButton.png,right,30%) -編集対象となるページ（あなた自身の名前がページ名とな... -ここで、利用者ID、パスワードが求められます。事前にお伝え... #image(EditWindow.png,right,30%) -ログインに成功すると、右のような編集画面が表示されます... -試しに、適当な文字を書いてみてください。 -編集後に「更新」を押して下さい。編集した結果がペーシ... ~ ***新規にページを作成するには -ページフッターの「NEW」のボタンをクリックして、ペー... -あとは、上記の編集のプロセスと同じです。 ~ ***ページを削除するには -編集画面内ですべての記述を削除して「更新」すると、ヘ... -間違ってページを作成してしまった場合は、この方法で削除し... -くれぐれも、必要なページを削除しないよう、''現在のページ... ~ ~ **ページ内の編集記法 ***基本３要素 記事の基本要素は、''見出し・本文・箇条書き'' です。これを... &small(ちなみにこのページも、見出し・本文・箇条書きと、画... -行頭に''半角アスタリスク [ * ]'' を付けると''見出し''に... *： 大見出し **：中見出し ***：小見出し -編集画面で入力した文章はそのまま''本文段落''として表示... ワードプロセッサでの記述とWeb記事の違いで、ちょっと違和感... 画面上で大きく行間を開けたい場合は、''半角のチルダ記号 ... ~ -''行頭にハイフン ( - ) ''を付けると''箇条書き ( リスト )... -： 箇条書きレベル１ --：箇条書きレベル２ ---：箇条書きレベル３ ~ ***特殊な記法 -''行頭に半角スペース''があると、''整形済みテキスト''... *大見出し　← 実際に大見出しとしてではなく、そのまま表示... この部分は、行頭に「半角スペース」があります。 -''行頭に半角の２連スラッシュ [ // ] を書くと、その行は、... // この部分はコメントとして、編集画面の中のみに表示され... // このようにして、非表示にすることを「コメントアウト」... ~ ~ **リンクの掲載 リンクとは、あるページから別のページへと、クリックで誘導... 　リンクには、同一サイト内の別ページにジャンプする「内部... ~ ***内部リンク -同一のサイト内にある別ページへのリンクを「内部リンク」と... -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 #image(QuickGuide/youtubeID.png,right,30%) -動画のIDは、共有ボタンから見つけることもできます。YouTub... -この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用に利用するには、以下の２つの手段が考えられます。 --iPhone の設定・アプリ＞カメラ＞フォーマット＞''互換性優... --以下のような画像フォーマット変換サービスにアップして変換 https://convertio.co/ja/heic-jpg/ -画像サイズを最適化できますか？ SNSにアップする場合と違って、画像はあらかじめWebに適した... &small(注）SNSの場合、利用者がアップした画像は、サービス... ~ 以上、ご自身の経験上、問題なければ、先へ進んでください。 ''画像の最適化について自信がない方は、以下のページをお読... 画像のサイズを変更するためのWebサービスも紹介しています。 -[[WebDesign/Images]] ~ ***面倒な話は抜きで、とりあえず試したい・・という方へ #image(QuickGuide/MonaLisa.jpg,right,20%) -右のモナリザの画像を「右クリック＞画像を保存」などで、あ... -それを、以下の説明に沿ってアップ・掲載をお試しください。 -この画像は、PublicDomain つまり著作権が切れた共有財産と... ~ ***参考：画像のリサイズが簡単にできるオンラインツール 以下、２つ紹介します。''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 ~ ***はじめに [[PukiWiki>https://pukiwiki.sourceforge.io/]] は Webブ... ~ ***利用者ID とパスワード 限定公開ページの閲覧、記事の編集、ファイルのアップロード... ~ ***はじめに現在のページ名をご確認下さい Wiki はページ単位に管理されるものなので「ページ名」は非常... Wikipedia 等では、ページの最上部に大きく表示されますが、... #image(PageName.png,right,30%) -例えば、JohnSmith さんのページであれば、右図のようにロゴ... -基本的に、あなた（このWikiサイトへの参加者）が編集するペ... -ページの編集中は「 @◯◯◯◯ の編集」、また画像をアップロー... ~ ~ **編集・新規作成・削除 ***ページを編集・更新するには #image(EditButton.png,right,30%) -編集対象となるページ（あなた自身の名前がページ名とな... -ここで、利用者ID、パスワードが求められます。事前にお伝え... #image(EditWindow.png,right,30%) -ログインに成功すると、右のような編集画面が表示されます... -試しに、適当な文字を書いてみてください。 -編集後に「更新」を押して下さい。編集した結果がペーシ... ~ ***新規にページを作成するには -ページフッターの「NEW」のボタンをクリックして、ペー... -あとは、上記の編集のプロセスと同じです。 ~ ***ページを削除するには -編集画面内ですべての記述を削除して「更新」すると、ヘ... -間違ってページを作成してしまった場合は、この方法で削除し... -くれぐれも、必要なページを削除しないよう、''現在のページ... ~ ~ **ページ内の編集記法 ***基本３要素 記事の基本要素は、''見出し・本文・箇条書き'' です。これを... &small(ちなみにこのページも、見出し・本文・箇条書きと、画... -行頭に''半角アスタリスク [ * ]'' を付けると''見出し''に... *： 大見出し **：中見出し ***：小見出し -編集画面で入力した文章はそのまま''本文段落''として表示... ワードプロセッサでの記述とWeb記事の違いで、ちょっと違和感... 画面上で大きく行間を開けたい場合は、''半角のチルダ記号 ... ~ -''行頭にハイフン ( - ) ''を付けると''箇条書き ( リスト )... -： 箇条書きレベル１ --：箇条書きレベル２ ---：箇条書きレベル３ ~ ***特殊な記法 -''行頭に半角スペース''があると、''整形済みテキスト''... *大見出し　← 実際に大見出しとしてではなく、そのまま表示... この部分は、行頭に「半角スペース」があります。 -''行頭に半角の２連スラッシュ [ // ] を書くと、その行は、... // この部分はコメントとして、編集画面の中のみに表示され... // このようにして、非表示にすることを「コメントアウト」... ~ ~ **リンクの掲載 リンクとは、あるページから別のページへと、クリックで誘導... 　リンクには、同一サイト内の別ページにジャンプする「内部... ~ ***内部リンク -同一のサイト内にある別ページへのリンクを「内部リンク」と... -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 #image(QuickGuide/youtubeID.png,right,30%) -動画のIDは、共有ボタンから見つけることもできます。YouTub... -この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用に利用するには、以下の２つの手段が考えられます。 --iPhone の設定・アプリ＞カメラ＞フォーマット＞''互換性優... --以下のような画像フォーマット変換サービスにアップして変換 https://convertio.co/ja/heic-jpg/ -画像サイズを最適化できますか？ SNSにアップする場合と違って、画像はあらかじめWebに適した... &small(注）SNSの場合、利用者がアップした画像は、サービス... ~ 以上、ご自身の経験上、問題なければ、先へ進んでください。 ''画像の最適化について自信がない方は、以下のページをお読... 画像のサイズを変更するためのWebサービスも紹介しています。 -[[WebDesign/Images]] ~ ***面倒な話は抜きで、とりあえず試したい・・という方へ #image(QuickGuide/MonaLisa.jpg,right,20%) -右のモナリザの画像を「右クリック＞画像を保存」などで、あ... -それを、以下の説明に沿ってアップ・掲載をお試しください。 -この画像は、PublicDomain つまり著作権が切れた共有財産と... ~ ***参考：画像のリサイズが簡単にできるオンラインツール 以下、２つ紹介します。''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... ~ ~ ~

ページ名: