Create  Edit  Diff  FrontPage  Index  Search  Changes  RSS  Login

tDiary-users wiki - 写真付きカレンダーの作り方 Diff

  • Added parts are displayed like this.
  • Deleted parts are displayed like this.

banner + calendar

http://tnat.net/img/calendar.jpg

こんな感じの写真付きカレンダーを作る。

!作り方

!!用意するもの
*画像ファイル(幅150px程度)
*caledar2.rb
*[[banner.rb]]

!!tdiary.confの設定
banner.rbの設定
@options['banner.calendar'] = [
     './calendar/01.jpg',
     './calendar/02.jpg',
     './calendar/03.jpg',
]

!!tDiaryでの設定(カレンダーを設置したい所に書き込む)
<table class=img_calendar>
  <tr>
   <td>
     <%=banner 'calendar',88,31, ''%>
   </td>
  </tr>
  <tr>
   <td>
     <div align=center>
      <%=calendar2%>
     </div>
   </td>
  </tr>
</table>

!!テーマ(CSS)の設定
/* ----- calendar image----- */
table.img_calendar {
     margin-bottom:1em;
     border:1px #ccc solid;
     background-color:#fff;
}

/* ----- calendar2 ----- */

table.calendar td{
         padding:0 2px 0 2px;
         line-height: 1em;
}

td.calendar-current-month {
         text-align: center;
         line-height: 1.2em;
}

td.calendar-next-month{
         color: #666;
}

td.calendar-sunday {
         color: red;
         background-color: #fbb;
}

td.calendar-saturday {
         color: blue;
         background-color: #bbf;
}

td.calendar-weekday {
         background-color: #ddd;
}

td.calendar-day {
         text-align: right;
         color: #666;
}

-[[こさか]]