*Y.A.S.*

テイフェス出演者リストのデザインを修正して、スマホやタブレットからでも見やすく調整しました。また同時に見出し列（出演者名と作品名/キャラ名を記載した列）を固定し、横スクロールをしても見出し列が見えたままになるようにしました。

Y.A.S.

 

https://www.yukkun20.com/index.php/tof/tof_cast

テイルズオブフェスティバル　歴代出演者リスト

テイルズオブフェスティバルも回数を経るに従って誰がいつ出演したのか自分でもよく分からなくなってきたので、備忘のために作成してみました。◎…MC、○…出演、△…VTRのみ、または音声のみ※A1…TOA/アッシュ役※A2…TOL/ワルター役※A3…TOI/ケルベロス役※A4…TOI/オリフィエル役※A5…TOD/ソーディアン・ディムロス役・TOD2/ディムロス役※A6…TOP/ダオス役・TOS/ユアン役※A7…TOD2/ジューダス役※A8…TOV/シュヴァーン役※A9…TOG/ヴィクトリア役※A10…TOX2/プレザ役※B1…シークレット・ゲスト※B2…出演予定はなかったもののエンディングのみ飛び入り参加...

PCではこれでほぼ問題はないのですが、スマホで見ると微妙にセルがずれます。ただこれはもうyukkun20の技術力では直りそうにないのでお許しください。

＜＜以下ひとりごと＞＞

これまでスマホ等では全く表の体裁をなしていなかったのですが、それはWPtouchのカスタムCSSで、モバイルテーマにおいてはテーブルの要素をすべてdisplay:blockでブロック化していたのが原因です。これをすると、表をスマホ等で閲覧した場合、左上のセルから始まり左から右、上から下のセルの順に一列に並べて表示できるため、小さめの表を見やすく表示するには向いています。ただ大きめの表を表示しようとすると極めて縦に長い表になるため、視認性が下がります。

そのためこのページではカスタムCSSをはずそうとしたのですが、あいにく特定のページでのみカスタムCSSを解除する方法が分かりませんでした（これが分かれば前述の微妙なセルのズレも直せると思うのだが…また後日きちんと調べよう）

仕方なくWPtouchのカスタムCSSよりも優先順位の高い、TablepressのカスタムCSSで、対応するプロパティにデフォルトの値を設定することで、事実上打ち消すことにしました。

各プロパティのデフォルト値は以下の通りです。

• table：table
• tbody：table-row-group
• tr：table-row
• th：table-cell
• td：table-cell