編集メモ

Last-modified: 2022-02-17 (木) 13:38:15

砂場
ToDo:画像/ギア画像形式とペイントツールの問題で停止中
気になる:アナザー公式解説?/アクトレステンプレート改案?
保留:一覧表の変更/ギア一覧表
終了:ハードウェア情報/マップ関連/アレンジCD/マップ練習/PU経過日数/履歴書画像/イベントバナー/スマホオプション/アクトレスページ/ギャラリーFlexbox/ギャラリーFlexbox改行

レイアウト

Responsive_layout テスト中

レスポンシブデザインの過去説明

レスポンシブデザインをご存じでしょうか。

簡単に説明すると、ウェブサイトを表示する時に、表や文章やデータが記述されているHTMLに手を加えずレイアウト情報が記述されているCSSのみ閲覧環境によって切り替える設計のことです。
具体的な方法は、Webサイトにアクセスしてきたブラウザ情報から閲覧環境がPCなのかスマホなのかを判断し、予め用意した複数のCSSから画面解像度に合わせたものを読み込んで適切なレイアウトを実現します。

このレスポンシブデザインは本wikiでも用意されているようですが、CSSが一種類しかなく、数年前の低解像度のスマホを基準としているため、高解像度化した現在のスマホに対して表示倍率が高くなりすぎる(文字や画像が拡大されすぎる)という問題が生じています。

そのため、PCを基準にページを編集すると、スマホ閲覧時に表や文字が拡大されすぎて画面に収まりませんし、逆にスマホを基準にページを編集すると、PCで閲覧した時にフォントや表が小さくなりすぎて見づらくなってしまいます。
これらを解決する方法は現時点では存在せず(wiki毎にCSSを編集・複数のCSSを用意する機能がないため)、根本的な解決はwikiwiki officialで計画はあるが未定になっているレスポンシブデザインの実装を待つしかないようです。
参考:
wikiのデザインについて(wikiwiki official)

ギア個別ページ>ギアの説明文

解決しました
  • ゲーム内と同じ位置で文章を改行し、雰囲気を再現しようと考慮されていると思いますが、当該ページでは閲覧環境にレイアウト(とフォントサイズ)を最適化していない(ゲーム内ではしている)ため、改行位置が再現されているのは横長の画面環境(PCなど)に限ると思われます。
    • 改行せず記述した方がより多くの閲覧環境にたえるのではないでしょうか。

改行する
ex00.png

改行しない
ex01.png


コメント

  • やはりスマホを考慮すると、下の方が良いよなぁ…。編集も少し楽になるし、少しずつ下のタイプに変えようかな? -- テンプレ作った隊長? 2019-12-27 (金) 13:25:59
    • コメありです!編集楽なのは大きいですよね。1週間くらい様子見て問題なさそうなら変更していきましょうか。その際は自分もお手伝いいたします。 -- 2019-12-27 (金) 18:31:51
      • 楽になるとはいってもbr挿入する手間が省けるぐらいですけどね -- 木主 2019-12-27 (金) 22:44:38