MovableTypeに日めくりカレンダー風

MovableTypeに日めくりカレンダー風の飾りをつけようというもの。NucleusのなにかのテーマにあったものをMovableTypeにつけてみました。 screenshot_m093.png asset-headerの上の行に
<$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;
}
}
を追記。

リンクソース

  • 記事用リンクソース:
  • Wiki用リンクソース(PukiWiki):
  • Wiki用リンクソース(MediaWiki):
  • SNS投稿用: