エントリーの投稿日を明確に表示する・簡易案内板

案内板「エントリーの投稿日が判り辛い」
「ページをめくるように移動するのが良いかなぁ」
という話を某方から聞いていたので、何か良い方法はないものかと考えてみました。
で、出来たのは左の画像です。

このサイトの場合の機能

エントリーアーカイブ・・・エントリー前後移動，所属カテゴリー，投稿時間表示
カテゴリーアーカイブ・・・カテゴリー内前後移動，最新投稿日表示
日付アーカイブ・・・前後日付移動，投稿日時表示
月別アーカイブ・・・前後月移動，最新投稿日表示
年別アーカイブ・・・前後年移動，最新投稿日時表示

テンプレート記述例

●エントリーアーカイブ

<div class="date-stamp">
<span class="ds-month"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/%m/"$>"><$MTArchiveDate language="en" format="%B"$></a></span>
<span class="ds-day"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTEntryDate format="%d"$></a></span>
<span class="ds-year"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate format="%Y"$></a></span>
</div>

<p class="first"><$MTEntryDate format="%X"$>に投稿されたエントリーです。</p>
<MTEntryCategories>
<p>所属カテゴリーは「<a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a>」です。</p>
</MTEntryCategories>

<MTEntryPrevious>
<p>Prev：「<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>」</p>
</MTEntryPrevious>

<MTEntryNext>
<p>Next：「<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>」</p>
</MTEntryNext>

●カテゴリーアーカイブ

<div class="date-stamp">
<MTEntries lastn="1">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly" lastn="1">

<span class="ds-month"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/%m/"$>"><$MTArchiveDate language="en" format="%B"$></a></span>
<span class="ds-day"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTEntryDate format="%d"$></a></span>
<span class="ds-year"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate format="%Y"$></a></span>

</MTArchiveList>
</MTIfArchiveTypeEnabled>
</MTEntries>
</div>

<p><$MTCategoryLabel$> カテゴリーページです。</p>
<MTCategoryPrevious>
<p>Prev：<a href="<$MTCategoryArchiveLink$>"><MTCategory></a></p>
</MTCategoryPrevious>

<MTCategoryNext>
<p>Next：<a href="<$MTCategoryArchiveLink$>"><MTCategory></a></p>
</MTCategoryNext>

●日付アーカイブ

<div class="date-stamp">
<span class="ds-month"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/%m/"$>"><$MTArchiveDate language="en" format="%B"$></a></span>
<span class="ds-day"><a href="<$MTArchiveLink archive_type="Daily"$>"><$MTArchiveDate format="%d"$></a></span>
<span class="ds-year"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate format="%Y"$></a></span>
</div>

<p><$MTArchiveDate format="%m月%d日"$>に投稿されたページです。</p>
<MTArchivePrevious>
<p>Prev：<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></p>
</MTArchivePrevious>

<MTArchiveNext>
<p>Next：<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></p>
</MTArchiveNext>

●月別アーカイブ

<div class="date-stamp">
<MTEntries lastn="1">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly" lastn="1">

<span class="ds-month"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/%m/"$>"><$MTArchiveDate language="en" format="%B"$></a></span>
<span class="ds-day"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTEntryDate format="%d"$></a></span>
<span class="ds-year"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate format="%Y"$></a></span>
</MTArchiveList>
</MTIfArchiveTypeEnabled>
</MTEntries>
</div>

<p><$MTArchiveTitle$> アーカイブページです。</p>
<MTArchivePrevious>
<p>Prev：<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></p>
</MTArchivePrevious>

<MTArchiveNext>
<p>Next：<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></p>
</MTArchiveNext>

●年別アーカイブ

<div class="date-stamp">
<MTEntries lastn="1">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly" lastn="1">

<span class="ds-month"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/%m/"$>"><$MTArchiveDate language="en" format="%B"$></a></span>
<span class="ds-day"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTEntryDate format="%d"$></a></span>
<span class="ds-year"><a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate format="%Y"$></a></span>

</MTArchiveList>
</MTIfArchiveTypeEnabled>
</MTEntries>
</div>

<p><$MTArchiveDate format="%Y"$>年 アーカイブページです。</p>
<MTArchiveYearPrevious>
<p>Prev Year：<a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate format="%Y"$>年</a></p>
</MTArchiveYearPrevious>

<MTArchiveYearNext>
<p>Next Year：<a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y/"$>"><$MTArchiveDate format="%Y"$>年</a></p>
</MTArchiveYearNext>

CSSに追記

.date-stamp span.ds-month, .date-stamp span.ds-day, .date-stamp span.ds-year {
	padding: 3px;
	display: block;
	width: 80px;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
}

.date-stamp span.ds-month {
	background: #FFCCCC;
	font-weight: bold;
	font-size: 115%;
}

.date-stamp span.ds-day {
	font-weight: bold;
	background: #FFFFFF;
	border-top: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
	font-size: 150%;
}

.date-stamp span.ds-year {
	background: #FFF4F4;
	font-size: 95%;
}

.date-stamp a {
	color: #AA0000;
	font-weight: bold;
}

.date-stamp a:visited {
	color: #FF5959;
	font-weight: bold;
}

以上

これで、このサイトの画面右上はページ紹介であり、ナビゲーションにもなりました。

エントリーの投稿日を明確に表示する・簡易案内板

このサイトの場合の機能

テンプレート記述例

CSSに追記

カテゴリ

トラックバック(0)

About This Site

Materializing [マテリアライジング]

エントリーの投稿日を明確に表示する・簡易案内板

このサイトの場合の機能

テンプレート記述例

CSSに追記

カテゴリ

Materializing [マテリアライジング]

トラックバック(0)

About This Site