Studio TA Subsite の案内とお知らせ

価格.com掲示板をアレンジする(3) 白熱スレッドランキング の表を見易く

2018年 02月 13日

白熱スレッドランキングの表


開くスレッドを限定していると、情報が偏ったり面白い新情報を見過ごす事になるので、私は「白熱スレッドランキング」で面白そうな記事を時々つまみ食いします。 しかし、このページも「MS Pゴシック」が基準フォントです。 このフォントを「メイリオ」に指定するついでに、表をもう少し見易くする事を考えました。

本来のランキング表は、ウインドウ幅960px以下で横スクロールバーが出る「横幅固定」の表です。

a0349576_21500686.png

上図を良く見ると、左端の「順位」列、右端の「最終投稿日時」列など、無駄な幅があります。 この無駄を省いた上で、「サブカテゴリ」「内容・タイトル」列を幅可変として、表全体をコンパクトな可変幅にアレンジします。



「table」の一部の列幅を固定とするのは案外と難しい


色々と表のCSSを弄っている内に、案外と知らなかった「table」の扱いに出会いました。 表の一部の列を固定幅にするのは、

◎「table」に「table-layout: fixed;」を指定する
◎ 固定する「th」「td」等に幅値「width: ~;」を指定する
◎ 固定しない「table」「tr」「th」「td」等には幅値を指定しない

というのが基本の様です。 しかし、この通りしても思った様には行きません。

◎ 固定幅としたい「th」「td」等に「white-space: nowrap;」を指定する

これが、今回のアレンジの鍵になりました。(教科書通りにならないのは、スクリプトによる指定が効いているのかも知れません)
カットアンドトライで模索していくと、この「table」に関しては、

●「table」に「table-layout: fixed;」を指定する
● 全ての「td」に幅値「width: ~;」を指定する
● 固定する「td」には「white-space: nowrap;」を指定する
● 可変幅の「td」には「white-space: nowrap;」を指定しない

という方法が目的の通りになりました。 但しこの指定方法は、全ての「td」の指定幅の合計値が「table」の最大幅となり、可変幅の「td」は指定幅を最大値とした拡縮状態になります。

可変幅の「td」に幅値を指定しない場合は、「table」や可変幅「td」は完全に自由な拡縮状態になりますが、可変幅「td」の幅のコントロールがアレンジ側で出来なくなり、この指定方法は却下しました。



アレンジ後の「table」の拡縮の様子


ウインドウ幅が900px以上の場合は、下図の様に「table」の左右に余白が出来、「table」幅は最大値(約830px)に固定です。

a0349576_21523166.png

ウインドウ幅が900pxより小さくなると「サブカテゴリ」と「内容・タイトル」の列が縮まり始めます。 下図はウインドウ幅が760pxの時で、上に比べると可変幅の列内の右余白部分だけが減っています。

a0349576_21581924.png

可変幅の文字列(a要素)は、文字数が一定ではありません。 ウインドウ幅を縮めて行くと、文字の多い列から折り返しが始まります。 下はウインドウ幅735pxの時で、「サブカテゴリ」の列が折り返されています。

a0349576_22061471.png

更にウインドウ幅を縮めると「内容・タイトル」列も折り返されます。 レスポンシブではないですが、この様にして幅をコンパクトにアレンジしました。 小幅のモニターでも使用し易い、或いはブラウザで拡大表示してもデスクトップを占拠しない事を基本として、この様なアレンジをしているのです。



実際に価格.comをアレンジするには


このアレンジスタイルは、スタイル投稿サイト「userstyles.org」に、スタイル名「Kakakucom Viewer」として登録しています。

Chrome あるいは Firefox のブラウザを使用されているなら、拡張機能の「Stylus」(最新の「Stylish」でも可)を導入して、以下のリンク先で「Kakakucom Viewer」をインストールすれば、アレンジが有効になります。


「Kakakucom Viewer」の他のアレンジ内容については、以下のリンク先を参照ください。





「Kakakucom Viewer」のセクション構成


最新の「Kakakucom Viewer」は 10セクションの構成です。

セクション1  価格.com 掲示板 基本CSS

セクション2  写真ビューワー画面 基本CSS

セクション3  コメント編集画面・レビュー編集画面 基本CSS

セクション4  レビュー編集画面 追加 基本CSS

セクション5  フォント メイリオ指定 / 画面背景色

セクション6  フロート部 機材詳細の非表示オプション

セクション7  フロート部 カテゴリタブの非表示オプション

セクション8  フロート部 全体の非表示オプション

セクション9  白熱スレッドランキング 基本CSS

セクション10  PHOTOHITO 基本CSS


●「セクション5」はCSSの扱いが出来る人には、簡単にカスタマイズが可能です。

●「セクション 6, 7, 8」の「有効」「無効」の切り替えで、フロート部の表示を選択出来ます。

● 初期設定は、「セクション1~6, 9, 10」を有効、「セクション7, 8」を無効に設定しています。

●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 編集画面で適用先を変更して「保存」を押すと、オプション設定が変更されます。



[PR]
by Ataron | 2018-02-13 23:02 | PC環境(ハード/ソフト) | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/28121873
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。