Home
Menu
Side
Twitter
Top
ホーム / QooQ | ブログ | ブログカスタマイズ |

【 QooQ カスタマイズ 】 Blogger ブログで最終更新日を表示させたい

2019/08/07

QooQ ブログ ブログカスタマイズ

New
  • 更新マークが表示されない場合
この記事はこんな悩みを解決します！
  • Blogger のテンプレート QooQ で最終更新日を表示したい

こんにちは HARU（ @HARU ）です。

今回は Blogger のテンプレートである QooQ に、最終更新日を表示させるカスタマイズをしました。

「更新日なんてどうでもいいじゃん？」って思う方もいるかもしれません。

しかし、情報を取り扱っている記事は、「鮮度が命」のため更新日はとても重要です。

今回は QooQ で実装していますが、他のテンプレートでも実装できると思います。

参考にしてください。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

参考

QooQ のテンプレートを編集する

（１）Blogger のテンプレート編集画面にて、以下のコードを検索します。

（※）QooQ 以外のテンプレートを使用している場合、記事投稿日を表示しているコードを探してください。

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

（２）先ほど検索したコードを以下のコードに差し替えます。


    <p id='single-header-date'>
      <data:post.dateHeader/>
      <!-- 更新マーク -->
      <i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em'/>
      <!-- 最終更新日 -->
      <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
    </p>

コード詳細説明

更新マーク


  <!-- 更新マーク -->
  <i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em'/>

投稿日と更新日の間に「 」のマークを表示させているコードになります。

margin-left の値を変更することで、投稿日との間を調整できます。

最終更新日


  <!-- 最終更新日 -->
  <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>

投稿日の右側に最終更新日を表示するコードになります。

こちらも更新マーク同様、margin-left の値を変更することで更新マークとの間を調整できます。

更新マークが表示されない場合

更新マークが表示されない場合、Font Awesome を導入していない可能性があります。

以下、導入方法になります。

Font Awesome を導入していない場合、以下のコードを <head> の直下に記述します。

<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

最終更新日を表示する Script

以下の Script を先ほど差し替えたコードの直下に記述します。


  <!-- 最終更新日 -->
  <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>

更新日表示変更について

var updated_dd =" "+ dd_Y+"/"+dd_M+"/"+dd_D+""; のコードを編集することで更新日表示のカスタマイズできます。

タイトルを表示させる


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

更新日表示形式


  var updated_dd =""+ dd_Y+"年"+dd_M+"月"+dd_D+"日";

更新日が表示されない？

上記 Script では投稿日と更新日が違う場合のみ最終更新日が表示されます。

投稿日と更新日が違っているか確認してください。

投稿日と更新日が同じでも表示したい場合、Script 内にある else を削除することにより、表示することができます。

ただし、更新していない場合でも投稿日と同一日が表示されてしまいます。

まとめ

QooQ がリリースされてそれほど経っていないので、情報が少なく大変でしたが何とか最終更新日を表示させることができました。

QooQ 以外のテンプレートで最終更新日を表示したい場合でも、やり方はほぼ同じだと思います。

うまくいかない方がいらっしゃればコメントください。

QooQ