Bloggerに更新日を表示させてみよう

こんばんは。たまたまPrimeビデオで見つけた "A Private Affair"にハマっておりまして、また勉強サボっています💦←AmazonのPrimeビデオは無料の体験期間があるので、気になる方はぜひみてください😍

Bloggerの記事に更新日を表示させる

さてさて、つい最近なんですが、過去に書いた記事を参考にすることがありまして、ついでにもう一度ブログに載せてみました。

だけど、私が使っているテーマWindSpotは更新日が出ないので、記事だけを読むと、内容がめっちゃ古い気がしちゃう。

更新日を載せてみようと試したところ、WindSpotで使えたのが「Bloggerで記事の公開日/最終更新日を表示してみた」だけだったので防備録として残しておきます☺️✨(この記事2019年12月28日にも書こうとしてて、今までサボってました💦笑)

以前に使っていたテーマに更新日を載せる方法

前に使っていたテーマでも「Bloggerで記事の公開日/最終更新日を表示してみた」を参考にさせていただいて、更新日を載せていたので、参考にした記事のリンクを貼っておきます🍀
  1. Bloggerで記事の公開日/最終更新日を表示してみた」のコードをコピー
  2. publishedで検索して、該当箇所を置き換える←テーマによって違います。
  3. アイコンを使いたい場合は「ブログ記事の公開日・更新日をアイコンフォントで表示する」を参考にさせてもらいます。
  4. 【Blogger】最終更新日を表示する」で微調整の方法を学びます。

WindSpotに更新日を載せる方

コードをコピー

Bloggerで記事の公開日/最終更新日を表示してみた」のコードをコピーしておく。

ブログのHTML編集

編集画面で下記の部分を探してコメントアウトする。

<b:if cond='data:allBylineItems.timestamp'>
<div class='post-times'><span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span><span id='readTime'/></div>
</b:if>(code-box)

上記の始めを<!--、終わりを-->でをコメントアウト。(私の場合は、<span id='readTime'/>の部分の記事を読むのにかかる時間の表示も消しています。)

<div class='post-times'>
<span class='post-date published' expr:datetime='data:post.date.iso8601'><b:eval expr='data:post.date format &quot;yyyy-MM-dd&quot;'/></span>

<b:if cond='data:post.date != data:post.lastUpdated'><span class='post-rewrite' expr:datetime='data:post.lastUpdated.iso8601'><b:eval expr='data:post.lastUpdated format &quot;yyyy-MM-dd&quot;'/></span></b:if>(code-box)

コメントアウトした上か下に、上記のコードを貼り付けます。

2行に並べたい場合は<span class='post-rewrite' expr:datetime='data:post.lastUpdated.iso8601'>の前に<br>を追加してください。


2023-4-9の日付表示を2023年4月9日に変えたい場合は、2箇所あるyyyy-MM-ddyyyy年MM月dd日に変えてください。

CSSの変更

.post-times span.post-date{position:relative;font-size:12px;color:var(--post-snip-data);}(code-box)

を下記にマルっと置き換えます。

.post-times span.post-date, .post-times span.post-rewrite{position:relative;font-size:12px;color:var(--post-snip-data);}(code-box)

更新日の前に update のアイコンを使いたかったので、

.post-times span.post-rewrite:before{content:"\e923";font-family:'Material Icons Round';font-weight:400;font-size:13px;vertical-align: middle;margin:0 0 0 5px;}(code-box)

を加えました。

私が使っているテーマ"WindSpot"はGoogleのマテリアルアイコンが簡単に使えるので他のものが良いときはCode pointの数字をコピーしてe923と置き換えれば好きなアイコンを使うことができます。

これで記事を書いた日付の雰囲気を壊すことなく、更新日が表示されるようになりました☺️✨よかった❤️

あい

日本の片田舎でコソコソと韓国語と英検1級に向けて勉強をしているアラフォーママ。学習記録と育児記録を残してます。2023年、子どもと旦那が拾ってきた子猫が家族に増えました。 blogger email

Post a Comment