5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

CSSを利用した2ちゃんねるのデザイン

1 :Name_Not_Found:01/08/27 03:43 ID:mxjL5tpc
転送量軽減のため、2ちゃんねるの現在のデザインをCSSを利用して作り上げるスレです。

今までに出てきた点に関しては以下をご覧下さい。
http://www.gedoh.org/aki/2ch/wiki/yukiwiki.cgi?mycmd=read&mypage=%5B%5Bhtml%82%CC%8Ed%97l%5D%5D

現行のタグをダイエットして転送量を減らすための話は以下のスレでお願いします。
http://natto.2ch.net/test/read.cgi?bbs=hp&key=998774537

168 :Name_Not_Found:01/08/29 23:59 ID:22fiFnTw
table残すと軽くはならないでしょう。
divつかう方向でいいんじゃないでしょうか。

169 :Name_Not_Found :01/08/30 00:11 ID:zTjKOAyE
これ良い感じですね。IE5(moon)とNN4.75で見た目殆ど同じだし。
http://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html

170 :Name_Not_Found:01/08/30 01:14 ID:h71Ff362
>>169
すごくいいっすね。
ただ、赤色使って目立つから、スレタイトルのフォントは大きくしなくていいのでは?

171 :Name_Not_Found:01/08/30 01:29 ID:InHVwjYA
とりあえず,見てくれてるかどうかわかんないけど書いておこう

>170
確かに.デフォルトの h3 に任せるというのもありだと思う
ただ,これによって削られるのは ;font-size:150% の部分だけ
ま,1byte でも少ない方がいいか

で index のほうは table を使わないなら >169 のような感じでいいと思う
(細かく言えばもう少し削れるが)

