「CSS」のコメント一覧へ

コメント詳細

おぉー。掲示板のフォントが変更されている。すごいですね出来ないと思ってました。
でも11pxは小さいので14pxにしてます

0
Posted by  tanaka203 tanaka203 2018年09月15日(土) 20:31:19 返信数(6)

時間が掛かってしまいましたが変更出来たようで何よりです。

一度、CSSの整理をしては如何でしょうか、不慮の削除の時などに発見がしやすいでしょう。
CSS内のスクロールも早くなるのでいい事尽くめかと思われます。
CSS下部でURLが改行されてたりする場所も気になりますし...

もし誰でも編集可能ページを作ってくださればそこに整理後のCSSを貼り付けましょう。

0
Posted by 名無し 2018年09月15日(土) 20:43:48

トラックバックフォームと関連タグの話ですね。
URLが改行されているのは、私自身詳しくないので、ここにURLを設定すればいいというのがわかりやすいように改行していました
見出し、リスト、トグルなども前は画像を指定してなかったんですが、今は使ってます
暇つぶしに関連タグのURL復帰させてみようかな

background:transparent url

(http://static.seesaawiki.jp/img/usr_second/common/icon_comme


>もし誰でも編集可能ページを作ってくださればそこに整理後のCSSを貼り付けましょう。

ありがたいですが大変ですよ。見返りも感謝しかできません。
模試やってくださるなら、バックアップは項目の自由編集が可能なので、そちらをご利用ください

0
Posted by  tanaka203 tanaka203 2018年09月15日(土) 20:59:32

ttp://seesaawiki.jp/overload2/d/css_user_test

こちらにCSSを貼り付けました。特にCSSを纏めれた訳ではありません。
{}だけで使われてない無駄なCSSを消して1072行 → 734行程度になりました。あんま変わらないですね...

■角っぽさを和らげる
main sub extraのコラムの角に4px程丸みを設けました。0よりマシだと思い入れましたが、気に入らなければ削除してください。


■変な余白の削除
mainとsubとの間に変な段差が出来てたので消しました。


■サブメニュー間の余白の追加
やや見やすく感じるのではないでしょうか?こちらも気に入らなければ削除です。


■フォントの字間の調整
bodyにletter-spacing: 0.05emを追加し可読性を上げました。
長文の多いオーバーロードではあった方が良いと主張します。line-heightも1.35から少し上げても良いのではないでしょうか?最大1.8の1.6などが推奨だったりします。
letter-spacingに関してはレイアウトが崩れる可能性も無きにしもあらずなのでご注意を。
(テーブルの幅固定してたりだとか、サイドコラムで改行が発生したりだとか。この場合はサイドコラムに個別で設定必要。)



角丸等は反映しない場合の為、上記の余白の段差と無駄なCSSを削除したバージョンも用意してあります。

0
Posted by 名無し 2018年09月15日(土) 21:51:09

お疲れ様です!

現在、「その1 色々変更したバージョン」をバックアップで使用中です。

まず、検索バー、検索ボタン、検索条件が改行されているので、検索バーを140から130に変更します。
サブメニューに膨大なメニューが有るオバロで改行が多くなるとマウススクロールが大変になるので。

div.sidecolumn div.form-box form input.form-text
width:140px; →130


■letter-spacing: 0.05em
これすごくいいですね。
長文か著しい私の文章にはありがたい機能です。ぜひ採用したいと思います。
ただおっしゃっている通り、ギリギリの幅指定をシているテーブル内で改行が発生すると思いますので、特にキャラデータのテーブルは注意します。

■main sub extraのコラムの角に4px程丸みを設けました。
問題ないと思います。

■line-heightも1.35から少し上げても
検討します

■最近更新したページ
せっかくなので伺いたいのですが、サブメニューの下にある余白をもう少しだけ詰めることはできますでしょうか?
実は余白をあけたいと思っていた箇所なので、メインとサブメニューの間にあるくらいの幅にしてほしいです。

0
Posted by  tanaka203 tanaka203 2018年09月15日(土) 22:43:52

■サイドコラムの余白
div#wiki-content div#extra {
margin-top: 8px;
}

ここの部分をイジれば幅を変更可能です。修正前は20pxでした。
ただ、今の色設定だと若干別れてる感じがしませんね。サイドだけ薄くするといいかもしれません。
div.sidecolumn div.column-inner {
#181818 ~ 202020くらいが良いかも?
}

思ったんですがサイドコラムのコメントの表示件数を少し減らしても良いのでは?と感じました。


■seesaawikiのヘッダーについて
色々と色を変更していくとここの#000が気になりだします。
こちらもグレー配色にして見やすくしちゃいましょう。
div#common-header {
color: #333;
}


一応、上記の修正はcss_user_testページの項目2にて修正してあるので、こちらからコピペおkです。

0
Posted by 名無し 2018年09月15日(土) 23:18:56

どなたでも編集できます