[Blogger 最終更新日を表示]<data:post.lastupdatedISO8601/>を使ったものにしました[Blogger last updated / last modified]

2022年1月:2022年版を作りました。

---

目次

• PageSpeed Insightsに怒られた
• 区切りが"/"スラッシュで月日の表示が2桁のもの
• 区切りが"年""月""日"表示のもの
  • 記号 マーク
• 公開日と最終更新日が同じ場合に最終更新日を表示しないもの
  • メモ1
  • メモ2
  • メモ3
  • メモ4
• 設置場所
• 参考サイト

PageSpeed Insightsに怒られた

PageSpeed Insightsで測ってみると、以前設置した最終更新日のところで遅延が発生していました。

なので、遅延解消のために、以前調べた時に見つけた<data:post.lastUpdatedISO8601/>を使ったものに変更してみました。

PageSpeed Insightsでの遅延の指摘がなくなたので、とりあえずは成功かなと思っています。

今回、勉強がてら以下のものをつくってみました。

• 区切りが"/"スラッシュで月日の表示が2桁のもの
• 区切りが"年""月""日"表示のもの
• 公開日と最終更新日が同じ場合に最終更新日を表示しないもの

素人が”動けばいい”という水準でつくったものです。いろいろ過不足があると思いますのでコピペするときは留意してください。

HTMLを編集します。必ずバックアップを取ってから作業してください。

区切りが"/"スラッシュで月日の表示が2桁のもの

日付の区切りは2018/01/09のように"/"(スラッシュ)にしました。

参考サイトのコードは、月が英語表記なので数字にかえ、さらに表示順を"月""日""年"の順から、"年""月""日"の順に変更。

月の表示を英語表記から数字に変更したところ、公開日の数字と桁数が合わなかったので、これを合わせました。

1行目は参考サイトのコードでも問題なく動きましたが、少し短く書き換えました。

<span id='lastupdatedinfo' itemprop='dateModified'>
    <!-- ここに表示される -->
  </span>
<script type="text/javascript">
    var datalud = "<data:post.lastUpdatedISO8601/>"
    var udate = new Date(datalud);
    var  month = ("0"+(udate.getMonth() + 1)).slice(-2); //月の表示を2桁にする
    var  date = ("0"+udate.getDate()).slice(-2);         //日の表示を2桁にする
    document.getElementById("lastupdatedinfo").innerHTML = "最終更新日" + udate.getFullYear() + "/" + month + "/" + date;
</script>

区切りが"年""月""日"表示のもの

日付表示が"年","月","日"の場合は、参考サイトのコードの英語表記の部分、"January","February","March"...を"1","2","3"...のように数字に置き換え。

<span id='lastupdatedinfo' itemprop='dateModified'>
    <!-- ここに表示される -->
  </span>
<script type="text/javascript">
    var datalud = "<data:post.lastUpdatedISO8601/>"
    var udate = new Date(datalud);
    var months = ["1","2","3","4","5","6","7","8","9","10","11","12"];
    document.getElementById("lastupdatedinfo").innerHTML = "最終更新日" + udate.getFullYear() + "年" + months[udate.getMonth()] + "月" + udate.getDate() + "日" ;
</script>

または、こちらでも

<span id='lastupdatedinfo' itemprop='dateModified'>
    <!-- ここに表示される -->
  </span>
<script type="text/javascript">
    var datalud = "<data:post.lastUpdatedISO8601/>"
    var udate = new Date(datalud); 
    var month = udate.getMonth() +1;
    document.getElementById("lastupdatedinfo").innerHTML = "最終更新日" + udate.getFullYear() + "年" + month + "月" + udate.getDate() + "日" ;
</script>

記号 マーク

<!-- ここに追加 -->
<span id='lastupdatedinfo' itemprop='dateModified'>

ここまでのコードの直上(<span id='lastupdatedinfo' itemprop='dateModified'>の上)に下記のコードを追加するとを記号 マーク付けることができます。

Font Awesome 4

<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em'/>

Font Awesome 5 にしたので下記に変更しました

<i aria-hidden='true' class='fas fa-sync-alt fa-fw' style='margin-left:0.5em;'/>

style='margin-left:0.5em'で左に間隔をつくりました。

公開日と最終更新日が同じ場合に最終更新日を表示しないもの

<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 &amp;&amp; month == monthts &amp;&amp; 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>

メモ1

"<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em; margin-right:0.5em'/>" +

これはFont AwesomeのSVGアイコンを追加するときのものです。

Font Awesome 5にしたので下記に変更しました。

<i aria-hidden='true' class='fas fa-sync-alt fa-fw' style='margin-left:0.5em;'/>

メモ2

if(year == yearts && month == monthts && date == datets)

の部分は、可読性のためにCDATAセクションを設けてもOK

//<![CDATA[
   if(year == yearts && month == monthts && date == datets)
//]]>

メモ3

<data:post.lastupdatedISO8601/>と<data:post.timestampISO8601/>の後ろにセミコロン";"をつけても動きました

"<data:post.lastupdatedISO8601/>";
"<data:post.timestampISO8601/>";

メモ4

上記いずれのコードも<b:if cond='data:blog.pageType == "item"'></b:if>ではさめば個別記事のみで表示されます。

<b:if cond='data:blog.pageType == "item"'>
最終更新日を表示するコード
</b:if>

設置場所

デフォルトのテンプレートVaster2でいうと、1391行目の</span>の直上に設置しました。class='post-timestamp'が効くので投稿した日付と同じCSSが適用されます。

class='post-timestamp'を効かせたくないようでしたら、 1391行目の</span>の直下に設置すればclass='post-timestamp'が効かなくなります。

その際には適宜<span id='lastupdatedinfo' itemprop='dateModified'>のなかにclassを書いて 好みのCSSを適用させてください。

<!--記事ページの時-->
<div class="post-body entry-content" expr:id='"post-body-" + data:post.id' itemprop="articleBody">
  <div class="top-meta">
    <p class="kousin">
      <span class="post-timestamp"> <!-- ←これが効く -->
        <i aria-hidden="true" class="fa fa-clock-o"></i>
        <if cond="data:post.dateHeader">
          <script type="text/javascript">
  var hiduke = "<data:post.dateHeader/>"
          </script>
        </if>
        <if cond="data:top.showTimestamp">
          <if cond="data:post.url">
            <meta expr:content="data:post.canonicalUrl" itemprop="url">
            <abbr class="published" expr:title="data:post.timestampISO8601" itemprop="datePublished">
              <script type="text/javascript">
  document.write(hiduke)
              </script>
            </abbr>
          </if>
        </if>
        <!-- ここに最終更新日を表示するコードを貼り付け -->
      </span>
      <span class="post-tag">
      </span>
    </p>
  </div>
</div>

参考サイト

• <data:post.lastupdatedISO8601/>を使って最終更新日を表示する
  • Show last updated date in Blogger posts · One Transistor
• 月日の表示を2桁にする
  • JavaScriptで月日を２桁表示にするスマートな方法 - Digitra
• 公開日と最終更新日が同じ場合に最終更新日を表示しない。条件分岐のところ
  • Bloggerで記事に最終更新日を付ける方法 – 某氏の猫空