「編集ガイド」の版間の差分

提供: JSSD5th2019
Jump to navigation Jump to search
(→‎画像を掲載するコードについて)
(→‎画像を掲載するコードを書く)
 
(2人の利用者による、間の47版が非表示)
5行目: 5行目:
 
==はじめに==
 
==はじめに==
  
−
書きかけです。
+
* このページでは、雛形に入力された記号の意味について解説するとともに、いくつかの応用的な記法を紹介しています。
−
 
+
* 思い通りの表示ができない場合は、まず以下の各ルールをご確認下さい。
−
*ページ内の「目次」は、ページ内の見出し階層から自動生成されます。
+
* 尚、ページに表示される「目次」は、ページ内の見出し階層から自動生成されます。
 +
* 以下の内容について '''[[解説動画|解説動画も用意しています。]]'''
  
 
<br>
 
<br>
14行目: 15行目:
 
==本文の編集について==
 
==本文の編集について==
  
−
===見出し / 箇条書き / 本文===
+
===文章段落===
 +
編集画面内での改行は画面には反映されません。連続する文章は一つの段落内に連続する文字列とみなされ、文章の幅はウインドウの幅に応じて変化します（リキッドレイアウト）。
 +
* 強制的に改行を行う場合は、行末に <nowiki><br></nowiki> タグを書いて下さい。
 +
* 一行の空改行で「段落区切り」の扱いになります。
 +
* 二行の空改行で１行分の空きができます。
 +
<br>
 +
 
 +
===見出し===
 +
見出しは、半角の [ = ]記号を連結する形で、大見出し、中見出し、小見出しを区別します。
 
  <nowiki>
 
  <nowiki>
 
  ==大見出し==
 
  ==大見出し==
 
  ===中見出し===
 
  ===中見出し===
 
  ====小見出し====
 
  ====小見出し====
−
 
+
</nowiki>
 +
<br>
 +
 
 +
===リスト===
 +
番号なしリスト、番号付きリスト、定義リストは以下の書式で実現します。
 +
<nowiki>
 
  * 箇条書きレベル１
 
  * 箇条書きレベル１
 
  ** 箇条書きレベル２
 
  ** 箇条書きレベル２
31行目: 45行目:
 
  :  定義 2-1
 
  :  定義 2-1
 
  :  定義 2-2
 
  :  定義 2-2
−
   
+
  </nowiki>
 +
<br>
 +
 
 +
===斜体・太字・文字色===
 +
