Bloggerカスタム

【Blogger】最終更新日を表示する


いつくかの記事に追記する機会も増えてきたので、見た時に記事が更新されているのが一目で分かるようにしたくなったのです。

日付の横に「最終更新日」を表示する方法


「テーマ」→「HTMLの編集」より、以下のコードを付け足します。

最終更新日を表示するコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<span class='updated post-timestamp' id="last-modified" itemprop='dateModified' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601'>
   <data:post.lastupdatedISO8601/><!-- 右側に表示される -->
</span>
<script>
// 投稿日
var published=new Date("<data:post.timestampISO8601/>");
// 最終更新日 
var updated =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script>
// <![CDATA[
// 投稿日
var pp_Y = ""+published.getFullYear();
var pp_M = ("0"+(published.getMonth()+1)).slice(-2);
var pp_D = ("0"+published.getDate()).slice(-2);
// 最終更新日
var dd_Y = ""+updated.getFullYear();
var dd_M = ("0"+(updated.getMonth()+1)).slice(-2);
var dd_D = ("0"+updated.getDate()).slice(-2);
 
if(dd_Y == pp_Y && dd_M == pp_M && dd_D == pp_D){
    //日付が同じときは出力しない
}else{
    var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";
    document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script>


どこに追加するかですが、まず私のVaster2テンプレの場合


「Ctrl+Fキー」で検索窓を出し「<!--記事ページの時-->」と検索し、上の画像の場合では1605行目の「</b:if>」と1606行目「</span>」の間です。


こうなります。

Blogger標準テンプレートをお使いの方は

1
2
3
<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

の下に入れて下さい。

※公開日と更新日が同じ場合は表示されませんので確認の際は注意！

確認してみると、


これでこのような表示になります。

んん？二つの表記のスパンが近すぎるし、表示形式がそもそもカッコ良くない。


スポンサーリンク


表示形式のカスタマイズ

記事公開日の表記カスタマイズ


まず本来の日付の表示形式を変えてしまいましょう。


管理画面の「設定」→「言語と形式」→「日付ヘッダーフォーマット」から、お好みの形式を選びます。私は「2018/06/15」の形式にしました。



記事更新日の表記カスタマイズ



var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";

 この部分を、以下のように
var updated_dd ="最終更新日 "+ dd_Y+"/"+dd_M+"/"+dd_D+"";

「年」・「月」を「/」に、「日」は削除します。

「最終更新日」の後ろにある「：（コロン）」も削除して半角スペースを入れます。


こんな感じですね。

ついでに公開日と更新日の間のスパンも変えてしまいましょう。

1
style='margin-left:30px;'


このコードを

<span class='updated post-timestamp'　～で始まる分の最後に挿入します。


上の画像の青四角で囲ったところのような感じですね。

コードの「30px」のところがスペースの数値ですので、お好みで変更してください。



その他のカスタマイズ

更新マークを付ける


一番最初に追加した長いコードの上に、

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

と一行のコードを付け足すことで「更新（リフレッシュ？）マーク」を「最終更新日」の文字前に付けることが出来ます。

公開日とのスパンは「0.5em」の数字の部分ですので注意してください。

このコードを追加した場合、前述の「px」の部分は更新マークと更新日のスパンの数値を表すものになります。


投稿日と更新日が同じでも双方表示する


1
2
var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";
  document.getElementById("last-modified").innerHTML = updated_dd;

このコードを「//日付が同じときは出力しない」の下に入れて下さい。


ここまでご紹介したのはあくまで私個人の好みですので、日付の表示形式やスパンの数値などは皆様のお好みに変更して使ってください。



コードや方法は某氏の猫空さんのページを参考にさせていただきました。

ありがとうございます。


　　　　　　　　　　　 　　　　　　　　　　　　
あなたにおすすめの記事