🎨

HubSpotブログに更新日を表示する方法｜タイムゾーン・ロケールも解説

| Reina | ,
目次

はじめに 🌿

HubSpotのブログテンプレート（ボイラープレート）では、多くの場合、公開日は最初から表示されていますが、更新日は出力されていないケースもあります。

この記事では、ブログに「更新日」を正しく追加する方法を、タイムゾーンやロケール設定も含めてやさしく解説します✨

これからカスタマイズする人の参考になったらうれしいです！

ChatGPT Image 2025年4月29日 12_40_12

この記事でわかること ✏️

  • HubSpotブログで「更新日」を表示する方法 📅

  • HubL関数とフィルターの使い方 📄

  • タイムゾーンやロケール設定の注意点 ⚡

結論 🎯

HubSpotブログに「更新日」を出したいなら、

▶ content.updated HubL関数と、format_timeフィルターを使う！

タイムゾーンとロケールをきちんと指定すれば、きれいな日付表示ができるよ✨

（参考：HubSpot公式フィルタードキュメント）

 

やり方 🛠️

Step1：公開日を出す基本 ✨

ボイラープレートのブログテンプレートには、公開日を出す基本コードが入っているよ：

<time datetime="{{ content.publish_date|escape_attr }}" class="blog-post__timestamp">
  {{ content.publish_date_localized|escape_html }}
</time>

まずはここをそのまま使えばOK！

 

Step2：更新日を追加する 🔄

更新日は、次のように書くといいよ：

<time datetime="{{ content.updated|escape_attr }}" class="blog-post__timestamp">
  {{ content.updated|format_time('MMM d, yyyy', 'Asia/Tokyo', 'en') }}
</time>

ポイントはここ：

  • content.updated を使う！（last_updatedではないよ）

  • format_timeフィルターでタイムゾーン（Asia/Tokyo）とロケール（例：en-us）を設定する！

  • フォーマットパターンは Unicode仕様 に合わせて自由に指定できるよ。

  • ロケールはこのページにあるものが使えるよ！

（わたしは "MMM d, yyyy" を指定して "May 3, 2025" みたいな見た目にしたかったから、'MMM d, yyyy', 'Asia/Tokyo', 'en' って設定したよ！）

 

Step3：アイコン統一のポイント ✨

デザインに統一感を出したいときは、Font Awesomeのアイコンを使うのもおすすめ🐱

例えば：

<i class="fas fa-calendar-alt"></i>

みたいに書くけど、

  • Font Awesomeは事前に<head>タグでCDNリンクを読み込んでおく必要があるよ！

  • クラス（class="fas fa-xxx"）で好きなアイコンを指定できるよ！

こうすることで、全体のデザインがきれいにまとまるよ✨

 

注意ポイント ⚡

  • HubSpotドキュメントをよく読むと、content.updatedを使うべきことがわかる！（間違ってlast_updatedを使わないように！）

  • format_timeとformat_datetimeの違いに注意！フィルタードキュメントを確認しながら使おう！

  • タイムゾーンを指定しないとUTC基準になるので、日本時間にしたいなら必ず"Asia/Tokyo"を指定しよう！

  • ロケールを指定しないと月名が数字になったりするので、英語表記にしたいなら"en"を明示的に指定しよう！

 

まとめ ✨

HubSpotブログに「更新日」を追加するのは、 ポイントを押さえればとってもかんたんにできるよ！

公開日・更新日をきれいにそろえて、 ブログをもっと見やすく、使いやすくしていこうね✨

この記事が少しでも参考になったらうれしいな〜

あわせて読みたい 📖
Reina

Written by Reina

HubSpot CMS (現 Content Hub) をメインに 気になったことをまとめます #vibe coding

💬 コメントしてみる？

📚 他の記事も読んでみる？