Blogger固定ページに「日付」をつける方法【公開日・更新日もOK】-P-LIFE.NET

はじめに

Bloggerの固定ページには通常「日付」が表示されません。でも、記事の更新日や公開日を読者に伝えたいとき、日付の表示はとても大切です。

この記事では、Bloggerの固定ページに「公開日」や「更新日」を表示する方法を、HTMLとCSSを使ってカスタマイズしていく手順で解説します。

1. どんな見た目になるの？

まずは完成イメージをご覧ください。

📅 2025/04/16　🔄 2025/04/15

このように、公開日（📅）と更新日（🔄）を横並びで表示できます。

2. 必要なHTML

表示させたい場所に、以下のHTMLを貼り付けます。

<div class="date-inline">
  <div class="pub">📅 <time datetime="2025-04-16">2025/04/16</time></div>
  <div class="mod">🔄 <time datetime="2025-04-15">2025/04/15</time></div>
</div>

3. CSSでスタイルを整える

上記HTMLだけでは見た目が整わないので、以下のCSSを追加します。

.date-inline {
  font-size: 0.9em;
  color: #555;
  display: flex;
  gap: 1em;
  align-items: center;
  margin-bottom: 1em;
}
.date-inline .pub,
.date-inline .mod {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

設置場所：
Blogger管理画面 →「テーマ」→「カスタマイズ」→「高度な設定」→「CSSの追加」へ貼り付けてください。

4. どんなときに使える？

固定ページでも最新の情報があると伝えたいとき
更新した履歴を読者に示したいとき
記事が古いか新しいかを明確にしたいとき

特にプロフィールページやまとめ記事、規約ページなどで便利です。

おまけ：日付コードを自動生成できるツールあります！

毎回HTMLを手書きで書くのが面倒な方のために、日付入りHTMLをコピペで簡単に生成できるジェネレーターを作りました。

【便利ツール】→ Blogger用日付コードジェネレーター

公開日・更新日を入力するだけで、すぐに使えるコードが表示されます！

まとめ

Bloggerの固定ページでも、工夫すればきちんと日付を表示できます。HTMLとCSSだけで簡単に実装できるので、ぜひあなたのブログにも取り入れてみてください！

Blogger固定ページに「日付」をつける方法【公開日・更新日もOK】