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

公開

Bloggerカスタム Vaster2



recycle_24 2020年8月14日:新しいものを作りました。

Bloggerに最終更新日を表示させる2020[for Widget version 1]-すたすた式

Bloggerに更新日(最終更新日)を表示させるためのコードを書きました。Widget Version 1 (ウィジェット バージョン1)用です。公開日と更新日が同じときは表示(出力)しません。time要素、datetime属性を使っています。


PageSpeed Insightsに怒られた

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

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

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

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

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

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

追記 1:JavaScriptを圧縮したところ、今回書いた物だとうまく動きませんでした。

コードの圧縮を利用するかたは、某氏の猫空さんが Bloggerで記事に最終更新日を付ける方法【2018年更新】を公開されていますので、そちらを利用された方がよろしいかと思います。

追記 2:テンプレートについて

使っているテンプレートが「レイアウトバージョン3、ウィジェットバージョン2」の場合、今回使っているデータタグが対応していないため動かないっぽいです。。。

data:posts[i].lastUpdatedISO8601 [widget Blog]

「レイアウトバージョン3、ウィジェットバージョン2」のテンプレートの場合は、下記の方法でいけるようです。

レイアウトバージョン、ウィジェットバージョンの確認のしかたもあり、わかりやすかったです。

Bloggerで記事の公開日/最終更新日を表示してみた | Spoon & Fork

テンプレート Vaster2 の widget version は "1" でした……

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'/>
<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アイコンを追加するときのものです。

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

メモ2

if(year == yearts &amp;&amp; month == monthts &amp;&amp; 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>

参考サイト



すたすた式

Enjoy!👍

QooQ