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



Page Speed Insightsに怒られた

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

なので、遅延解消のために、以前調べた時に見つけた  <data:post.lastUpdatedISO8601/> を使ったものに変更してみました。Page Speed Insightsでの遅延の指摘がなくなたので、とりあえずは成功かなと思っています。

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

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

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

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

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

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

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

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

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

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

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

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

Bloggerのタグを使って記事の公開日と最終更新日を併記できるようにしてみました。JavaScriptは使いません。

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

-参考サイト-

<data:post.lastupdatedISO8601/>を使って最終更新日を表示する
Show last updated date in Blogger posts · One Transistor

月日の表示を2桁にする
JavaScriptで月日を2桁表示にするスマートな方法 - Digitra

公開日と最終更新日が同じ場合に最終更新日を表示しない。条件分岐のところ
Bloggerで記事に最終更新日を付ける方法 – 某氏の猫空

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>

シンクマーク

ここまでのコードの直上に下記のコードを追加するとをマーク付けることができました。

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

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;'/>

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


<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のリフレッシュマークを追加するときのものです

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

<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[
   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='&quot;post-body-&quot; + 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'/>
  <b:if cond='data:post.dateHeader'>
     <script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
   </b:if>
 
     <b:if cond='data:top.showTimestamp'>
       
        <b: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>
        </b:if>
    </b:if>
    ここに最終更新日を表示するコードを貼り付け
  </span>
<span class='post-tag'>

4 件のコメント :

  1. ここに設置しました
    とありますが、入れた後の画像をアップしてくれると助かります。
    素人なので、結局何を設置したのかが、よくわかりません

    返信削除
    返信
    1. コメント管理を怠っていたため、確認が遅れました。申し訳ありません。
      すでに解決なさっているかもしれませんが、入れた後の画像をアップロードします。

      なお画像は、「公開日と最終更新日が同じ場合に最終更新日を表示しないもの」かつ
      「Font Awesome 5」のときのものです。

      また、「ここに設置しました」の文言を「ここに最終更新日を表示するコードを貼り付け」
      に変更しました。

      削除
  2. 公開日と最終更新日が同じ場合に最終更新日を表示しないもの
    のコードを使用し、リフレッシュマークを貼り付けると、公開日と最終更新日が同じでもリフレッシュマークだけは表示されてしまうのですが、公開日と最終更新日が違う場合のみ表示されるようにする方法を教えてください。

    返信削除
    返信
    1. コメント管理を怠っていたため、確認が遅れました。申し訳ありません。
      すでに解決なさっているかもしれませんが、分かる範囲でお返事いたします。

      「公開日と最終更新日が同じ場合に最終更新日を表示しないもの」
      のコードのなかにすでに、リフレッシュマークを表示する部分が入っているので、
      新たにリフレッシュマークを貼り付ける必要はないと思われます。

      ちなみに、
      "<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em; margin-right:0.5em'/>"
      の部分がリフレッシュマークを表示する部分です。

      style='margin-left:0.5em; margin-right:0.5em の数字でリフレッシュマークの左右の間隔を調整しています。

      削除