@wikiで画像の表示形式が変わるパターンは大まかに以下の3種類存在する
①:機器に関係なくパソコン版を閲覧
②:スマホ等でモバイル版を閲覧
③:パソコンでモバイル版を閲覧
今のところこのwikiでは画像表示は基本的に①を優先し、②もある程度カバー、③は最低限の方針で記述中
③はモバイル版を無理に大画面で閲覧しようとするため色々と表示がおかしくなる
大きな画像について
- サイズ指定がない場合、①の時は元の画像の大きさ依存で表示され、②の時は画面の大きさに合わせて画像の大きさも変化する
- サイズ指定なしが好ましいが、元の画像の大きさが合わない場合が多く、基本的にサイズを指定する事になる
- サイズ指定なし 元の画像が大きい時、①で横枠からはみ出る
- △image(サイズ指定なし)
- サイズ指定(width,height)を行った場合
- ×image(サイズ指定のみ) ②ではみ出た部分はスクロールも不可、表示されなくなる
- ×ref(サイズ指定のみ) ②で横方向に圧縮されて潰れた全体像が表示される
- 表の中に入れてサイズ指定を行った場合
②の時は画面からはみ出すためスクロールが必須となる
スクロールしても問題ない画像なら気にしなくてもいいが、トップバナーやキャラ一枚絵などは②への表示も考慮しておきたい
- ◯image(サイズ指定+表) ②でスクロールが発生する
- ◯ref(サイズ指定+表) ②でスクロールが発生する
- width指定のみ行った場合
- ×image(width指定のみ) ②ではみ出た部分はスクロールも不可、表示されなくなる
- △ref(width指定のみ) ②で奇麗に表示されるが、①において画像読み込み時縦に大きくチラつきが入って目障り
- height指定のみ行った場合 ①のチラつきが横向きになりマシになる
- ×image(height指定のみ) ②でも奇麗に画像が表示されるが、③で画像が下部の文章等全てを飲み込む(②で飲み込まないのは画面の表示幅が小さいため)
- ×ref(height指定のみ) ②において画像が圧縮されて汚くなる
- ◎image(height指定+inline) ①のチラつきがマシに、②でも奇麗に画像が表示される、③で大きくなりすぎるが文章は飲み込まないので妥協(③は切り捨て)
- 評価ページ画像での表示確認
- ◯image(表の中に入れてサイズ指定を行った場合) サイズが固定されているため②でスクロール必須
- ◎image(height指定+inline) ①のチラつきがマシに、②でも奇麗に画像が表示される、③で大きくなりすぎるが文章は飲み込まないので妥協(③は切り捨て)
+
|
その他表示 |
その他表示
- △image(width指定) ②③で奇麗に表示されるが、①において画像読み込み時縦に大きくチラつきが入って目障り
- ×image(height指定) ①のチラつきがマシに、②③で下部の文章等全てを飲み込む
属性 |
レアリティ |
|
守備適性 |
花・蝶・風・月 |
SSR・SR・R・N |
先 |
中 |
抑 |
捕 |
一 |
二 |
三 |
遊 |
左 |
中 |
右 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
ああああああああ
|
表の中の小さな画像について
- 表内画像で大きさを指定する場合は指定パラメーターによって変化が起こる
場合によっては画像下部に余白が発生することがあり、表の枠も大きくなり全体的な形も崩れる
- ×image(サイズ指定+inline) ①でのみ下部に余白発生
列1 |
列2 |
列3 |
有原 |
- |
- |
- ◎image(サイズ指定+inline+left or center or right) 余白無し
列1 |
列2 |
列3 |
有原 |
- |
- |
- ×ref(サイズ指定のみ) ①でのみ下部に余白発生
列1 |
列2 |
列3 |
有原 |
- |
- |
- ◯ref(サイズ指定+left or center or right) 余白無し imageの位置指定とは表示結果が異なる
- ×ref(サイズ指定+left or center or right+文字列) 前後に記述不可
+
|
その他表示 |
その他表示
- ×image(height指定のみ) ①で余白無し ②③で画像が大きくなり表を飛び出す
- ×image(width指定のみ) ①でのみ下部に余白発生
- ×ref(width指定のみ) ①でのみ下部に余白発生
列1 |
列2 |
列3 |
有原 |
- |
- |
- ×ref(height指定のみ) ①でのみ下部に余白発生
列1 |
列2 |
列3 |
有原 |
- |
- |
|