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対策か、直下セレクタがエスケープされちゃうよー(--;

掲示板等のデザインを修正しました。

| 14:49


掲示板の「前の1件」「次の1件」などと表示される部分の背景色を設定

スタイルシート
div.bbspager
{
 background-color:#FF9;
 height:1em;
}

説明

掲示板の「前の1件」「次の1件」などと表示される、ページャーの部分に背景色が設定されていないため、リンクの文字が読みにくい問題を修正しました。

ただし、「前の1件」などがない状態だ白いところがポツーンとある状態になってしまうので、リンク色を直すように変更するなどのデザインの調整が求められます。


掲示板の「ツリー|全部|最新の50件」となっている部分に背景設定

スタイルシート
#paget-top
{
 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);
}

説明

掲示板の上部にある「ツリー|全部|最新の50件」というところが背景が設定されていないため読みにくい問題を修正。

上の向きの画像を背景に設定している。

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

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

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

2011-09-18

トップの「最新キーワード」テキストの表示を修正

| 22:34

トップの「最新のキーワード」にdayクラスが指定されていないため、ボックスの中に入らない表示を修正しました。

今回の修正は以下です。

トップの「最新のキーワード」に関する修正

スタイルシート
div.recentitem_diary {
  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;
 padding-left:1em;
}
説明
背景に上下と同じボックスを表示し、位置を少しずらします。 なお、背景の指定はテーマ内に含まれているスタイルをコピーしてパスを修正したものです。 それだけだと薄い枠線とかぶる問題が発生するのでpaddingを左に1em追加しています。

フッターに関する不具合

スタイルシート
#footer {
 clear:both;
}
#footer a {
 color:white;
}
説明
フッターになぜかclearが設定されていないため、不自然な位置に表示されます。 また、リンクの色が背景色とかぶるため、とりあえず白に変えておきました。

SukaiSukai2011/09/18 23:04私もグループ初心者ですがharimauさんよろしくおねがいします。

takuyarei0takuyarei02011/09/18 23:04僕以外にも、色々な人がデザインを手がけてくれているので本当に助かります!
ありがとうございます。

harimau_tigrisharimau_tigris2011/09/19 14:33結構テーマ事態に問題のある部分が多いみたいなので、それの修正をいろいろ考えていこうと思います。