ウィキアンの皆さん、こんにちは！
新コミュニティ『シドニアの騎士』はもうチェックしていただけましたか？？
さて今日は、記事ページに関するアップデートをご紹介します。
昨年、記事ページのレイアウトのプロトタイプに取り組んでいた際、様々なことを試し、今後もウィキアが前進していくための大きな助けとなるフィードバックをたくさんいただきました！そして何が可能で、何が不可能なのかということを改めて学ぶことができました。ウィキアでは今後も少しずつ記事ページに改善を加えていきたいと思っていますが、現時点での計画は、レイアウトに関する事柄に一つずつフォーカスして取り組んでいくということなので、全ての変更が加わるまでにはどうしても時間を要してしまいます。
まず初めに、ウィキアのレスポンシブ・レイアウトへのブレークポイントの追加と、それに伴うタイポグラフィのアップデートです。タイポグラフィの変更は最大のブレークポイントである「デスクトップXL」(幅1575px以上の画面)のみで発生します。下記のギャラリーにてビフォーアフターの例をご紹介しますのでぜひご覧ください。
ブレークポイント[]
この変更はフルードレイアウト（リキッドレイアウト）による改変で、ブレークポイントを設定することにより結果を予測しやすくし、ページ上でテンプレートが壊れて見えてしまったり、きちんと見えていなかったりということが起こりにくくなります。目標は、大画面でも記事ページを見やすくすることで、これはブラウザが表示できる域によって決まります。（スクロールバーはこの画面のサイズに含まれませんのでご注意ください。）
ブレークポイントと画面のサイズ（幅）
タイポグラフィ[]
ウィキアでは近代のユーザーエクスペリエンスの基準に見合った記事の読みやすさと行の長さにフォーカスしていきたい、と思っています。現在は行の長さだけが変わり、フォントのサイズは変わらないようになっています。このタイポグラフィーのアップデートにより、デスクトップXLのブレークポイントではフォントサイズも変わるようになります。（詳細は下記の表をご覧ください。）PC/タブレットのブレークポイントではテキストサイズは現在のウィキアのデフォルトのサイズとなっています。違いが表れるのは、「デスクトップXL」サイズのみです。
タイポグラフィの変化と各ブレークポイント
このような変化については、ヘッダー、ボディコピー、基本的な引用符についてのみ適応することを目的としていました。ただ、テンプレートで正しいclassが使われていないことがあり、そうなるとタイポグラフィの変更が加えられた場合にテンプレートが壊れてしまうという問題が発生しました。そこで、問題となる可能性がある事柄、その原因、そして解決方法をリストにまとめ、ほとんどの問題はclassの名前をテンプレートに加えるか、CSSを調整することで解決できることがわかりました。
ブレークポイントとタイポグラフィを見るには[]
ブレークポイントとタイポグラフィのプレビュー
URLの最後に ?oasisbreakpoints=1&oasistypography=1 と加えるだけです。
例: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1
ブレークポイントの変更は4月17日からウィキア全体で開始されており、タイポグラフィについては4月30日を予定しています。それまでの間に皆さんのコミュニティでもプレビューを使って実験をしていただけたらと思います。もし問題があったりした場合には下記にコメントお願いいたします。またはこちらからもご連絡をお待ちしています。
スタッフブログが更新された際の通知の受信をご希望の方は、 こちらをクリックしてブログをフォローすると、通知を受信していただけます。