カレンダーのデザイン(2)

カレンダーのデザイン(1) の続きです。 カレンダーの日付エリアの背景は画像にすることもできます。 というわけで、今日は、テンプレート「突撃!合戦スタジアム」のカレンダーを改造してみます。 ↑こんなデザインです ↑背景画像 この画像、何なんでしょう? 血のり?(-_-;) き…気分を取り直して、CSSのカレンダーに関わるの次の部分いきましょう。 #calendar { font-size:12px; width:190px; margin:0px; padding-bottom:10px; } #calendar table { background-image:url(http://blog.seesaa.jp/img/bg/battle_stadium/cal_bg.jpg); background-repeat:no-repeat; background-position:0px 0; width:100%; padding:0px 0; margin:0 auto; } #calendar th { padding:3px; font-weight:normal; text-align:center; } .calendarday a { font-weight:normal; color:#F27045; } .calendarhead{ background-image:url(http://blo…

続きを読む

カレンダーのデザイン(1)

カレンダーのデザインはCSSで指定されています。 今日は、そのCSSを読み解いてみます。 私もCSSをきちんと理解してない初心者ですが、頑張って頭を使ってみました。(`・ω・´)っ ページデザインごとに違うので、一例としてテンプレート「light pole」のCSSを見てみます。 これが「light pole」のカレンダーのデザイン。 シンプルで見やすいから、私のお気に入り♪ 私の好みはおいといて(笑)。 カレンダーに関する部分は8項目ありますね。 似たような名前で混乱しそうですが、1つずつ落ち着いて見てみましょう。 (と自分に言い聞かせてます^^;) では、まず、CSSの中のカレンダーに関する部分は次のところ。 #calendar { margin-top:0px; margin-bottom:30px; font-size:12px; padding:5px; border:1px solid #C6C6C6; width:228px; } #calendar table { width:100%; background-color:#F2F2F2; } #calendar th { background-color:#E1E1E1; border-right:2px solid #F2F2F2; font-weight:bold; } .calendarhead { padding:4px 0p…

続きを読む

今日の発見:カレンダーの更新

さっきこのブログを開いてみたら、カレンダーが7月までしかない。 8月が表示されないのだ。 相変わらず表示がおかしいまま放置してある「今日がわかるカレンダー」は、7月の表示のまま本日の日付である4に印が付いている。 ものすごーく違和感がある。 8月に入ってから記事がないせいでこんなことに? だったら、書こうじゃありませんか。 カレンダーをまともに表示するためにも、月が改まったら、なるべく早く更新したほうがいいってことなんでしょうね。 はいはい、わかりましたっと。 ↓参考になったら、クリックで応援してね!↓

続きを読む

うまくいかない(>_<)

横一列のカレンダーを入れてみた。 ご覧の通り表示がマズイです。   まず、subtitleみたいになってる。 div指定されていないのになぁ。見つけられていないだけ? うーむ。   ここを解決できないと、次に進むモチベーションがわかない~。(>_<)

続きを読む

もっと見る