2022-06-16
テイフェス情報まとめページがスマホからでも見やすくなりました
「テイフェス情報まとめ」のデザインを修正して、スマホやタブレットからでも見やすく調整しました。
テーブルはPCとスマホでは全然見え方が違うので、最近は両方に気を使ったデザインにしないといけないから難しいですね…。そもそもテーブルをデザインに使うのがよくないということは十分分かっているのですが。
これでデザイン関係の修正は一段落ですかね。日曜くらいからTOF2021の更新を真面目に始めようと思います。
2022-06-15
テイフェス出演者リストがスマホからでも見やすくなりました
テイフェス出演者リストのデザインを修正して、スマホやタブレットからでも見やすく調整しました。また同時に見出し列（出演者名と作品名/キャラ名を記載した列）を固定し、横スクロールをしても見出し列が見えたままになるようにしました。
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
2020-01-18
TablePress Extension: DataTables FixedColumnsで固定した列の表示がずれる場合の対策（未完）
テイフェスの出演者リストなんですけど、近年は表が大きくなりすぎていて、きれいに表示するのが大変です。
特に出演者は通算で100人を超えています。あの表は、Wordpressのプラグイン「TablePress」で作成し、かつ見出し列（キャスト名および登場作品の列のこと）を固定してスクロールさせるために「TablePress Extension: DataTables FixedColumns」も入れています。
ただ、行が100を超えるあたりから、見出し列だけ上下にスクロールしてしまい、表示がずれるという問題が出ていました。
こんな感じになります。
対応策が分からず長期間放置していたのですが、最終的に追加cssで、
div.DTFC_LeftBodyLiner {
overflow:hidden !important;
}
としてやれば、ずれることはなくなりました（ただし最終行の表示がちょっとおかしくなるので、そのあたりは今後の課題ですが…）。このコードは、見出し列だけが独立してスクロールしないようにするためのものです。
これでほぼ良くなりました。
あとはスマホで閲覧した時に表が表の機能を成してないので、それをどうにかしないとな…
2017-04-26
サイトの大体全部をレスポンシブデザインに変更しました
昨日に引き続き、当サイトで大きなテーブルを使用しているページ（主にプレイ日記とナディアの感想ページ）の修正を行いました。
ナディアのページはサイトの初期から存在しているだけあって、デザインがかなり不格好です。正直今回の修正も場当たり的な感じは否めないので、時間があればきちんとリニューアルしたいとは思っています。そもそもHTMLの表は横に横に見ていくものだから、第1回の感想の右隣に第21回の感想がある現状がおかしいんですけどね…
皆さんお気づきだと思いますが、僕はデザインセンスが皆無の人間なので、こういう作業は苦手です…。時々ウェブデザインの本やサイトを見て研究をしているつもりなのですが、一向にセンスが向上しませんね。何かもし良いアドバイスがあればお寄せください。マジで。
2017-04-25
サイトの一部をレスポンシブデザインに変更しました
うちのメインコンテンツの一つ「テイルズオブフェスティバル 歴代出演者リスト」なんですが（なぜか意外とアクセス多いです）、携帯などで見るとデザインが崩壊し、ほとんど役に立たないことが以前から気になってました。
あの表は、Wordpressのプラグイン「Tablepress」で作成しているのですが、このプラグインの拡張機能がいつの間にか充実していたので、今回それを導入し、レスポンシブデザインに対応させることにしました。
以下備忘のためにメモ。1はWebサイト管理者様向けの、2は当サイトの利用者様向けの情報です。
１．導入方法
今回導入した拡張機能（Extensions）は「Responsive Tables」（公式サイト）と「DataTables FixedColumns」（公式サイト）です。
前者は、表をレスポンシブデザインに対応させるためのもの、後者は表の特定の列を固定する（表をスクロールしても、常に表示されるようにする）ための拡張機能です。
１．ダウンロード
↑からダウンロードし（上の図は「DataTables FixedColumns」のものですが、どちらもほぼ同じ構成です）、解凍。FTPで[wp > wp-content > plugins]フォルダにアップロードします。
２．設定
拡張機能を適用するテーブルを設置したページの編集画面を開きます。
おそらく現時点では、テーブルのショートコードは
[[table id=○○ /]]
となっているはずですが、これを
[[table id=○○ responsive=scroll responsive_breakpoint=all datatables_fixedcolumns_left_columns=2 /]]
とします。
- responsive=○○
○○には「flip」「scroll」「collapse」のいずれかを挿入します。それぞれ画面の幅よりも表の幅が大きくなった場合に、表をどのように表示するかを指定します。
具体的にどう見えるかは公式サイトをご覧ください。
- responsive breakpoint=○○
○○には、「phone」「tablet」「desktop」「all」のいずれかを挿入します。画面の幅がどの大きさより小さい場合に、↑の方法での表示に切り替えるかを指定します。それぞれ「768ピクセル以下」「980ピクセル以下」「1200ピクセル以下」「常に」に対応しています。
datatables_fixedcolumns_left_columns=○○
○○には、0以上の数字を挿入します。最も左の列からいくつ目の列までを固定（常に表示する）かを指定します。
うちの場合ですと、「出演者名」と「作品/キャラ名」の2つの列を固定しているので、「2」と指定しています。
leftをrightに変えれば、右側の列を固定することもできます。
２．利用方法
これでタブレットやスマホなどで該当ページにアクセスすると、（タッチパネルであれば）スワイプすることで、表をスクロールできるようになっているはずです。
表の上部にある、「○件表示」で表示件数を少なくしたり、「検索」で探したいキャストや作品の名前を入力したりすることで、より見やすくなるのではないかと思います。
その他、どさくさに紛れて、これまで小さな画面では見づらかった（というより見られなかった）ページのいくつか（主にゲームプレイ日記）を修正しています。
