Blogger 記事下に最終更新日を表示

2018/08/29
またBloggerカスタマイズのメモ。
記事を個別で表示したときに「最終更新日」を表示する。テーマのHTMLを編集するので必ずバックアップを取るべし!(..ってジブンに言ってるんだけどね)

更新日は、記事の上部に「公開日」と「最終更新日」とを並べる(左右や上下)のが一般的であるらしい。が、私はトップページにて各記事の「公開日」を上部に表示しているので、記事を個別に開いたときに「記事下」の「共有ボタンの上」に更新日が表示されるようにしたい。
【追記】後日、記事上部に上下に並ぶよう変更しました。↑



1. 記事下の「共有ボタン」の位置をみつける
(1)テーマの中から個別記事を示すこの記述をみつける↓

<div class='post-body entry-content'>


(2)その下方に「共有ボタン」を示す文字列がある。コードを貼るのはここの真上。

<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both;'/>
<div class='post-share-buttons'>

2. テーマにコードを貼り付ける
最終更新日を表示させるためのコード(青字)を個別ページだけで表示するための条件分岐タグ(赤字)で挟み↓、表示させたい位置に貼り付ける。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span id='lastupdatedinfo' itemprop='dateModified'>
<!-- ここに表示される -->
</span>
<script type="text/javascript">
/* 最終更新日を取得 */
var datapostlud = "<data:post.lastUpdatedISO8601/>"
var udate = new Date(datapostlud);
var year = udate.getFullYear();
var month = ("0"+(udate.getMonth() + 1)).slice(-2); //月の表示を2桁にする
var date = ("0"+udate.getDate()).slice(-2); //日の表示を2桁にする

/* 公開日を取得 */
var datapostts ="<data:post.timestampISO8601/>"
var datets = new Date(datapostts);
var yearts = datets.getFullYear();
var monthts = datets.getMonth() +1;
var datets = datets.getDate();

/* 最終更新日と公開日をくらべる */
if(year == yearts && month == monthts && date == datets)
{}
else{
document.getElementById("lastupdatedinfo").innerHTML = "<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em; margin-right:0.5em'/>" + "最終更新日" + year + "/" + month + "/" + date;
}
</script>

</b:if>

*「公開日)と「更新日」が同日の場合は表示されない。
緑色の文字部分は更新のリフレッシュマークを表示するためのもの。
 よくわからないし、私のテーマでは反映されないので省いた。(;;)


 *お世話になったサイトはこちら↓
 「[Blogger 最終更新日を表示] | すたすた式


cats / Yukari*

いつものように丸写ししました。おかげで助かりました。どうもありがとう。(最初はこの下↓に表示されるようにしてあった)
ランキング用のバナーをこさえたり、いらんことばかりしてるけど、そろそろブログの体裁をいじるのはやめよう。いろいろ片付けることがたくさんあるのに、あそんでちゃダメだ。。