エントリーの投稿日を明確に表示する・簡易案内板｜Materializing [マテリアライジング]

このサイトの場合の機能

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

テンプレート記述例

●エントリーアーカイブ <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; }

以上

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