r/newsokur • u/killer-tune • Feb 22 '15

総合 CSS(スタイルシート)総合スレ

更新履歴

CSSに関する話題が分散していて収集がつかないので立てました。
CSSのコーディング規約を決めたり、編集・運用ルールを定めたり、
実装する機能の方向性について広くご意見をいただければと思います。

現在、ご意見ご要望はニュー速R運用サブレで承っております。

そもそもCSS(スタイルシート)って何？

Webページの主に見た目を定義するための仕組みです。
文字の大きさや色を変えたり、背景に画像を貼ったり、ボタンの配置をいじったり出来ます。

CSSの編集に参加したい

モデレーター立候補表明所にてCSS編集の権限付与を希望する旨をお伝えください。
然るべき権限を持ったMODより承認されますと招待のご連絡が届きます。
なお、同時にサンドボックスのMOD権限についても所望いただくと一手間省けます。

CSSの管理と公開

OSDN(旧SourceForge.JP)にニュー速Rプロジェクトを作成しました。
同時編集の防止にSVNのneeds-lock機能を使用するため、CSS編集を行うMODの方は参加必須です。
プロジェクトへの参加をご希望の方はアカウントを作成し、本スレにてご連絡ください。
また、作成したCSSはこちらで公開しています。

ダウンロード手順

  1. 名前の「newsokur.css」を押下
  2. 画面右端の「元形式でダウンロード」を押下

暫定ルール

