浦和レッズユーススレ part2にて「背景の赤が強すぎて目が痛くなるｙｐ・・・。」といわれました。
実はこれは前から思っていたことで、チームカラーにちなんで赤を基準にするのはいいですが、赤は強い色なので見つめつづけるのはちとつらいものがあるかと思っていました。
いい機会なのでスタイルシートの設定を調整してみます。
- 「background:#FF0000;」となっているのを削除する ( body / content / container / blog / menu / calendar / side / sidetitle / count / syndicate / powered ) ：最初に作ったときに白（#fff）になっていたものを赤（#ff0000）に単純に置きかえたときの名残です。bodyに設定したbackground-imageで現在の赤い画像ファイルを指定していますので、実質的に必要なくなっています。
- エントリー部分の背景を白にする background-color : #ff0000→#fff （.blogbody、#table TD）：我らが浦和レッズのチームカラーは赤・白・黒ですから、白でいいでしょう。元々デフォルトの文字の色使いは背景白を前提としている（と思われる）ので、相性はいいでしょうから。 ちなみに#tableはテーブルタグに使うために独自に設定したIDです。この場合は、TD（データセル）を背景と同じ色にするために設定しています。
- エントリー部分の周りを線で囲う 以下を追加 border-top-width : thin; border-left-width : thin; border-right-width : thin; border-bottom-width : thin; border-top-style : solid; border-left-style : solid; border-right-style : solid; border-bottom-style : solid; （.blogbody）：点線とかくぼみとか色々あるのですが、シンプルに実線（solid）にしてみました。あと、線の太さは細め（thin）に。
- 線と本文の間にスペースを空ける 以下を追加 padding-top : 8px; padding-left : 8px; padding-right : 8px; padding-bottom : 8px; （.blogbody）：まぁ様子を見ながらとりあえず8ピクセルぐらい。
- エントリー部分の幅を拡張 width : 512px→570px （.blogbody）エントリー部の中で余白を広げるのですから、文章の幅自体は狭くなります。が、これはメンバー表（目下のところこのサイトの一番の人気ページです）などでは致命的になりかねません。また、従来から幅の少なさには悩まされていたところですから、ちょっと多めに広げてみました。570-512-(8x2)で都合42ピクセルの拡張ですね。
- エントリー部のリンクの色変更 以下を追加 .blogbody a { color: #000; text-decoration : underline;} .blogbody a:link { color: #000; text-decoration : underline;} .blogbody a:visited { color: #000; text-decoration : underline;} .blogbody a:active { color: #ff0000; text-decoration : underline;} .blogbody a:hover { color: #ff0000; text-decoration : underline;} ：このサイトでは、背景を赤にしているため、リンクにマウスを重ねたときの色を白（#fff）にしています。ところが今回は背景が白なので見えなくなってしまいます。そこでその場合に赤（#ff0000）になるようにしました。
- Date-Based ArchiveとCategory Archiveの変更 これらのテンプレートでも.blogbodyを使っています。 これを、.archivelistという新しいクラスに置き換え、ちょっとフォーマットをシンプルにしてみました。
その他
- エントリーの行間を狭くする line-height:200%→180% （.blogbody）デフォルトでは少し冗長な感じがしてきたので、気持ち狭く。
- メニュー部分の文字を小さくする CategoriesやArchivesなど英字になっているものはいいのですが、Recent EntryやRecent Commentsで日本語表記になっているものが文字が大きくて折り返されるようになっています。そこで、この2つの表記用に.side-s(small)というクラスを新設、font-size : x-small→xx-smallにします（他は一緒）。
- 曜日の表記を英語から漢字に 元々日本語化すると漢字なのですが、英字の略称（日→Sunだとか）に変えたんですよ。それを元に戻してみました。
- Movable Typeの表記を小さく＆バナーを追加 font-size:x-small→xx-small （.powered）：この字も折り返してるので小さくしてみます（フォントを変更した方がスマートかもしれませんが）。しかしそうすると小さくなりすぎなので、バナーを追加します。
まぁしばらくはこれで様子を見てみましょう。
しかしま、こういうのやればやるほど自分にセンスないのわかるな・・・。
