Hatena::Groupugochara

Harimauの編集記録等

2011-09-19

リンクとカレンダーのデザインを修正

| 19:01


カレンダーの空項目が消える問題

スタイルシート
/* (4) */
table.group-calendar tbody tr td {
  background:url('http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_boxbody.png') repeat-y;
 _background:url('http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_boxbody.gif') repeat-y;
}

/* (5) */
table.group-calendar tbody tr td div.day , table.group-calendar tbody tr.pager td {
  background-image:none;
}
説明
カレンダーで項目がないところで背景がむき出しになる問題を解決します。 tdに背景を設定して、すべてのセルに背景が表示されるようにしています。 項目があるセルで背景がだぶって透過具合が変わってしまうため、td div.dayの背景を消去しています。 また、(4)でページャー部分には背景が不要なため、消去しています。

リンクが読みにくい問題

スタイルシート
/* (6) */
table.group-calendar tbody tr.pager td a , #breadcrumbs a , .bbsmode a , div.bbspager a , #footer a
{
  color:#FCA;
}

説明

複数個所で背景とリンクの色が被ってよみにくい問題を仮修正。色は決定があるまでとりあえず#FCAにしてある。

  • 上部のパンくずリスト
  • 掲示板の「リスト表示 | ツリー表示」
  • カレンダーの「<<前の月 | 今月 | 次の月>>」
  • 掲示板の「<前の1件 次の1件>」(過去の編集は上書き)
  • 下の「このグループについて」のリンク色(過去の編集は上書き)

カレンダーの日ページのページャー

スタイルシート
/* (6) */
#paget-top , #hatena-group-keyword div.hatena-body div.calendar{
 background:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_box_header.png);
 _background:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_box_header.png);
}

説明
takuyarei0さんのアドバイスをうけまして、カレンダーの日付のページの「<前の日 | 今日 | 次の日>」の部分が読みにくい問題を解決。 うまく適用できてなかったので修正。XSS対策か、直下セレクタがエスケープされちゃうよー(--;

takuyarei0takuyarei02011/09/19 15:13...となると、カレンダーの前の日 /次の日にも同じ修正をするとカレンダーも見やすくなるのかな?

SukaiSukai2011/09/20 23:55カレンダーなど、見づらくて気になっていたんです。
さすがですね!スゴイです!

harimau_tigrisharimau_tigris2011/09/21 16:29他にも気になった点があればグループの掲示板までお願いしますね!!