編集用ページ/リンク_画像_表組み_flex_box

リンク

リンクを張る必要はないが、便利であるため積極的に利用したい。
詳細な解説はwikiwikiのサンプルwiki『リンクを張る』ページを参照
ディルックで例を上げる。

wiki内のページへのリンク

wiki内のページの場合[]で二重に囲むことによりリンクを張ることが可能である。
【書式】

[[ディルック]]

【使用例】
　ディルック

エイリアス名

リンクの文を変えたい場合>で変えることができる。
【書式】

[[旦那>ディルック]]

【使用例】
　旦那

外部ページ

外部ページである場合httpから始まるとリンクがつながる。
【書式】

[[原神公式サイト>https://genshin.hoyoverse.com/ja/home]]

【使用例】
　原神公式サイト

ページが存在しない場合

ページが存在しない場合は背景が黄色く？付きで表示される。
この？から、その名前のページ作成ができる。
【書式】

[[ないページ]]

【使用例】
　ないページ?

画像にリンクを貼る場合

リンクは画像にも可能である。
【書式】

[[&attachref(画像/ディルック_s.jpg,nolink,44x44);>ディルック]]

【使用例】
　

アンカータグ

見出し「*」をつけると見出しごとにアンカータグが自動生成される。詳細はwikiwikiのサンプルwiki『見出し』を参照
このアンカータグは見出し欄右の端に存在する🔗鎖マークをクリックしたさいのURLの最後につく#英数字、や編集ページの見出しの[#英数字]の#英数字から確認できる。
この見出しであれば『#anchor』がアンカータグである。
なお『アンカー文字列』の場合anameプラグインの表示される文字を指す場合もあるので注意が必要。

見出しへのリンク

アンカータグをページ名の後にリンクを付けるとその見出しにつながる。
【書式】

[[ディルックのビルド>ディルック#od755971]]

【使用例】
　ディルックのビルド

ページ内のアンカータグへのリンク

ページ内であればページ名を省略できる。例えばこのページの見出しであるリンクのアンカータグ#hyperlink
【書式】

[[#hyperlink]]

【使用例】
　#hyperlink

アンカータグが切れている場合

アンカータグであればリンクが切れていてもページには飛べる。
逆にページに飛んだ時に見出しではなくページ上部に飛べばアンカータグが間違っている可能性が高い。
本来はod755971であるがOd755971とした場合。
【書式】

[[ディルック#Od755971]]

【使用例】
　ディルック#Od755971

アンカータグ名

この見出しへのアンカータグは任意の英数字が利用できる*1。ただし最初の一文字目は英字でなければならない。
このアンカータグを付けた初期を除き、このアンカータグを変えるのはお勧めしない。そのリンクを参照したブログ等があればリンクが切れるため。
しかしページには飛べるので神経質になるほどでもない*2。
詳細な仕組みはフラグメント識別子で検索した方が良いかもしれない。

aname

任意の場所にアンカータグを置けるプラグイン。詳細はwikiwikiのサンプルwiki『アンカーの設定』を参照

&aname(アンカータグ){表示される文字};

【書式】

[[ページ下部にはbottomを埋め込んでいる>#bottom]]

【使用例】
　ページ下部にはbottomを埋め込んでいる

タグの位置を表示

{}のなかに文字を入れるとタグの位置が分かりやすくなり見出し右の🔗鎖マークと同じように動く。
【書式】

&aname(name1){ここにname1がある};

【使用例】
　ここにname1がある

他のページからの参照

アンカータグなので他のページからも参照できる。
【書式】

[[アルケー#core]]

【使用例】
　アルケー#core

AutoAliasName

リンクを自動で貼ることができるらしいが、利用されていないようである。AutoAliasName 編集掲示板97
問答無用ですべてにリンクを貼られるため、利用はよく考えたい。（例えばディルックのページ内にディルックのリンクが貼られるなど）

キャラページ

キャラは魈を除き[]二重に囲むことでページへのリンクを貼ることができる*3。
ただし魈のページ名はショウである点に注意。
【書式】

[[魈>ショウ]]

【使用例】
　魈

基本情報

キャラによっては基本情報であるステータスを#status、天賦を#talent、命ノ星座を#constellation、使用素材を#material
とアンカータグに設定している場合が多い。
【書式】

[[ディルックの育成素材>ディルック#material]]

【使用例】
　ディルックの育成素材

武器ページ

武器毎にアンカータグが異なるため各武器ページ。片手剣 両手剣 長柄武器 法器 弓、もしくは武器効果サマリーを参照すると良いだろう。
武器種名/武器名でページにつなげても良い。
【書式】

[[片手剣/風鷹剣]]

【使用例】
　片手剣/風鷹剣

聖遺物セット効果

聖遺物セット効果は聖遺物/セット効果を参照すると良いだろう。

画像

画像優位性効果やゲーム内のバッグ一覧では名前が表示されないことが多い等の状況から名前が分からない人もいる。
状況に応じて画像を使って説明すると良いだろう。
ただし画像はページを重くする要因の一つであるため、サイズを適切な大きさとし不要な画像は削除するなどを心がけたい。

画像の参照

画像は&attachref(画像があるページ/画像のファイル名);にて呼び出せる。
【書式】

&attachref(画像/ディルック_s.webp);

【使用例】
　
画像があるページではページ名を省略できる。
【書式】

&attachref(./銀の剣.png,44x44);

【使用例】
　

attachrefとref

attachrefとrefどちらであっても画像は貼れるが文中ではattachrefの表中ではrefが使われる傾向がある。
attachrefの詳細はwikiwikiのサンプルwikiの『ファイル(画像)を貼り付ける』を参照、refの詳細はwikiwikiのサンプルwikiの『画像回り込み』を参照
特別な事情がない場合はそのページの前例に従うのが良いだろう。

サイズ

サイズはNxNや150%で制御できるが、画像のサイズが画像毎に異なるため基本的にはNxNが好まれる。
ただし縦横比は保持され、前の数字が優先される。つまり44x60であっても44x0であっても変わらないが、特別な事情がない場合はそのページの前例に従うのが良いだろう。
ちなみに「x」はx(エックス)であり×(かける)ではない。
【書式】

&attachref(画像/ディルック_s.webp,44x44); &attachref(画像/ディルック_s.webp,60x44); &attachref(画像/ディルック_s.webp,44x60); &attachref(画像/ディルック_s.webp,80%);

【使用例】
　

nolink

nolinkは画像のリンクか形成されるがnolinkでは形成されない。

• HTML上はhrefが形成されるか否かである。
• 利用上はクリックした際に画像が元のサイズで表示されるか否かである。

ページへのリンクを貼る場合nolinkにしておくのが無難だろう。
【書式】

&attachref(画像/ディルック_s.webp,nolink,44x44);

【使用例】
　

代替文字列

画像にカーソルを合わせたさいに表示される文字はファイル名であるが最後の引数にてその名前を変更できる。
これによってファイル名ではなくキャラ名などを表示できる。
また編集画面から見るさいにどの画像か分かりにくい場合などにも有効である。
【書式】

&attachref(片手剣/screenshot.1605901230.jpg,nolink,44x44,銀の剣);

【使用例】
　

キャラ画像

キャラは低画質の○○_sと高画質の○○_0が併用されている、詳しくは画像#o5a62a26ページを参照
キャラ画像は画像ページで一括管理されている。
基本的に&attachref(画像/キャラ名_s.webp,nolink,44x44);で呼び出せる。
また魈のファイル名はショウである点は注意したい。主人公は旅人であり空と蛍の画像も存在する
【書式】

&attachref(画像/ショウ_s.webp,nolink,44x44);

【使用例】
　

高画質キャラ画像

&attachref(画像/キャラ名_0.webp,nolink,44x44);でより高画質の画像が使用できるが、サイズが102以上の画像を使うことは少ない。
【書式】

&attachref(画像/ディルック_0.webp,nolink,44x44;)

【使用例】
　

武器画像

キャラと同様に低画質の○○_sと高画質の○○_0が併用されている。
画像/武器も参照

画像が存在しない場合

画像が存在しない場合下記のような表示がされる。がそのファイル名の画像が添付されると表示されるため、すぐに画像が添付される、添付する見込みがある場合は、このままでも良いだろう。
【書式】

&attachref(画像/存在しない画像.jpg,nolink,44x44);&ref(画像/存在しない画像.jpg,nolink,44x44);

【使用例】
　 File not found: "存在しない画像.jpg" at page "画像"[添付]&ref(): File not found: "存在しない画像.jpg" at page "画像";

すぐには画像が添付される見込みが薄い場合

attachrefにて[添付]表示をしておくかnoimageの画像をおいておくと良いだろう。
【書式】

&attachref(画像/noimage.svg,nolink,44x44);&attachref(画像/アイコン_noimg.jpg,nolink,44x44);

【使用例】
　

画像の添付

添付する画像はトラブルを回避するため自身がゲーム内で取った画像や公式が配布している画像を使うことが望ましい。
他のサイトなどの画像を使う場合は出典を明示することが望ましい。
画像の拡張子はpng、jpg、webpなど統一されていない、前例などを確認して添付すると良い。

画像のサイズについて

ファイルサイズの大きい画像は転送量が多くなり、帯域幅を圧迫するため、wikiの表示が遅くなる原因になる。
詳しくはこちらを参照

webpファイル

Windows初期からインストールされている「フォト」ではwebpファイルに変換できないため、自前の画像編集ソフトを使うか、GoogleのブラウザアプリSquoosh等を用いて変換する必要がある。

添付先

ファイルを添付するさいはファイルを添付したいページに添付する必要があります。
例えばキャラであれば画像ページにて一括管理されています。
キャラ以外の画像に関しては明文化されたルールは定まっていないが、武器であれば各武器種のページ片手剣 両手剣 長柄武器 法器 弓、それ以外のアイテム画像はバッグの各ページなどが多い。
類似の画像がどこに添付されているのか確認してから添付先を決めた方が良いでしょう。

キャラ画像の形式

画像ページを参照
画像の形式はwebpに統一されたため、webpで添付すること。

武器画像の形式

キャラ画像と同様に形式はwebpに統一されたため、webpで添付すること。
画像のサイズもキャラ画像と同様に102と220である
強化前の画像が使われている。
入手していない武器に対しても祈願画面の詳細から画像は入手できる。

添付ファイル名

添付した後に画像の名前を変える機能は存在しません、ファイル名を確認してから添付すると良いでしょう。
また拡張子に関しても変更できないので注意が必要です。

添付操作

添付するさいは

1. ページ上部の[添付]ボタン
2. ファイルを選択
3. 自身のPCから画像を選択
4. [アップロード]ボタンで添付が完了します。

不安であるなら、砂場等で練習してみると良いでしょう。詳細はwikiwikiのサンプルwikiの『ファイルを添付する』を参照

attachref

attachrefでは画像の添付を行えるボタンを作成できる。
これにより編集者でない人へのハードルが一段下がるがファイル名等は指定できず、そのページに添付するため利用はよく考えたい。
【書式】

&attachref(,nolink);

【使用例】
　 [添付]

表組み

詳細はwikiwiki公式を参照
「|」を並べると表になります
【書式】

|「|」|を並べると|表になる|
|同じ|列数だと|つながる|
|違う|列数だと|1つの表に|ならない||
||||||
|何も|入れないと|細くなる|||
//コメント
|「//」でコメントを||入れても表は|つながる||

【使用例】
「|」を並べると表になる

セルの指定

表の1つ1つのセルを細かく指定できる。

セルの結合

【書式】

|説明|あ|い|う|え|お|
|「~」のみだと上と結合する|~|き|く|け|こ|
|「>」のみだと右と結合する|>|し|す|せ|そ|
|「<」は結合できない|た|<|つ|て|と|
|複数のセルも結合できる|な|>|>|>|の|
|~|~|ひ|ふ|へ|ほ|
|~|~|み|む|め|も|

【使用例】

ヘッダ

【書式】

「~」を先頭に入れ文字を入れるとヘッダになります
|~あ|い|う|え|お|
|か|き|~く|け|こ|
|~さ|~し|す|せ|そ|

【使用例】
「~」を先頭に入れ文字を入れるとヘッダになります

寄せ

表のどこによせるかの説明
左右、LEFT:左よせ、CENTER:中央、RIGHT:右よせ
上下、TOP:上よせ、MIDDLE:中央、BOTTOM:下よせ
また上下と左右は組み合わせれる。
【書式】

|表組みにおいてどこに|よせるかを|示すための|サンプル|
|左右|LEFT:左よせ|CENTER:中央|RIGHT:右よせ|
|上下&br;&br;|TOP:上よせ|MIDDLE:中央|BOTTOM:下よせ|
|組み合わせ&br;&br;|LEFT:TOP:左上よせ|MIDDLE:CENTER:中央中央|RIGHT:BOTTOM:右下よせ|

【使用例】

色の指定

BG背景の色を指定
文字の色を指定
【書式】

|表組みの|色を|示すためのサンプル|
|背景|BGCOLOR(gray):gray|BGCOLOR(#cc3b00):#cc3b00|
|文字の色|COLOR(gray):gray|COLOR(#cc3b00):#cc3b00|
|組み合わせ|BGCOLOR(black):COLOR(White):黒背景に白字|BGCOLOR(gray):COLOR(black):灰色背景に黒字|

【使用例】

文字サイズの指定

SIZE(サイズ):文字サイズを指定
【書式】

|表組みの|文字サイズを|示すためのサンプル|
|文字のサイズ|SIZE(10):10|SIZE(20):20|

【使用例】

寄せ、色、サイズ

これらのLEFT:CENTER:RIGHT:TOP:MIDDLE:BOTTOM:BGSIZE(サイズ):は全て大文字である必要がある。
【書式】

|left:|Center:|RIGHt:|
|top:|middle:|bottom:|
|bgcolor(White):|color(black):|size(14):|

【使用例】

ヘッダ行、フッタ行、書式指定行

最後の「|」の後にc,h,fをいれると書式指定行、ヘッダ行、フッタ行になります

ヘッダ行、フッタ行

ヘッダ行は一番上にフッタ行は一番したに来ます。
【書式】

|あ|い|う|え|
|か|き|く|け|
|ヘッダ行|中の行に|書いても|上に移動する|h
|フッタ行|中の行に|書いても|下に移動する|f
|さ|し|す|せ|
|た|ち|つ|て|

【使用例】

書式指定行

最後の「|」の後にcを入れると書式指定行になります。
書式指定行は表示されませんが、その列を指定する行になります。
数値を入れることによりpx幅を指定できます。
【書式】

|100|80|20|c
|100|80|20|

【使用例】

これにより、折り返しを制御しやすくなります。
【書式】

|180|20||||c
|この行は折り返したくない|この行は縦書き|この行は比較的どうでも良いので環境によっては折り返しても良い|この行は比較的どうでも良いので環境によっては折り返しても良い|この行は比較的どうでも良いので環境によっては折り返しても良い|

【使用例】

％でも指定できます。
【書式】

|10%|50%|30%|10%|c
|10%|50%|30%|10%|

【使用例】

書式指定行と個別指定

上記のLEFT:CENTER:RIGHT:TOP:MIDDLE:BOTTOM:BGSIZE(サイズ):は書式指定行でその列全てを指定できる。
また個別のセルで指定した場合指定したセルの形式が優先される。
【書式】

|CENTER:|COLOR(#cc3b00):|SIZE(20):|c
|Center:|Color(#cc3b00):|Size(20):|
|あ|い|う|
|RIGHT:右よせ|COLOR(gray):gray|SIZE(20):20|

【使用例】

表プラグイン

表には併用することが多いプラグインがいくつか存在する。

tablesortプラグイン

表のヘッダで並び替えできるようにするプラグイン詳細はwikiwikiのサンプルwiki『tablesort』を参照
必ずヘッダ行が必要であり、複雑な表組には対応していないが、ソートするさいには便利である。
またPCではShift キーを押したまま複数の列ヘッダーをクリックすると、複数の列を同時に並べ替えることができる。
【書式】

#tablesort{{
|ヘ|ッ|ー|ダ|行|h
|1|1|5|B|新|
|2|a|10|B|深|
|3|A|200|A|神|
|4|ｱ|5.1|B|申|
|5|あ|1|B|心|
|6|ア|0|A|真|
|7|亜|5.0|B|信|
|8|亜|5.2|C|浸|
|9||5.11|A|清|
}}

【使用例】

tablescrollプラグイン

表のヘッダーを表上部に固定しつつ表の高さを固定するお試しプラグイン。
省略時は500、今回は分かりやすく180にした。
通常と同じく表外でスクロールするとページがスクロールされるが、表と同じ高さでスクロールすると表がスクロールされ表の端に到達するとページがスクロールされる。
【書式】

#tablescroll(180){{
|>|ヘッダ行|h
|1|10行中6行しか表示されない|
|2||
|3||
|4||
|5||
|6||
|7||
|8||
|9||
|10|10行中6行しか表示されない|
}}

【使用例】

ヘッダ列の固定

横にはみ出す時に先頭列が付いてくる、基本的には下記nobrと併用する場合に使用する。
また行と列の両方を固定することもできる。
【書式】

#tablescroll(fix-col){{{
#nobr{{
||こっちは『行』今回は「列」の話||h
|~今回は『列』の話|このように横に長い表をnobrで囲んだ場合、nobrがない場合横幅が自動調整され改行や画像の大きさが調整されるがnobrによって中の改行や画像のサイズを固定すると横スクロールが生じる、その場合でも初めの列が固定されて欲しい場合に使用する|ちなみにヘッダ行は必須である。|
|ヘ|||
|ッ|||
|ダ|||
|~列|||
}}
}}}

【使用例】

ヘッダ行を画面上部に固定

表の高さは変えずヘッダ行を画面上部に固定する。
横に見切れる場合は表示されなくなるため、下記nobrと併用する時は注意すること。
【書式】

#tablescroll(screen-sticky){{
|>|ヘッダ行がついてくる|h
|1||
|2||
|3||
|4||
|5||
|6||
|7||
|8||
|9||
}}

【使用例】

横に見切れる場合の注意

横に見切れる場合は表示されなくなるため、下記nobrと併用する時は注意すること。
【書式】

#tablescroll(screen-sticky){{{
#nobr{{
|>|ヘッダ行がついてくる|h
|1|上記のようにnobrによって中の改行や画像のサイズを固定すると横スクロールが生じるが、tablescrollの(screen-sticky)は横スクロールに対応していないため見切れてしまう、これは特にスマホで見る時に顕著に問題となるためtablescrollの(screen-sticky)を使う場合は注意が必要である。|
|2||
|3||
|4||
|5||
}}
}}}

【使用例】

表に関して利用することが多いプラグイン

表以外でも使用できるが、表においても使用しやすいプラグイン。

nobrプラグイン

改行やリスケールを抑制するプラグイン詳細はwikiwikiのサンプルwiki『nobr』を参照。
表を作成した際に画像を使用したり、横に列を多数並べた場合、自動で画面の幅に応じて各セルの大きさを調整してくれるが意図せず改行されたり画像が小さくなりすぎる場合がある、これは特に横幅が狭いスマホにおいて顕著である、その際に改行や画像の大きさを固定したい場合に使用するプラグイン。
表全体を囲む場合や一単語のみの改行を防ぐこともできる。
ただし横スクロールになり一覧性が下がるため無条件で使用するものでもない。
【書式】

|このように横に長い表を作成した場合、意図しない場所で改行がおきる場合がある。|その際に改行を防ぐためのプラグインになる、|ただし横スクロールになるため気づかれない場合もあり、|また一画面に収まらないため|一覧性が下がる。|そのため無条件で使用するものでもない。|上記の[[書式指定行>#ea30e5c5]]などと比べ何が適切かは考える必要がある|
nobrで囲った場合
#nobr{{
|このように横に長い表を作成した場合、意図しない場所で改行がおきる場合がある。|その際に改行を防ぐためのプラグインになる、|ただし横スクロールになるため気づかれない場合もあり、|また一画面に収まらないため|一覧性が下がる。|そのため無条件で使用するものでもない。|上記の[[書式指定行>#ea30e5c5]]などと比べ何が適切かは考える必要がある|
}}

【使用例】

nobrで囲った場合

画像の挙動

画像は適切なサイズに自動で調整されるが、それゆえに小さくなりすぎる場合もある。

画像は適切なサイズに

自動で調整されるのに対して

文字は

一文字の大きさが決まっているため

最小の

縮小幅が決まっているので

画像が小さくなりすぎる場合がある

refで画像の大きさを指定しない場合は元の大きさで表示されるが、上記の書式指定行により大きさを抑制できる。これにnobrで囲うと書式指定行が無効化される様である。
【書式】

|||40|40|c
|&ref(画像/ディルック_s.webp,nolink);|&ref(画像/ディルック_s.webp,nolink,80x80);|&ref(画像/ディルック_s.webp,nolink);|&ref(画像/ディルック_s.webp,nolink,80x80);|
#nobr{{
|||40|40|c
|&ref(画像/ディルック_s.webp,nolink);|&ref(画像/ディルック_s.webp,nolink,80x80);|&ref(画像/ディルック_s.webp,nolink);|&ref(画像/ディルック_s.webp,nolink,80x80);|
}}

【使用例】

またrefの設定で縮小限界を定めることもできる。
【書式】

|&ref(画像/ディルック_s.webp,nolink,100x100,>40);|100を|目指すが|無理な場合は|40までは|縮小される|

【使用例】

100を

目指すが

無理な場合は

40までは

縮小される

tategakiプラグイン

縦書きで書くことができるお試しプラグイン。
ヘッダ行のみ横長になってしまう場合などに一文字ずつ&br;を入れなくても良いほか「ー」を縦棒に書き換えるなどの対応せずにすむ。
【書式】

|&tategaki(height){レベル};|&tategaki(upright){元素};|&tategaki(sideways){攻撃力};|&tategaki(){HP};|&tategaki(mixed){防御力};|&tategaki(){会心率};|&tategaki(){会心ダメージ};|
|90|炎|335|12,981|784|19.2%|50%|

【使用例】

flex_containerとflex_box

表組みとは別に、横にコンテンツを並べる方法としてflex_containerがある。
表を横に並べたり、ページ幅を擬似的に制限することができます。
基本的な使い方はこちら。
画面を一定の箱に分割するプラグイン
ここではcssboxプラグインを用いて見やすく色分けしている。

#flex_container(space-around){{{
//上段：flex_containerここから
#flex_box(700px){{
#shadowheader(2,最上段・左側：flex_boxここから)
&ref(FrontPage/Ver.3.3「六処解悟、諸相空無」.webp,nolink,700x0);
//上段・左側：flex_boxここまで
}}
#flex_box(366px){{
#shadowheader(2,最上段・右側：flex_boxここから)
&ref(FrontPage/Ver.3.4「織りなす調べ、華更けて」.webp,nolink,360x0);
&ref(FrontPage/Ver.3.5「風花の吐息」.webp,nolink,360x0);
//上段・右側：flex_boxここまで
}}
//上段：flex_containerここまで
}}}

accordionによる可視化

accordionによってflex_boxが変わっているのが分かる。

#flex_container(space-around){{{{
//下段：flex_containerここから
#flex_box(340px){{{
#accordion(下段・左側：flex_boxここから,**,open){{
&ref(FrontPage/Ver.3.6「盛典と慧業」.webp,nolink,366x0);
}}
//下段・左側：flex_boxここまで
}}}
#flex_box(340px){{{
#accordion(下段・中側：flex_boxここから,**,open){{
&ref(FrontPage/Ver.3.7「決闘！召喚の頂！」.webp,nolink,340x0);
&ref(FrontPage/Ver.3.8「涼夏！楽園？大秘境！」.webp,nolink,340x0);
}}
//下段・中側：flex_boxまで
}}}
#flex_box(340px){{{
#accordion(下段・右側：flex_boxここから,**,open){{
&ref(FrontPage/Ver.4.0「ゆえなく煙る霧雨のように」.webp,nolink,320x0);
&ref(FrontPage/Ver.4.1「深海に煌めく星たちへ」.webp,nolink,320x0);
&ref(FrontPage/Ver.4.2「罪人の円舞曲」.webp,nolink,320x0);
}}
//下段・右側：flex_boxここまで
}}}
//下段：flex_containerここまで
}}}}

【書式】

ここ→&aname(bottom){};←に&aname(bottom){};がある。

【使用例】
　ここ→←に&aname(bottom){};がある。
【書式】

[[アンカーの説明に戻る>#aname]]

【使用例】
　アンカーの説明に戻る