ホーム » Vaster2 »

【Blogger】記事（投稿）が古い場合、自動でメッセージをだす【JavaScript】

更新  
公開
当サイトはアフィリエイト広告を使用しています

Blogger QooQ Vaster2

記録としてブログを書いていると、「状況の変化などで、投稿時・更新時の情報が正確でなくなる」場合があります。

そこで、「投稿や最後の更新から時間が経過していることを知らせるメッセージ」を自動でだすプログラムを書いてみました。

確認した範囲では動いているようですが、なにぶん素人が書いたものなので参考程度です。

設置場所は<data:post.body/>の上あたりでしょうか。

プログラム

HTMLを編集します。必ずバックアップを取ってから作業してください。

例：1年以上前の記事にメッセージを出す

<div id='post__older-articles-container'><!-- ここにメッセージが表示される --></div>

<script>
"use strict";
const today = Date.now();
const datePublished = Date.parse("<data:post.date.ISO8601/>");
//<![CDATA[
if (today > datePublished + 1000 * 60 * 60 * 24 * 365) {
  document
    .getElementById("post__older-articles-container")
    .insertAdjacentHTML(
      "afterbegin",
      "<div class='post__older-articles'>この記事は1年以上前に作成されました</div>"
    );
}
//]]>
</script>

もう少し細かく条件を設定する場合

例：

  • 最後の更新から5年
  • 最後の更新から3年
  • 投稿から5年
  • 投稿から3年

経過した場合にメッセージを出す

<div id='post__older-articles-container'><!-- ここにメッセージが表示される --></div>

<script>
"use strict";
(() => {
  const today = Date.now();
  const datePublished = Date.parse("<data:post.date.ISO8601/>");
  const deteModified = Date.parse("<data:post.lastUpdatedISO8601/>");
  const year = 1000 * 60 * 60 * 24 * 365;

  //<![CDATA[
  if (today < datePublished + year * 3) {
    return;
  } else {
    const olderArticles = (type, num) => {
      document
        .getElementById("post__older-articles-container")
        .insertAdjacentHTML(
          "afterbegin",
          `<div class='post__older-articles'>この記事は${type}から${num}年以上が経過しています</div>`
        );
    };
    if (today > deteModified + year * 5) {
      olderArticles("最後の更新", 5);
    } else if (today > deteModified + year * 3) {
      olderArticles("最後の更新", 3);
    } else if (today > datePublished + year * 5) {
      olderArticles("公開", 5);
    } else if (today > datePublished + year * 3) {
      olderArticles("公開", 3);
    } 
  }
  //]]>
})();
</script>

CSS

CSS例

.post__older-articles {
  font-size: 1.1em;
  text-align: center;
  color: #8a6d3b;
  background-color: #fcf8e3;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  border: 1px solid #faebcc;
  margin-top: 3em;
  margin-bottom: 3em;
}

アイコン付きCSS例

.post__older-articles {
  font-size: 1.1em;
  text-align: center;
  color: #8a6d3b;
  background-color: #fcf8e3;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  border: 1px solid #faebcc;
  margin-top: 3em;
  margin-bottom: 3em;
}
.post__older-articles:before {
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: text-top;
  width: 1.2em;
  height: 1.2em;
  content: "";
  background-color: currentColor;

  /*
  @tablericons - https://tablericons.com/
  Copyright (c) 2020 Paweł Kuna
  Released under the MIT license
  Licence - https://github.com/tabler/tabler-icons/blob/master/LICENSE (MIT License)
  alert-triangle - https://tablericons.com/
--------------------------------------------------------------------------------------*/
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-alert-triangle' width='24' height='24' viewBox='0 0 24 24' stroke-width='3' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 9v2m0 4v.01' /%3E%3Cpath d='M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75' /%3E%3C/svg%3E");

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-alert-triangle' width='24' height='24' viewBox='0 0 24 24' stroke-width='3' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 9v2m0 4v.01' /%3E%3Cpath d='M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75' /%3E%3C/svg%3E");
}

このブログでの運用

特定のラベルがある場合にメッセージを出すようにしています。

例：Blogger Vaster1.9 Vaster2いずれかのラベルがある場合にメッセージを出す。

<b:if cond='data:post.labels any (l => l.name in {"Blogger","Vaster1.9","Vaster2"})'>

...メッセージを出すプログラム...

</b:if>

メッセージが長いとスマートフォンのときに意図しない場所で改行が発生します。

そこで、HTMLとCSSを追加して改行位置を明示しました。

改行したい場所を<span class='post__older-articles-break'>~</span>で囲む

`<div class='post__older-articles'>この記事は${type}から${num}年以上が経過しています</div>`

↓↓↓

`<div class='post__older-articles'>この記事は${type}から<span class='post__older-articles-break'>${num}年以上が経過しています</span></div>`

CSSを追加・変更

  • text-indentで字下げ
  • 擬似要素にしてcontent: "\A"; white-space: pre;で改行
.post__older-articles {
    font-size: 1.1em;
    color: #8a6d3b;
    background-color: #fcf8e3;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    border: 1px solid #faebcc;
    margin-top: 3em;
    margin-bottom: 3em;
    text-align: center;
    text-indent: -4.6em;
  }
  .post__older-articles-break::before {
    content: "\A";
    white-space: pre;
  }
  @media (min-width: 768px) {
    .post__older-articles {
      text-indent: initial;
    }
    .post__older-articles-break::before {
      content: none;
      white-space: normal;
    }
  }

参考サイト：CSSでbr要素みたいに改行する方法

データタグ

widgetバージョン1のデータタグを使用しています。

widgetバージョン2の場合は<data:post.lastUpdatedISO8601/>を<data:post.lastUpdate.ISO8601/>に変更すれば動くと思います（未検証）

検索

サイト内検索に使ってください 🐤

カテゴリー

Random Picks

すたすた式

Enjoy!👍

QooQ