1. HOME
  2. フロントエンド
  3. 【a-blog cms】アーカイブをカレンダーモジュールに変えてみました

【a-blog cms】アーカイブをカレンダーモジュールに変えてみました

フロントエンド

以前までは更新履歴にアーカイブリストを使用していましたが、ブログを始めて9ヶ月ほど経ちただただリストが長くなっていくので、月ごとで更新が変わるように【カレンダーモジュール】に変えてみました。
【過去の更新を探す】のリンク先は年間カレンダーになっていて、1年間の更新履歴がみれるようになっています。



特に難しいところもなく、手軽にできるので簡単に設置できますが、便利なのでご紹介します。


月間カレンダーの表示

【管理画面 → モジュール → カレンダー】のスニペットをコピーし、設置したいテンプレート内にペーストします

年間カレンダーの表示

【管理画面 → モジュール → 年間カレンダー】のスニペットをコピーし、設置したいテンプレート内にペーストします



どちらも基本的にはこれで設置は完了します。
ペーストするだけで、記事のある日付にはリンクがつきます。しかし、色などがついてないためCSSをいじるとわかりやすくなるかと思います。
今回カスタマイズした、テンプレートとCSSはこちらです。

月間カレンダー

<!-- BEGIN_MODULE Calendar_Month -->
<section class="Calendar">
	<!--#include file="/admin/module/setting.html"-->
	<p class="month"><a href="/calender/calendar.html">{month}</a></p>
	<table summary="calender" class="entryCalendar">
		<tr>
			<th class="sun">日</th>
			<th>月</th>
			<th>火</th>
			<th>水</th>
			<th>木</th>
			<th>金</th>
			<th class="sat">土</th>
		</tr>
		<!-- BEGIN week:loop -->
		<tr>
			<!-- BEGIN day:loop -->
			<!-- BEGIN spacer -->
			<td> </td>
			<!-- END spacer -->
			<!-- BEGIN none -->
			<td>{day}</td>
			<!-- END none -->
			<!-- BEGIN link -->
			<td><a href="{url}">{day}</a></td>
			<!-- END link -->
			<!-- END day:loop -->
		</tr>
		<!-- END week:loop -->
	</table>
	<p class="link"><a href="/calender/calendar.html"><i class="fa fa-chevron-right" aria-hidden="true"></i>過去の更新を探す</a></p>
</section>
<!-- END_MODULE Calendar_Month -->

年間カレンダー

<!-- BEGIN_MODULE Calendar_Year -->
		<p class="year"><!-- BEGIN prevUrl:veil -->
		<!-- BEGIN prevLink -->
			<a href="{url}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
			<!-- END prevLink -->
			<!-- END prevUrl:veil -->
			
			<span class="calendarYear">{year}年</span>
			<!-- BEGIN nextUrl:veil -->
			<!-- BEGIN nextLink -->
			<a href="{url}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
			<!-- END nextLink -->
			<!-- END nextUrl:veil -->
		</p>

		<!-- BEGIN unit:loop -->
		<div class="acms-grid-r js-autoheight">
		<!-- BEGIN month:loop -->
			<div class="col-md-4 col-sm-4 column3">
				<p class="month"><a href="{m_url}">{month}</a></p>
				<table class="CalendarYear">
					<tr>
						<tr>
							<th class="sun">日</th>
							<th>月</th>
							<th>火</th>
							<th>水</th>
							<th>木</th>
							<th>金</th>
							<th class="sat">土</th>
						</tr>
					</tr>
					<!-- BEGIN week:loop -->
					<tr class="dayCenter">
						<!-- BEGIN day:loop -->
						<!-- BEGIN spacer -->
						<td>?</td>
						<!-- END spacer -->
						<!-- BEGIN none -->
						<td>{day}</td>
						<!-- END none -->
						<!-- BEGIN link -->
						<td><a href="{url}">{day}</a></td>
						<!-- END link -->
						<!-- END day:loop -->
					</tr>
					<!-- END week:loop -->
				</table>
			</div>
			<!-- END month:loop -->
		</div>
		<!-- END unit:loop -->
	<!-- END_MODULE Calendar_Year -->

CSS

.Calendar table{
    background-color: rgba(255,255,255,0.6);
    border-radius: 20px;
}
.Calendar table th,
.Calendar table td{
    text-align: center;
    font-size: 1.1em;
    padding: 3%;
}
.Calendar table .sun{
    color: red;
}
.Calendar table .sat{
    color: blue;
}
.Calendar table a{
    padding: 6px;
    border-radius: 50%;
    background-color: rgb(118,171,191);
    color: #FFFFFF;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    display: block;
    width: 35px;
    height: 32px;
}
.Calendar table a:hover{
    background-color: rgb(66,120,141);
    color: #FFFFFF;
}
.Calendar .month,
.Calendar .year{
    margin-bottom: 5%;
    font-size: 1.2em;
    text-align: center;
}
.Calendar .link{
    padding-top: 10%;
    font-size: 0.9em;
    text-align: right;
}
.Calendar .link i{
    padding-right: 3%;
}
.Calendar .year i{
    padding: 0 3%;
}
.CalendarYear{
    width: 80%;
    margin: 0 auto;
}
.Calendar .column3{
    margin-bottom: 3%;
}
.entryCalendar{
    width: 100%;
}

※a-blog cms 組み込みJS [autoheight]使用
※font-awesome 使用

曜日は今回静的に書いていますが、【weekLabel:loop】ないで動的に出力できます。曜日の表示や始まりもループで表示する場合は、モジュールの設定画面から変更することが可能です。


カレンダー