斜体と太字については シングルクォーテーション ['] を用いて演出します。文字の色については、HTML の span タグとスタイル定義で実現します。
 +
<nowiki>
 
  ''斜体''
 
  ''斜体''
 
  '''太字'''
 
  '''太字'''
 
  '''''太字 & 斜体'''''
 
  '''''太字 & 斜体'''''
−
   
+
  <span style="color:red;">赤い文字列</span>
−
本文・段落について
+
  </nowiki>
−
・編集画面内での改行は画面には反映されません。段落内の強制改行は、行末に <br> と書いて下さい。
+
<br>
−
・一行改行で段落区切り
 
−
  ・二行改行で行間に空きができます。
 
−
 
 
−
</nowiki>
 
  
 +
===整形済みブロック===
 +
行頭に半角スペースがあると、整形済みプロックとみなされて、ライトグレーの背景枠が出現します。
 +
この文章は、行頭に半角スペースを挿入して記載しています。
 
<br>
 
<br>
  
 
===リンクの張り方===
 
===リンクの張り方===
 +
リンクには、他のサイトへジャンプする「外部リンク」と、サイト内の別ページへジャンプする「内部リンク」があります。
 
  <nowiki>
 
  <nowiki>
 
  外部リンク1：http://www.example.com
 
  外部リンク1：http://www.example.com
 
  外部リンク2：[ http://www.example.com （リンク文字）]
 
  外部リンク2：[ http://www.example.com （リンク文字）]
 +
 
  内部リンク1：[ [（サイト内のページ名）] ]
 
  内部リンク1：[ [（サイト内のページ名）] ]
 
  内部リンク2：[ [（サイト内のページ名）|（リンク文字）] ]  ※画面には「リンク文字」が表示されます。  
 
  内部リンク2：[ [（サイト内のページ名）|（リンク文字）] ]  ※画面には「リンク文字」が表示されます。  
 
</nowiki>
 
</nowiki>
−
 
 
<br>
 
<br>
  
 +
===脚注===
 +
脚注を付けたい語句の後に、以下のように ref コードを記述します（「雛形」内に事例を含めています）。
 +
<nowiki>
 +
<ref>九大太郎, 2019, デザイン学研究 Vol.10, p.56, 日本デザイン学会</ref>
 +
<ref>九大花子公式サイト, blog.html,  2019年7月20日閲覧</ref>
 +
</nowiki>
  
 +
脚注を表示する場所（一般に「==脚注==」の下）に、以下のコードを記述します。
 +
<nowiki>
 +
<references />
 +
</nowiki>
 +
<br>
 +
<br>
  
−
==画像の掲載==
+
==画像の掲載について==
  
 
===前提の確認===
 
===前提の確認===
−
画像の掲載には、以下の２つの手順が必要となります。
+
*当サイトの内容はインターネット公開されています。画像の著作権等には十分ご配慮下さい。
−
* 当サイトへの画像のアップロード
+
*画像の掲載には、以下の２つの手順が必要となります。
−
* 画像を掲載するコードをページ内に記載
+
** 1) 当サイトへお手元の画像をアップロードする。
 +
** 2) 画像を掲載するコードをページ内の掲載位置に記載する。
 
<br>
 
<br>
  
−
===画像のアップロードについて===
+
===画像をアップロードする===
−
 
 
 
* 画像のアップロードは、左メニュー「ツール」の'''[http://design.kyusan-u.ac.jp/jssd5th/index.php/%E7%89%B9%E5%88%A5:%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89 ファイルをアップロード]''' から行います。
 
* 画像のアップロードは、左メニュー「ツール」の'''[http://design.kyusan-u.ac.jp/jssd5th/index.php/%E7%89%B9%E5%88%A5:%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89 ファイルをアップロード]''' から行います。
  
73行目: 104行目:
 
:氏名をつけて「HanakoKyusanFig01.jpg」などとして下さい。
 
:氏名をつけて「HanakoKyusanFig01.jpg」などとして下さい。
  
−
*画像は必要最小限にリサイズしてからアップロードして下さい。
+
* '''画像は必要最小の幅（1280, 960, 640 など）にリサイズ'''してからアップロードして下さい。
−
:以下のサイトを使うと簡単にリサイズできます（幅を 640 などとして変換して下さい）。
+
: 以下のサイトを使うと簡単にリサイズできます。
−
:Bulk Resize Photos：https://bulkresizephotos.com/
+
: ・Google Squoosh：https://squoosh.app/
−
 
+
: ・Bulk Resize Photos：https://bulkresizephotos.com/
  
 +
* アップした画像のファイル名を忘れた場合は
 +
** 左メニューの [[Special:ListFiles|アップロード一覧]]から確認。
 +
** 利用者名で絞り込むとご自身がアップしたファイル名の再確認ができます。
 
<br>
 
<br>
  
−
===画像を掲載するコード===
+
===画像を掲載するコードを書く===
−
 
+
<!--
−
*ページ内の掲載したい場所で、以下のコードを記述します。
 
 
  <nowiki>
 
  <nowiki>
 
  書式：[[File : 画像のファイル名 | thumb | left / right | サイズpx | キャプション ]]
 
  書式：[[File : 画像のファイル名 | thumb | left / right | サイズpx | キャプション ]]
 +
</nowiki>
 +
-->
 +
'''<span style="color:red;">この作業は、画像を掲載したいページ、すなわち、ご自身の発表概要のページで行います。</span>'''
  
−
*回り込みを設定した例
 
−
[[File:HanakoKyusanFig01.jpg|right|200px|図1.◯◯◯◯]]
 
  
−
*必要以上の回り込みを解除する方法
+
;最もシンプルな記述は、ファイル名と掲載サイズのみを指定する以下の形です。
 +
<nowiki>
 +
[[File:HanakoKyusanFig01.jpg|200px]]
 +
</nowiki>
 +
サイズは、幅のみを px 単位で指定すれば、縦は自動的に調整されます。
  
  
−
*キャプションをつけるには
+
;left または right オプションを記入すると、その下の原稿が画像の左右に回り込みます。
 +
<nowiki>
 +
[[File:HanakoKyusanFig01.jpg|right|200px]]
 +
</nowiki>
  
  
 +
;必要以上の回り込みを解除するには、文章の末尾に、以下のいずれかのコードを記載します。
 
  <nowiki>
 
  <nowiki>
−
  書式：[[File : 画像のファイル名 | thumb | left / right | サイズpx | キャプション ]]
+
  <br clear=all> ・・・・　HTMLの直接記述
−
 
 
−
・left または right を記入すると、画像以下の原稿が左右に回り込みます。
 
−
・サイズは px 単位で幅のみ指定すれば、縦は自動的に調整されます。
 
 
   
 
   
−
  事例：
+
  {{clear}} ・・・・・ 当サイトのテンプレート
−
[[File:HanakoKyusanFig01.jpg|thumb|right|200px|図1.◯◯◯◯]] ← 画像を右に配置。文章は「左に回り込み」します。
+
  </nowiki>
−
本文文章・・・・・・・・・・・・
 
−
・・・・・・・・・・・・・・・・・
 
−
・・・・・・・・・・・
 
−
  <br clear=all> ← これを書くことで、以降の文章の「回り込み」が解除されます。
 
  
−
</nowiki>
 
  
−
[[File:HanakoKyusanFig01.jpg|thumb|right|200px|図1.◯◯◯◯]]
+
;キャプションをつけるには、以下のように、thumb（サムネール）オプションとともに、キャプション文字列を記載します。
 +
<nowiki>
 +
[[File:HanakoKyusanFig01.jpg|thumb|right|200px|図1.◯◯◯◯]]
 +
</nowiki>
  
  
 +
;以下、全体を網羅したサンプルです。
 +
<nowiki>
 +
[[File:HanakoKyusanFig01.jpg|thumb|right|200px|図1.◯◯◯◯]]
 +
 
 +
Lorem Ipsum is simply dummy・・・
 +
・・・・・・・・・・・・・・・・・・・
 +
remaining essentially unchanged.
 +
 +
{{clear}}
 +
</nowiki>
  
−
*文章が回り込むことを中断したい場合は、その箇所で ＜br clear=all＞ と書いて下さい。
+
[[File:HanakoKyusanFig01.jpg|thumb|right|200px|図1.◯◯◯◯]]
  
−
<br clear=all>
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 +
{{clear}}
  
 
<br>
 
<br>
  
−
==動画の埋め込み==
+
==動画の掲載について==
  
 
===前提の確認===
 
===前提の確認===
−
* MediaWiki自体は動画のアップも可能ですが、当サイトについては動画のアップロードはご遠慮下さい。
+
* MediaWiki自体は動画のアップも可能ですが、当サイトへの直接の動画アップロードはご遠慮下さい。
 
* 動画の掲載を希望される場合は、YouTube等の動画共有サイトへアップロードした後、ページ内に以下のような埋め込みコードを記載して下さい。
 
* 動画の掲載を希望される場合は、YouTube等の動画共有サイトへアップロードした後、ページ内に以下のような埋め込みコードを記載して下さい。
 
<br>
 
<br>
−
 
  
 
===動画の埋め込みコード===
 
===動画の埋め込みコード===
134行目: 181行目:
 
  事例：{{#ev:youtube|Us-TVg40ExM|480}}
 
  事例：{{#ev:youtube|Us-TVg40ExM|480}}
 
</nowiki>
 
</nowiki>
−
*上のように３つの情報を定義記載すると、YouTube等の動画の埋め込みが可能です。
+
* 上のように３つの情報を定義記載すると、YouTube等の動画の埋め込みが可能です。
−
:動画のIDとは、YouTubeの場合、動画のURLの v= の後の文字列がそれに該当します。
+
* 動画のIDとは、YouTubeの場合、動画のURLの v= の後の文字列がそれに該当します。
−
:YouTube以外のサービスも利用できます。サービス名の詳細については [https://www.mediawiki.org/wiki/Extension:EmbedVideo こちらの記事をご覧下さい。]
+
* YouTube以外のサービスも利用できます。サービス名の詳細については [https://www.mediawiki.org/wiki/Extension:EmbedVideo こちらの記事をご覧下さい。]
  
 
'''表示例'''
 
'''表示例'''
190行目: 237行目:
 
より詳細な編集を希望される方は、以下の公式情報をご覧下さい。
 
より詳細な編集を希望される方は、以下の公式情報をご覧下さい。
  
−
*編集：https://www.mediawiki.org/wiki/Help:Editing_pages/ja
+
* 編集：https://www.mediawiki.org/wiki/Help:Editing_pages/ja
−
*書式整形：https://www.mediawiki.org/wiki/Help:Formatting/ja
+
* 書式整形：https://www.mediawiki.org/wiki/Help:Formatting/ja
−
*リスト：https://www.mediawiki.org/wiki/Help:Lists/ja
+
* リスト：https://www.mediawiki.org/wiki/Help:Lists/ja
−
*表組み：https://www.mediawiki.org/wiki/Help:Tables/ja
+
* 表組み：https://www.mediawiki.org/wiki/Help:Tables/ja
−
*画像：https://www.mediawiki.org/wiki/Help:Images/ja
+
* 画像：https://www.mediawiki.org/wiki/Help:Images/ja
−
*リンク：https://www.mediawiki.org/wiki/Help:Links/ja
+
* リンク：https://www.mediawiki.org/wiki/Help:Links/ja
−
*ナビゲーション：https://www.mediawiki.org/wiki/Help:Navigation/ja
+
* ナビゲーション：https://www.mediawiki.org/wiki/Help:Navigation/ja
 +
<br>
  
 +
packetlife にチートシートがあります。
  
 +
* https://packetlife.net/media/library/17/MediaWiki.pdf
  
−
<br>
 
  
 
<br>
 
<br>

2020年8月21日 (金) 16:32時点における最新版

執筆・編集の際に必要となる基本的な記法についてまとめています。


はじめに

  • このページでは、雛形に入力された記号の意味について解説するとともに、いくつかの応用的な記法を紹介しています。
  • 思い通りの表示ができない場合は、まず以下の各ルールをご確認下さい。
  • 尚、ページに表示される「目次」は、ページ内の見出し階層から自動生成されます。
  • 以下の内容について 解説動画も用意しています。



本文の編集について

文章段落

編集画面内での改行は画面には反映されません。連続する文章は一つの段落内に連続する文字列とみなされ、文章の幅はウインドウの幅に応じて変化します（リキッドレイアウト）。

  • 強制的に改行を行う場合は、行末に <br> タグを書いて下さい。
  • 一行の空改行で「段落区切り」の扱いになります。
  • 二行の空改行で１行分の空きができます。


見出し

見出しは、半角の [ = ]記号を連結する形で、大見出し、中見出し、小見出しを区別します。 

 ==大見出し==
 ===中見出し===
 ====小見出し====


リスト

番号なしリスト、番号付きリスト、定義リストは以下の書式で実現します。 

 * 箇条書きレベル１
 ** 箇条書きレベル２

 # 番号付きリスト レベル１
 ## 番号付きリスト レベル２

 ; 定義リスト 項目 1
 :  定義 1
 ; 定義リスト 項目 2
 :  定義 2-1
 :  定義 2-2


斜体・太字・文字色

斜体と太字については シングルクォーテーション ['] を用いて演出します。文字の色については、HTML の span タグとスタイル定義で実現します。 

 ''斜体''
 '''太字'''
 '''''太字 & 斜体'''''
 <span style="color:red;">赤い文字列</span>


整形済みブロック

行頭に半角スペースがあると、整形済みプロックとみなされて、ライトグレーの背景枠が出現します。 

この文章は、行頭に半角スペースを挿入して記載しています。


リンクの張り方

リンクには、他のサイトへジャンプする「外部リンク」と、サイト内の別ページへジャンプする「内部リンク」があります。 

 外部リンク1：http://www.example.com
 外部リンク2：[ http://www.example.com （リンク文字）]
 
 内部リンク1：[ [（サイト内のページ名）] ]
 内部リンク2：[ [（サイト内のページ名）|（リンク文字）] ]  ※画面には「リンク文字」が表示されます。


脚注

脚注を付けたい語句の後に、以下のように ref コードを記述します（「雛形」内に事例を含めています）。 

 <ref>九大太郎, 2019, デザイン学研究 Vol.10, p.56, 日本デザイン学会</ref>
 <ref>九大花子公式サイト, blog.html,  2019年7月20日閲覧</ref>

脚注を表示する場所（一般に「==脚注==」の下）に、以下のコードを記述します。 

 <references />



画像の掲載について

前提の確認

  • 当サイトの内容はインターネット公開されています。画像の著作権等には十分ご配慮下さい。
  • 画像の掲載には、以下の２つの手順が必要となります。
    • 1) 当サイトへお手元の画像をアップロードする。
    • 2) 画像を掲載するコードをページ内の掲載位置に記載する。


画像をアップロードする

  • 画像は「半角英数名.拡張子」という名称形式でご用意下さい。
画像の名称は、サイト内でユニーク（唯一の存在）であることが必要です。
氏名をつけて「HanakoKyusanFig01.jpg」などとして下さい。
  • 画像は必要最小の幅（1280, 960, 640 など）にリサイズしてからアップロードして下さい。
以下のサイトを使うと簡単にリサイズできます。
・Google Squoosh：https://squoosh.app/
・Bulk Resize Photos：https://bulkresizephotos.com/
  • アップした画像のファイル名を忘れた場合は
    • 左メニューの アップロード一覧から確認。
    • 利用者名で絞り込むとご自身がアップしたファイル名の再確認ができます。


画像を掲載するコードを書く

この作業は、画像を掲載したいページ、すなわち、ご自身の発表概要のページで行います。


最もシンプルな記述は、ファイル名と掲載サイズのみを指定する以下の形です。
 [[File:HanakoKyusanFig01.jpg|200px]]

サイズは、幅のみを px 単位で指定すれば、縦は自動的に調整されます。


left または right オプションを記入すると、その下の原稿が画像の左右に回り込みます。
 [[File:HanakoKyusanFig01.jpg|right|200px]]


必要以上の回り込みを解除するには、文章の末尾に、以下のいずれかのコードを記載します。
 <br clear=all> ・・・・　HTMLの直接記述
 
 {{clear}} ・・・・・ 当サイトのテンプレート


キャプションをつけるには、以下のように、thumb（サムネール）オプションとともに、キャプション文字列を記載します。
 [[File:HanakoKyusanFig01.jpg|thumb|right|200px|図1.◯◯◯◯]]


以下、全体を網羅したサンプルです。
 [[File:HanakoKyusanFig01.jpg|thumb|right|200px|図1.◯◯◯◯]] 
  
 Lorem Ipsum is simply dummy・・・
 ・・・・・・・・・・・・・・・・・・・
 remaining essentially unchanged.
 
 {{clear}}
図1.◯◯◯◯

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.




動画の掲載について

前提の確認

  • MediaWiki自体は動画のアップも可能ですが、当サイトへの直接の動画アップロードはご遠慮下さい。
  • 動画の掲載を希望される場合は、YouTube等の動画共有サイトへアップロードした後、ページ内に以下のような埋め込みコードを記載して下さい。


動画の埋め込みコード

 書式：{{ #ev:サービス名 | 動画のID | 幅(px) }}
 
 事例：{{#ev:youtube|Us-TVg40ExM|480}}
  • 上のように３つの情報を定義記載すると、YouTube等の動画の埋め込みが可能です。
  • 動画のIDとは、YouTubeの場合、動画のURLの v= の後の文字列がそれに該当します。
  • YouTube以外のサービスも利用できます。サービス名の詳細については こちらの記事をご覧下さい。

表示例



表組み

表組みは慣れないと煩雑な印象を受けると思います。表は画像としてアップする方が簡単です。 

 {| class="wikitable"
 ! NAME
 ! 項目A
 ! 項目B
 |-
 | Alice
 | 25
 | true
 |-
 | Steve
 | 30
 | false
 |}
  • {| 表の開始、必須
  • |- 表の行、最初の行については省略可能。
  •  ! 表のヘッダーセル、省略可能。
  • | 表のデータセル、省略可能。
  • |} 表の終了、必須


表示例

NAME 項目A 項目B
Alice 25 true
Steve 30 false



記法の詳細（公式ガイド）

より詳細な編集を希望される方は、以下の公式情報をご覧下さい。


packetlife にチートシートがあります。



「https://design.kyusan-u.ac.jp/jssd5th2019/index.php?title=編集ガイド&oldid=4360」から取得