read.cgi のほうも仕様が今のまま(5.10)だとすると
b{color:#080}
b a{color:##f}
とすれば font いらなくなるはずだが…見てくれないかなあ

172 :171:01/08/30 01:34 ID:InHVwjYA
追記
read.cgi
外部リンクの target="_blank" の "" はなくてもよい
ほんの小さなことだが圧縮非対応ブラウザや何回も読まれることを考えれば

173 :171:01/08/30 02:02 ID:InHVwjYA
何度もすまない
>171
##f -> #00f ね,何を書いているんだ…

ついでにめちゃ細かいが >169 (index2.htm 代替)も
たかだか数十 byte でも「圧縮非対応ブラウザや何回も読まれることを考えれば」
1 Content-type 前後の "" 不要
1 x-sjis -> shift_jis (read.cgi でもそうなってるし)
30 h1 の class 不要
32 "" 不要(以下 "" とだけあったら不要の意味)
64-83 body 前後 ""
84 ""
101-120 _target 前後と Arial 前後の ""
127 以降の class=n は 広告 table 内の b が解決しないといけないのか…
218 submit 前後
こんなものか.現状の index2 にも適用できるはずだから prog 板の方が反映させてくれると嬉しいのだが…

>1 を思い出そうよ

174 :Name_Not_Found :01/08/30 02:27 ID:zTjKOAyE
今日は>169書いた人、居ないんですかね。
>>173
>prog 板の方が反映させてくれると嬉しいのだが…
向こうの要望も見てください。>>123

175 :Name_Not_Found:01/08/30 02:28 ID:CLoUS07Q
みなさんがんばってください、としか言えない自分・・・
これはUNIX板のみたく、実際使われたりするやつですか?

176 :Name_Not_Found :01/08/30 02:45 ID:zTjKOAyE
>175
使われると決まっている訳じゃ無いみたいです。だからこそ応援したいかも。
プログラム技術だって「使われると決まっている」からやってる訳じゃないでしょう。
非公開のbbs.cgiにも手を付けているようですし。
「自分達に出来る事」をやっているんだと思いますよ。

177 :133=171-173:01/08/30 03:08 ID:F9xLrhuA
気になって寝るに寝られない
>174
見てきました.これは,こういう修正もプログラム側で入れることができるよ,ということですよね
それに追加して,ここでのことも汲んでいただけたらな,と
read.cgi に関しては >171 一番下と >172 をやっていただければ font color=green が全部消せます
(ただし b のあとに a を入れるようにしてもらわないとダメ,もしくは b a{} でなく a b{} で宣言)

>173 の 127 class=n 問題は,単に
dt b{color:#080}
dt b a{color:#00f}
とすればいいだけの問題であった

font を消してどのくらい減るかというと(age発言数)x25 -(CSS 宣言部)byte

178 :Name_Not_Found:01/08/30 03:37 ID:jG5T7vKs
 テレホPM11〜AM2避けてた。

>173
 反映

 行番号はfreewebの広告分多くなってるね。
 鯖の広告は画像リンクを要望してます。また、元スレのほうで
最適化してるんで、完成したら変更します。

179 :♯6411:01/08/30 22:43 ID:tL3bpyHs
>>169 の成果をちょっと反映してみた。
すごくうさんくさいし、ちょっとバグってるけど、
いい感じ。以下がサンプル。
http://www.psychedance.com/test/read.cgi/tech/

180 :Name_Not_Found:01/08/30 22:59 ID:pUyt9Aok
スレッドの区切りに<hr>入れてもらえると、cssがOFFの時うれしいんですが。

181 :Name_Not_Found:01/08/30 23:06 ID:8jHM6wZc
<form method=POST action="../test/bbs.cgi">
が離れてる必要ってあるんでしょか。

182 :Name_Not_Found:01/08/30 23:10 ID:ejaUiUPk
>179
お疲れ様です
・form がなぜか 2 つある
・font color=green はいらない(b タグにスタイル指定しているので)
という 2 点,お願いします

183 :♯6411:01/08/30 23:14 ID:tL3bpyHs
>>182
今のところ、ダイジェストの中身だけ
>>169 案を採り入れていない(っていうか
無理矢理呼び出してる)ので、
もうしばしお待ちを。
今からごりごりやるです。

184 :Name_Not_Found:01/08/31 00:18 ID:ZjKIaXOI
>179
 お疲れです。なんとか文字の置き換えで頑張ってください。
 imgはCSSのほうで枠線無しにしてあります。CSS無効だと線が
出てしまいますが、文字数を減らすことを優先ということでこう
してます。
 あと、スレのリンクが
<a href="998997848/?ls=50">
となっていますが、<base href="">が抜けているみたく。
 read.cgiの仕様が変更になったのかな?

>180
 反映
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133noncss.html

hr{display:none}

 で、CSSが有効だと非表示となり、無効だと水平線が現れます。

185 :Name_Not_Found:01/08/31 00:39 ID:QwqyQIRE
すげえ!ここでもカッコイイことしてますね。
やっぱ、クロスブラウザになるわけですよね。
NN4でも見れるようになりますか。

186 :Name_Not_Found:01/08/31 00:42 ID:yZOSrl/w
>179
ぼろぼろだね

187 :♯6411:01/08/31 00:44 ID:9N.8I5pM
>>184 スレのリンクは新仕様。

で、HTML中に出てくる % の文字が
消え失せていたのに対処したら、
少しはよくなった、とおもう。

まだ最新のものには追従してないす。
こちら>>179

188 :Name_Not_Found:01/08/31 00:55 ID:pOp3Ryuw
<h2>プログラム技術@2ch掲示板</h2>
<h3>■PROXY規制中■</h3>

プロキシ規制中はこんな感じになるんでしょうか?
あと、ほんと個人的な感想ですが
div{border:.1em ridge; margin:0; padding:1em}
が現行のnn4での見え方に近いような気がするです。

189 :Name_Not_Found:01/08/31 01:03 ID:7TqHdcVk
head タグは無くても良いのでは。

190 :Name_Not_Found:01/08/31 01:38 ID:pOp3Ryuw
<ul>
<textarea rows=5 cols=60 wrap=OFF name=MESSAGE></textarea>
</ul>

この<ul>はいらないかと。
read.cgiのほうではやってないし。

191 :65とか149とか153とか:01/08/31 02:02 ID:GLaY1f/s
ふふ、このスレでもか。そろそろ放置プレイに目覚めそうだな。
そうなる前に、作業やめて逝く。さらば

192 :Name_Not_Found:01/08/31 02:13 ID:pOp3Ryuw
>153
んじゃレスを・・・
<form method=post action="../test/bbs.cgi">
<input type=submit value="新規スレッド作成画面へ" name=submit>
<input type=hidden name=bbs value=hp>
<input type=hidden name=time value=998919917>
<br><b><a href=http://www.2ch.net/before.html>書き込む前に読んでね</a> | <a href=http://www.2ch.net/guide/>2ちゃんねるガイド</a></b>
</form>
こうしたほうがいいかもしれない。
</form>の下が一行開くのをつかったデザインだから・・・

193 :Name_Not_Found:01/08/31 03:13 ID:o/qtawU2
 反映。

>188
 串規制もそんな感じ。あれも赤色だったでせう。たしか。
 枠の形状はじつは適当です。ridgeである必要性はありません。

 というか、CSSなので、ユーザーサイドで好きに変えれるし。
 そんなわけでclass名はもう少し意味がある名前にしてはどう
かと思わなくはないんですが、わざわざ !important する奇特な
人はオレぐらいしかいないかということで放置。
 枠変えてみました。変わってますか。

>189
 NN、NCでhead外にある<style type="text/css">〜</style>
をきちんと反映してくれるならOK。そのあたり実験してみてくだ
さい。

>190
 んむ。削除。

194 :Name_Not_Found:01/08/31 03:24 ID:o/qtawU2
>191
 むしろNC、IEがDOCTYPE宣言を放置プレイ。IE6では反映されま
すか。

 漏れも宣言してないの胃が痛い。でも文字数多すぎ。この際プ
ライドよりも、同じ転送帯で1つでも多くのレスが送れるように
したいヨ。
 …ダメ?

 あと、密かに参考にしてたりする。

195 :Name_Not_Found:01/08/31 05:11 ID:kWz7Lvbo
>>179
「名前:」「投稿日:」消してください

196 :♯6411:01/08/31 05:53 ID:Yrl9Zc2I
ためしに、sageの見てくれを変えてあります。
少しだけ意見求む。
なお、相変わらず板ダイジェストページの見てくれは
完全じゃありませぬ、スマヌ

http://www.psychedance.com/test/read.cgi/tech/998997848/?ls=50

197 :Name_Not_Found:01/08/31 06:09 ID:pOp3Ryuw
sageがリンクされないのはありがたい。
Lynxとかつかってるときに、邪魔なんですよね・・・あれ。

198 :teess:01/08/31 06:17 ID:vrhX2byk
>196
 誤爆でなければCSS化のテンプレにします。
 age/sageは、まあ、見なれるまでの問題ですね。

 ただ、個人的には過去ログ出しの意味合いが強いread.cgiで、
age/sage情報は本当に必要なのか疑問だったり。これがあるがゆ
えに「ageるな/sageるな」という無駄レスが発生しているのでは…。

 スレ作成者がage/sage進行を操作できるといいんですけどね。

 …っていうか、そろそろindex2のh化を始めたほうがよいような。
cですよね。なんかちらっとperlでなんとかって読んだ気も。

199 :Name_Not_Found:01/08/31 06:27 ID:vrhX2byk
 情報。

「転送量(料)の増加で2ちゃんねる閉鎖の危機(13)」
ttp://teri.2ch.net/test/read.cgi?bbs=accuse&key=999197286
|511 名前:マァヴ ★ 投稿日:01/08/31 06:11 ID:???
|あ、思い出した(^_^;)
|今のindex.htmlは廃止される予定です。
|左のフレームにあるbbsmenuも廃止されます。
|今後は使いにくいけどカテゴリ別のbbstableになる予定です。

200 : :01/08/31 11:55 ID:3eGpo5H.
>196
お疲れ様です
見栄えに関しては Win IE55, NN478, Moz092 で問題ありませんでした
タグのダイエットや CSS は >198 さんがテンプレートを作って下さった後に

一つ気になったこと
>196 の中には名前のメール欄があるもの(<a href=mailto:...>)が一つも
ないのだけど,それはなくすの?本当にメールアドレスを入れたい人は
本文中に書いてもらうとか?
あ…サンプルにした元ソースになかっただけか?

名前のところの色のパターンはいくつあるのか?という質問と同じことだけど

201 :Name_Not_Found:01/08/31 15:47 ID:eBfonrB.
>200
 共通CSSは133さんに感謝。記念してCSSサンプルのfile名には
133の文字をw
 テンプレを作るのではなくて、既存または改良のhtmlをCSS化。
問題無ければc言語の.h化という作業になります。

 転送量削減のため、デザインや2chの構成を大幅に変える可能
性も出てきました。というわけで、既存の改良をとっとと済ませ
て、氏にスレになりつつある「●2ちゃんねるの新規デザイン●」
に活動を移したいと。


 メールアドレスは残すほうに一票。ゲー板とかだと、ネタバレ
にからむ質問の回答はメールアドレスに書いたりするからー。
 名前の多色化は意味無しとみた。非CSS環境も考慮しないとい
けないし。それよかキャップについてはbタグの代わりにiタグを
吐くようにbbs.cgiを変更するほうがよいかと。

202 :♯6411:01/08/31 16:06 ID:9N.8I5pM
>>201 いまのところ、sageのアンカーを落とすか
どうかは流動的ですし、
mailtoがそれ以外(ageとかネタバレとか)だったら
そのまま入れる、というのが流れっぽい。

203 :teess:01/08/31 19:56 ID:uCr8qcvA
 web制作管理@2ch掲示板のindex2を丸ごとCSS化してみました。
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html
CSSオフの場合
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133noncss.html
 65549 → 55047バイト


 「read_cgi改良スレッド.htm」を丸ごとCSS化。ちと酔った。

ttp://isweb3.infoseek.co.jp/play/teess/read_cgi改良スレッドcss.htm
 18891 → 16602バイト

204 :teess:01/08/31 19:58 ID:uCr8qcvA
 訂正

ttp://isweb3.infoseek.co.jp/play/teess/read_cgicss.htm
 18891 → 16602バイト

205 :133=...:01/08/31 20:59 ID:3eGpo5H.
何か光栄なことになっているようですが,んなことはおいといて

>203
お疲れ様です
どっちもこれだけ減らせると結構いい感じですね

index2 のほう,枠が細くなってるけど,これは好みの問題だな

read のほう,NN478 で見ると margin バグのせいで詰まって見えます
ので,各発言最後に一つだけ <br> を入れるといい感じかも(現状 2 つだよね)
バグはバグなんだが,さすがに NN4 使いの人が許してくれなさそうな見栄え…
class=s はメール周りの仕様が決まってからでしょうね

206 :♯6411:01/08/31 21:25 ID:9N.8I5pM
ひとつだけ注文ですが、
板ダイジェストと
カキコ表示の
発言表示用HTMLは、なるべく同じものに
なるようにしてくだちい。

207 :Name_Not_Found:01/08/31 22:56 ID:pOp3Ryuw
<form style="text-align:center" method=POST action="../test/bbs.cgi">
<input type=submit value="スレッド作成" name=submit>
<input type=hidden name=bbs value=hp>
<input type=hidden name=time value=999240458>
<br>
<span style="font-weight:700;font-size:110%">
<a href=http://www.2ch.net/guide/>2chガイド</a>
<a href=http://www.2ch.net/before.html>書き込む前に読んでね</a>
<a href="http://www.2ch.net/guide/faq.html">FAQ</a>
</span>
</form>
<p style="text-align:center"><a href=http://210.150.210.150/sage/bbstable.html>■掲示板一覧■</a></p>

目的には添わないと思いますが、
少しだけ見た目に凝ってみたり。

208 :._. . _:01/09/01 00:17 ID:5dUygw3o
>207
同じ見え方でもっと短くした版 (-54byte)

<center>
<form method=POST action="../test/bbs.cgi">
<input type=submit value="スレッド作成" name=submit>
<input type=hidden name=bbs value=hp>
<input type=hidden name=time value=999240458>
<br>
<b style="font-size:110%">
<a href="http://www.2ch.net/guide/2ch/" target=_blank>2chガイド</a>
<a href="http://www.2ch.net/before.html">書き込む前に読んでね</a>
<a href="http://www.2ch.net/guide/faq.html">FAQ</a>
</b>
</form>
<a href="http://210.150.210.150/sage/bbstable.html">■掲示板一覧■</a>
</center>
必要な " は足して必要ない " は消しました

209 :Name_Not_Found:01/09/01 11:57 ID:7a1ICvLQ
>205
 CSSの醍醐味は、ユーザー側で!importantを利用することにより
好みの装飾に変更できるという点ですから、どの枠の形を採用す
るかという命題には意味が無かったり。
 ただ、クラス名はユニークにする必要があります。現在は減量
の為にrとかmとか無茶なクラス名を割り当ててますが、最終的に
は2ch-res、2ch-menuとかになるんじゃないかと。

 dtへのmarginバグは、ddに対する下marginに変更するとどうな
るんでそ。


>206
 あー、index2のCSS化した後に、「あ、そうそう、新仕様のが
あったっけ」と取りかかったんで、統一がありません(w
 index2のレス部分を新仕様に統一すればよいのでせうか。

 あと、最新仕様はどこを追っかければよいのかー。
「read.cgi改良スレッド」
ttp://piza2.2ch.net/test/read.cgi?bbs=tech&key=998997848
 ココ?

 ともかく反映。
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html
ttp://isweb3.infoseek.co.jp/play/teess/read_cgicss-133.html

>207
 うと、どのhtmlの変更でそ。133のならヘッダの部分で
h1, .c{text-align:center}
があるんで、class=cだけでセンタリングされますです。

>208
<b style="font-size:110%">

<big>にするとか(ぉ

210 :Name_Not_Found:01/09/01 14:21 ID:wHYxvUCA
>207
>208
はスレッド作成フォームとその下のfaq関係のセンタリングですな。

nn4はdt.ddへのマージン指定ほとんど駄目っす。

211 :._. . _:01/09/01 14:48 ID:pdc0Maz.
>209

CSS の醍醐味はそりゃそうなんだが,今の目的は「CSS 使ってできるだけ軽く,
しかも前と同じように見えるようにする」だと思うのだが.
important なんて知らない人が多そうだし.
同様の理由でクラス名に意味のある名前をつけても仕方ないんじゃない?
(今回の場合,減量するという目的がないのだったらそもそも CSS を使う意味がない)

dd の margin はいろいろやったがバグがどう働くかわからんかった.
で,単純な回避策として dt{margin:1em 0} とすれば NN4 で本文の下に 1 行空く.
副作用で(前も書いたが) IE55 や Moz では 名前の下も 1 行空く.
「できるだけ短く,できるだけ同じように」だと,このあたりで妥協するしかない.

<big> のほうが短くていいね,というか 10% の差の区別は僕にはわからなかった

212 :Name_Not_Found:01/09/01 15:08 ID:lYjuwksQ
>>209
>CSSの醍醐味は、ユーザー側で!importantを利用することにより
>好みの装飾に変更できるという点ですから、どの枠の形を採用す
>るかという命題には意味が無かったり。

アホ発見。

213 :Name_Not_Found:01/09/01 16:12 ID:hm/kJZTA
>210,211
 マージンだめですか。もう、NN4マンセーとしかいいようがなく。
 その頑固さに乾杯。

 <br>で妥協という線が濃厚ですな。


>211
 ああ、9月いっぱいは大丈夫そうという安心感から、本来の目
的を忘れてたよ…。っていうか、10月からの次世代携帯電話の半
定額制度でトラフィック増の予感でげんなり。

 月額8000円で1パケット0.03円。12万円分まで定額だってさー。
 単純計算いままで月1万払ってた人(データ量2MB)が、次世代定
額で10万円分使用したとすると203MB…100倍っていうかなんてい
うか。
 次世代携帯の普及次第だが、2002年はコミュニティサイト受難
の年になりそうですな。

#スレチガイ スミヤカニi-mode対策スレ タテルベシ?


>212
 アリガト

214 :Name_Not_Found:01/09/04 07:34 ID:7M2Y5Z2g
最近タグを覚えてHPを作成した俺には
ここは高等技術を見れるみたいで非常に勉強になる
まだ全然読んでないけど自分のHPにもここの技術を使わせてもらうよ

知識、技術がある方がんばって下さい
未来の2ちゃんねるのデザインが変わるかもしれないので期待してます

215 :Name_Not_Found:01/09/05 03:24 ID:JxDBktPg
>214
参考にしても幸せにはなれないと思うよ

216 :Name_Not_Found:01/09/05 16:58 ID:jTqPBobQ
>214
 「転送量削減の為」という目的がそもそもCSSの意義と異なって
るからねー。参考にはあまりしないほうがよいかと。
 ただ、テーブルレイアウトやFONTの排除は、基本的な流れとし
て使えるかも。でもFONTの置き換えが既存のBタグを流用と言う
のは…。

 2chに採用されるかは別として、1つのhtmlをみんなでいじると
いう経験は滅多にないので、面白かったし参考になったっす。
 2ch型(あめぞう型)掲示板にも応用できるしね。

 あ、そうそう、「構造はタグで、装飾はCSSで」。これ押さえ
ておけばXTMLも大丈夫。

217 :Name_Not_Found:01/09/07 23:45
ttp://www.reimy.com/bbs/bbs.php

こういう風に全部CSSでまとめちゃうとカコイイ
お姉さんもキレイヽ(´ー`)ノ

60 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)