
<$mt:Include module="カレンダー"$>と入れます。右側に[新規作成]と出るので、そこをクリック。
テンプレート名を「カレンダー」とし、
<div class="cal"> <$mt:EntryDate format="%Y"$>年 <$mt:EntryDate format="%b"$>月 <$mt:EntryDate format="%e"$> <$mt:EntryDate format="%A"$> </div>
と書きます。
次にスタイルシートに
.cal { display: block; float: right; width: 60px; margin: -20px 5px 0px 10px; background-color: #fff; border-top: 1px solid #CCCCCC; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid #CCCCCC; } .cal span { display: block; text-align: center; text-transform: lowercase; } .cal span.year { margin: 0; color: #aaa; font: bold 9px/1em Georgia, 'Times New Roman', Times, serif; border-top: 5px solid #A9CC8E; padding-top: 4px; padding-bottom: 2px; } .cal span.month { margin: 0; color: #aaa; font: bold 11px/1em Georgia, 'Times New Roman', Times, serif; } .cal span.day { margin: 0 5px; padding: 0px 0 3px; border-top: 1px none #CCCCCC; border-bottom: 1px solid #CCCCCC; color: #aaa; font: bold 30px/30px 'Times New Roman', Times, serif; } .cal span.week { margin: 0; color: #aaa; font: bold 9px/1em Georgia, 'Times New Roman', Times, serif; padding-top: 2px; padding-bottom: 4px; }
モバイルでは不要だと思うので、
@media (max-width: 930px) { .cal { display: none; } }を追記。
コメント