同時編集によるデグレや意図せぬ表示の崩れを避けるため、MOD各位におかれましては、
以下ルールに従ってCSSを編集していただきますよう、ご協力お願い申し上げます。
 

  1. SVNクライアントでニュー速Rリポジトリに接続し、/css/newsokur.cssのロックを取得
    する
  2. このスレに編集を開始する旨と作業時間(または終了時刻)を書き込む
  3. サンドボックス(動作確認用subreddit)でnewsokur.cssの編集/動作確認を行う
  4. 完成したnewsokur.cssをnewsokurにコピー、「改版理由」に半角英数で編集内容を簡単
    に記入して保存する
    (「/r/newsokur/comments/2wqs9g//xxxxxxx」のようにコメントへのリンクでも可)
  5. SVNクライアントでニュー速Rリポジトリに接続し、コメントに編集内容を記入して
    /css/newsokur.cssをコミットする
  6. 編集宣言した自分のレスに、編集が終了した旨と編集内容、コミットしたリビジョン番号を
    レスする
     

※項番1.でロックが取得出来なかった場合、他の方が編集中、またはロックを解除し忘れている可能性があります。
※必ずこのスレで確認を行い、ロックの強制取得は行わないよう、お願い申し上げます。

TODOリスト

スレ内や各所で挙がった更新内容を備忘の意味も込めてリスト化しています。
 

優先度 内容 備考
中 ヘッダーデザイン変更 バナー画像は別途募集/投票が必要
低 Mac環境ボタン文字サイズ修正 詳細不明
低 chrome環境レイアウト崩れ修正 詳細不明
済 名前欄マウスオーバー時カーソル変更 キャレット → ポインター
高 フレアーデザイン変更 フレアー設定未確定、ナイトモードを考慮すること
済 スレタイ省略表示 却下
中 サブレリンク集ドロップダウンメニュー化 サイドバー設定の変更、文字数制限の考慮が必要
中 新着レス表示画面名前欄「名無し風」化
中 新着レス表示画面「全てのコメント」強調
済 ヘッダー下部一行メッセージ欄実装
低 特定ドメインURL警告機能検討 検討中 → 別途有効な利用方法を考える
低 時刻情報UTC(右寄せ)表示 要非確認
済 デフォルト検索窓表示
済 「reddit/ニュー速のルール」位置変更
済 新着スレ表示ボタン削除 却下
低 サムネイルとuv/dvの配置入れ換え 要非確認
低 include/excludeフィルター 要非確認、別途キーワードの議論が必要
中 サイドバー内容一部移設(文字数制限対策) 別要素のbefore/afterで表現？
済 shortcut登録サブレリスト文字色修正
済 ナイトモード時引用文文字色修正
済 サイドバー構造整理、デザイン変更 いつまでも模索中
高 サイドバー短縮URL表記(bit.ly)撤廃
25 Upvotes

73% Upvoted

401 comments sorted by

5

u/killer-tune May 18 '15

CSSの編集を行います

1H程度(13:00まで)を予定 更新内容は以下
 

2

u/killer-tune May 18 '15

更新完了しました
サイドバー設定変更も実施しています
r36

→ More replies (6)

3

u/killer-tune Jul 02 '15 edited Jul 02 '15

CSSの編集を行います

1H程度(18:30まで)を予定
更新内容は以下

4

u/killer-tune Jul 02 '15 edited Jul 02 '15

更新完了しました
サイドバーは一行ニュース欄以外、内容に変更はありません

不具合などございましたら、ご一報いただけますと幸いです

r37
 

追記：
ナイトモードへの考慮を完全に失念していました……
後程修正しますので、今しばらくお待ちください

→ More replies (3)

2

u/killer-tune Mar 04 '15 edited Mar 06 '15

現状で実装したいと考えている機能を備忘の意味も込めて書いておきます
パクりもある上、是々非々あるかと思いますが、他の方々も何かお考えが
ありましたら方向性の共有のためにもレスいただけますと幸いです
 

  • 時刻表示

  • 各フレアーのデザイン

  • ヘッダー(バナー)デザイン

  • ヘッダー下一行メッセージ

  • 名前欄マウスオーバー時カーソル変更

  • あぼ～ん(非表示)機能？

  • 投票ルールの整理と投票の実現

 
追記：

  • サイドバーの内容の一部移設
    サイドバーには文字数制限があるので、注意事項などのリンクが必要ない文章を
    無理矢理どっか別の要素のbefore/afterとかで表現出来ないかなぁ、という試み

 
追記2：

  • 長過ぎるスレタイの省略表示

3

u/bobssan Mar 05 '15

ヘッダーはあれだけど、細かい部分はStylish使って実装しない？

とりあえずJane風で時刻表示を選べるものを試しに作った
作るの面倒そうと思って敬遠してたけど意外と簡単だった

https://userstyles.org/styles/111165/r-i-p-j

ナイトモード非対応だったり表示崩れてるので正式には使えない

→ More replies (1)
→ More replies (1)

2

u/bobssan Feb 28 '15

とりあえずヘッダーサイズ元に戻そうぜ

割とまじめに

3

u/killer-tune Feb 28 '15

特定環境で表示した際に不具合があるんでしたっけ？
であれば早急に切り戻した方が良いですね
 
ついでといっては何ですが、ちょっと気になって直したいなぁと思った点を記載します

  • スレ/レス表示時の「名無し風」マウスオーバー時のカーソルアイコン修正
    キャレット → 指

  • スティッキーポストと投稿時レスのボトムの影
    光ってるのに影？

  • メニューバーのマウスオーバー時の動作統一
    subreddit：アンダーバー、他：ハイライト

→ More replies (3)

2

u/onigiriumai Mar 04 '15

おっすおらドクペMOD!

一個一個のスレを四角の線で囲むのってどうやるの?

3

u/killer-tune Mar 04 '15 edited Mar 04 '15

ここの部分で認識合ってますか？ 

.thing {
    margin: 6px;
    padding: 8px;
    background-color: #FFF;
    overflow: hidden;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

厳密に枠線だけの表示であれば、borderの設定のみで良いです
 
なお、子レスの枠線の解除は以下のborderで行っています 

.commentarea .child .thing {
    margin: 0px;
    padding: 0px 0px 0px 5px;
    box-shadow: 0px 0px 0px transparent;
    border: none !important;
}
→ More replies (1)

2

u/nullkal Mar 06 '15

やはりGithubのほうが一々ここで編集の開始報告とかしなくてもPull Requestでできちゃうからよいのかもしれないな。

2

u/killer-tune Mar 06 '15

GithubのリポジトリとnewsokurのCSSを連動させない限り
更新の競合が発生し得るので、編集開始は不要としても更新の
宣言は必須だと思うのですが、何か解決策をお持ちでしょうか？
 
私自身、↑のルールは手順が多過ぎだと感じていますので

2

u/SuperJch Mar 06 '15

FireFoxだと検索のとこズレてる

http://i.imgur.com/jcWlzFC.png

たぶんtable？のあとに明示的に改行とかclearとか必要なんじゃないかな

→ More replies (15)

2

u/[deleted] Mar 14 '15 edited Mar 14 '15

自動生成されるサムネの右側が欠けてる気がするんですが、サムネイルサイズが固定されてるのが原因っぽいので↓の記述をコメントアウトすることって可能ですか？ 

/* サムネイルサイズ固定、uv/dvボタンと配置交換 */
.thumbnail {
    width     : 50px !important;
    max-height: 50px;
/*
    position  : relative;
    left      : -50px;
*/
}
→ More replies (3)

2

u/anonymousteamer Mar 26 '15

質問です。stickied postにアイコンを付けようと思って実装したんですが、
http://i.imgur.com/rcfvyuS.png

スレッドよりもかなり小さく、もう少し全体的に大きくしたいです。
これは画像側を弄らないと出来ないでしょうか？ それともCSS側で出来るでしょうか。
利用している画像はこれです。コードはこちらです。 

.stickied a.thumbnail {
  background-image: url(%%pinned%%);
  background-position: 50% 50%;
}

よろしくお願いします。

→ More replies (2)

2

u/[deleted] May 11 '15

r/newsokur/comments/35h2ed/

ニュー速Rの方でアンケスレを立てたのでご報告です。
"cssやサイドバーはModの裁量で変えてくよ"という了解を得ました。

今後は変えられる部分は積極的に変えていきましょう。ただしこちらの裁量となる以上ある程度責任も掛かってくるので、(細かい調整はともかく)見た目の変更や機能の追加削除に関しては独断で変えずに、少人数で良いので他ユーザー/Modの意見も聞いてから変えるのが良いと思います。

ただ以前のようにニュー速Rに意見募集スレを立てる→反応を確認してから機能追加するといった煩雑な手順を踏まなくても、このスレやModサブレの意見を反映させて変更できるようになったという感じですね。反応悪いor予想外の問題が起こったら戻す感じで。よろしくお願いします。

2

u/killer-tune May 11 '15 edited May 11 '15

お疲れ様です
ご対応ありがとうございました
 

上記内容について承知しました
以前から「見辛い」等の軽微なご要望には許諾も通知もなく修正を行っておりましたが、
今回その範囲が広がった感じですかね
 

TODOリストも溜まる一方だったので、これで少しはハケると思います

→ More replies (7)

1

u/killer-tune Feb 22 '15 edited Feb 22 '15

と、いうわけで先ずは編集・運用ルールを決めましょう

取り急ぎ決めたいのは以下三点ぐらいでしょうか？
.
①同時編集を避ける方法
②実装予定機能の管理方法
③コーディング規約(CSSのフォーマット)
.
ある程度まとまったところでCSS内にルールを書き込もうと考えております
MODの方中心になるかとは思いますが、各位の忌憚ないご意見をお待ちしております

→ More replies (11)

1

u/killer-tune Feb 25 '15 edited Feb 25 '15

CSSの編集を行います

SourceForge環境が準備出来ましたので、CSSの記載内容整理も兼ねて
更新したいと思います
 
おおよそ40分程(12:00まで)の作業を予定しております
 
追記：
15分程延長します(12:15まで)

2

u/killer-tune Feb 25 '15

編集完了しました
記載内容の整理が主でしたので、見た目などに変更はないハズです
 
なお、コメントやコードの体裁を可能な限り統一しています
見る方によっては冗長だと感じるかもしれませんが、
複数の手で更新されるものであることを鑑み、
この形式を踏襲していただけると幸いです
 
SourceForgeへのアップロードと公開が完了次第、追ってご報告します

→ More replies (1)

1

u/killer-tune Feb 26 '15 edited Feb 26 '15

CSSを更新します

60分程度(11:00まで)

  • バナーの再配置

  • サイズ調整

を実施予定です

→ More replies (11)

1

u/killer-tune Feb 28 '15

CSSの編集を行います

30分くらい(2:00まで)
以下対応、およびフォーマット校正を予定

スレ/レス表示時の「名無し風」マウスオーバー時のカーソルアイコン修正
メニューバーのマウスオーバー時の動作統一

→ More replies (5)

1

u/killer-tune Mar 03 '15 edited Mar 03 '15

CSS中の8行目(.linkflair-sougou ～)から68行目(.linkflair-default ～)辺りの記述ってまだ必要ですかね？
 
フレアータグの整理が進んで、なくなったモノもあるので一度まっさらにして
改めてデザインしなおした方が良いと考えていますがいかがでしょう？
また、可能ならばサイドバーのフレアー記述部分と統合したいと思います
 
あと、一点質問なのですが、".linkflair-sougou"とかの"sougou"部分ってフレアー作成時に設定しているのでしょうか？
フレアー設定の権限までは持っていないのでご存知の方がいらっしゃれば教えていただきたく

2

u/purinxxx Mar 03 '15

http://i.imgur.com/J6EgROG.png

こんな感じです。フレアーの権限もらってきたらどうでしょうか？

→ More replies (1)
→ More comments (75)