[Blogger] QooQで最終更新日を追加する方法

2025/12/07

Blogger HTML/CSS QooQ


SEO(検索エンジンの最適化)において、その情報が最新であるかが重要になってきます。

QooQでは最終更新日が記載されないので、記事をリライト(修正・加筆)しても分かりにくいのが難点です。


本記事ではそんな最終更新日を追加する方法を解説します!



HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。



HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。



最終更新日を追加するコード

HTML編集で<p id='single-header-date'><data:post.dateHeader/>を検索します。

その直後、</p>の手前にコードを貼り付けます。


<p id='single-header-date'><data:post.dateHeader/>コード挿入位置</p>


                <p id='single-header-date'><data:post.dateHeader/>
                  <!-- [START] 記事更新日追加 -->
                  <span class='updated post-timestamp' id='last-modified' itemprop='dateModified' style='margin-left:10px;'>
                    <data:post.lastupdatedISO8601/><!-- 右側に表示される -->
                  </span>
                  <script>
                    // 投稿日
                    var published=new Date(&quot;<data:post.timestampISO8601/>&quot;);
                    // 更新日 
                    var updated =new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;);
                  </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>
                  <!--[END] 記事更新日追加 -->
                </p>


白文字の部分が追加コードになります。



下から5行目の

var updated_dd ="("+ dd_Y+"/"+dd_M+"/"+dd_D+"更新)";

が表記方法になります。

この場合の表記は(YYYY/MM/DD更新)になります。


最終更新日:YYYY年MM月DD日 とする場合は

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

更新日:YYYY-MM-DD とする場合は

var updated_dd ="更新日:"+ dd_Y+"-"+dd_M+"-"+dd_D+;

となります。


また投稿日と更新日の間隔を広げたり狭めたりしたい場合は、上から2行目の

style='margin-left:10px;'

の値(10の部分)を変更してください。



QooQの最終更新日追加は簡単!

以前、公式テーマEmporioで最終更新日を追加しようとした時はかなり苦戦しました。

記事の終わりに挿入する方法にしかたどり着けなかったんですよね。


記事はコチラ ➡ 最終更新日を記事の終わりに挿入する方法


それに比べるとQooQの最終更新日を追加するのは簡単です。

是非、挑戦してみてくださいね!



参考ブログ様

BloggerのQooQでの最新記事、更新日の表示方法


にほんブログ村 ブログブログ ブログサービスへ にほんブログ村 ブログブログ ブログノウハウへ ブログノウハウランキング

このブログを検索

現在の使用テーマ

EmporioからQooQ list版に変更しました。(2025年11月)

お問い合わせ

名前

メール *

メッセージ *




QooQ