Blogger QooQで記事の最終更新日を表示させるカスタマイズ

Bloggerテンプレートの「QooQ」では、記事を公開後に後日内容を更新しても更新日は表示されず、常に初回公開日のみが表示されます。

初回公開日の横に最終更新日も表示されるようにカスタマイズしましたので、その方法についてご紹介します。

本記事は、当ブログをBloggerで運営していた時期に投稿しています。
現在はWord Pressで運営していますが、多数のアクセスをいただきご好評いただいている記事ですので、Word Press移行後も引続き掲載します。
現在のBloggerの状況はわかりかねますので、本記事をご参考にカスタマイズされる際はこの点をご了承ください。

Blogger利用時に行ったカスタマイズについては別記事にてまとめていますので、こちらも是非ご覧ください。

あわせて読みたい

Bloggerテンプレート「QooQ」のカスタマイズ方法と参考にしたサイト一覧 Bloggerブログのカスタマイズについて、実際にカスタマイズを行った方法や、参考にさせていただいた情報サイトやブログをまとめています。 本記事は、当ブログをBlogger…

当ブログで利用しているブログテンプレートと参考にしたサイト

Bloggerでのブログ運営時は、ブログデザインはラムネグさんのテンプレート「QooQ（クーク）」を利用していました。

シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！

これからご紹介する方法は、この「QooQ」に対して適用した方法となります。

また、今回のカスタマイズは、tonyさんの記事、「【Blogger】最終更新日を表示する」を参考にさせていただきました。

最終更新日を表示させる方法

HTMLの編集画面でコードを追加する

「テーマ」→「HTMLの編集」から、以下のコードを全てコピーして貼り付けます。

貼り付ける場所については、これ以降で説明しています。

<i aria-hidden='true' class='fa fa-refresh' style='margin-left:1.0em'/>
    <span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:5px;'>
   <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){
    //日付が同じときは出力しない
var updated_dd =""+ dd_Y+"/"+dd_M+"/"+dd_D+"";
  document.getElementById("last-modified").innerHTML = updated_dd;/*投稿日と更新日が同じでも双方表示させる---*/
}
else{
    var updated_dd =""+ dd_Y+"/"+dd_M+"/"+dd_D+"";
    document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script>

テンプレートのHTMLは、編集前に必ずバックアップを取ってください。
また、HTMLの編集については自己責任でお願いします。

コピーしたコードを貼り付ける場所

上記のコードを貼り付ける場所は、HTML編集画面の中です。

HTML編集画面で以下のコードを検索します。

<p id='single-header-date'><data:post.dateHeader/></p>

キーボードの「Ctrl + F」または「⌘ command + F」で検索ボックスを開き、検索するコードをコピペで入力すると、簡単に該当コードを見つけることができます。

該当のコードが見つかったら、<data:post.dateHeader/>と</p>の間に先ほどコピーしたコードを貼り付けます。

<p id='single-header-date'><data:post.dateHeader/>ここに貼り付ける</p>

作業としては、以上です。

HTMLの変更を保存してブログ記事を確認すると、記事公開日の横に更新日が表示されているはずです。

具体的な表示形式の仕様とカスタマイズの微調整の方法

表示形式の仕様（カスタマイズの内容）について

コードをコピペすればカスタマイズ作業としては完結しますが、ここからは、表示形式の仕様の内容とカスタマイズへの微調整の加え方についてご紹介します。

前述でご紹介したコードによるカスタマイズの仕様は以下のようになっています。

これ以下の内容で詳細のカスタマイズと各コードの紹介をしています。

こちらを参考にお好みの表示形式に微調整を加えてみてください。

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

記事公開日の表示形式を変更する場合は、管理画面の「設定」→「言語と形式」→「日付ヘッダーフォーマット」から変更します。

既にお好みの形式を選ばれている場合は不要です。

このブログでは、「yyyy/mm/dd」の形式にしていました。

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

最終更新日の表示に対応しているのは以下のコードです。

このブログでは、記事公開日と形式を合わせて、今回コードで追加した最終更新日の表示形式も「yyyy/mm/dd」になっています。

var updated_dd =""+ dd_Y+"/"+dd_M+"/"+dd_D+"";

以下の変更例のように、入力を変更することで表示形式が変更可能です。

記事公開日の表示形式と異なっている場合は、合わせるように変えてみてください。

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

上記のコードでは、「最終更新日：yyyy年mm月dd日」と表示されます。

変更例では日付の前に「最終更新日：」という項目名を追加していますが、項目名は自由に記載できます。

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

上記のコードでは、「最終更新日：yyyy mm dd」と表示されます。

年月日の間に/など何もいれたくない時は、””の中を空白にすれば非表示にもできます。

更新マークの表示と項目間のスペースのカスタマイズ

最終更新日の左横に更新マークを表示

以下のコードで最終更新日の左横に更新マークを表示させています。（貼り付けたコードの1行目）

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

margin-leftの値を変えることで、公開日と更新マークの間のスペースの幅を調節できます。

ここでは、1.0emと設定しています。

更新マークと更新日の間のスペース幅の調整

追加した更新マークと更新日の間のスペース幅は、以下のコードで設定しています。（貼り付けたコードの2行目）

<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:5px;'>

ここでは5pxで設定しています。

スペース幅を調整したい場合、コードの最後にある、5pxの値を調整してください。

更新マークを表示させない場合、上記のコードの5pxの値は、公開日と更新日の間の幅を指しています。

公開日と更新日が同じ場合の表示方法のカスタマイズ

公開日と更新日が同じとき、（＝記事をまだ一度も更新していない状態のとき）でも、公開日と更新日を同一日付で表示させる仕様になっています。

公開日と更新日が同じ場合（＝記事をまだ一度も更新していない状態）は更新日を非表示する場合は、この２行のコードを削除します。

var updated_dd =""+ dd_Y+"/"+dd_M+"/"+dd_D+"";
    document.getElementById("last-modified").innerHTML = updated_dd;

まとめ：記事に最終更新日を表示させて、記事の鮮度を保とう！

ブログを長く運営していると、その分公開日が古い記事が増えていきます。

リライトをして定期的に内容をアップデートさせても、更新日が記載されていないと、読み手にはそれは伝わらず、古い記事・古い情報と認識されてしまいます…。

せっかく更新した記事を長く多くの人に読んでもらうためにも、最終更新日を表示させて、記事の鮮度を保つことは重要です。

また、いつ更新したかがブログ運営側にも一目でわかり、管理がしやすくなるというメリットもありますね。

以上、Blogger QooQで記事の最終更新日を表示させる方法についてのご紹介でした。