【Blogger】投稿日の書式変更と更新日追加(adjust date format)

   Latest updated
投稿日書式変更, JetTheme

投稿日の書式変更と、更新日を追加したので紹介します。

投稿日の書式変更と更新日の追加については、下記のサイトを参考にしました。ありがとうございました。

投稿日の書式変更と更新日追加

JetThemeの投稿日の初期設定の書式は、"日 月, 年"という、ちょっとなじみにくい書式になっています。これを、"年/月/日"という書式に変更した内容について紹介していきます。合わせて更新日の追加についても紹介します。

投稿日の書式変更と更新日追加の方針

当ブログでは、英語学習に関する記事がメインとなっておりますので、英語圏のブログサイトを参考に、下記のような書式にしようと検討しました。

  • 投稿日「Posted 年/月/日」
  • 更新日「Latest updated 年/月/日」

ゆくゆくは「日 英語で月(Juneなど), 年」という書式にしたいと思います。

また、ブログトップページには「投稿日」だけを、個別記事には「投稿日と更新日」を表示するようにしようと検討しました。

ブログトップページの投稿日の書式変更

これからBloggerテーマのHTMLを編集して行きますので、まずはテーマのバックアップすることを強くお勧めします。
テーマのバックアップ!!Bloggerテーマをいじる前には必ずバックアップしましょう。

トップページには、初期設定では、"FEATURED POST", "LATEST POSTS"とサイドバーに"POPULAR POSTS"があるかと思います。

それぞれ以下のidのincludableタグの中で設定しているようなので、まずはそれぞれの設定箇所を検索してだいたいの修正箇所を把握しましょう。 

<b:includable id='JetFeaturedPost'>
<b:includable id='JetArchive' var='post'>
<b:includable id='JetArchive' var='post'>

"FEATURED POST", "LATEST POSTS", "POPULAR POSTS"、それぞれ修正箇所、修正内容は同じです。それぞれのincludableタブから35-40行下ぐらいに、以下のようなコードがあります。
data:post.date.iso8601と検索すると、直ぐに見つかるかと思います。検索がヒットした行の周辺がコードを変更する場所で、以下ようなコードがあるかと思います。これを置き換えていきます。 

<small class='me-2'>
    <svg aria-hidden='true' class='me-1 jt-icon'>
        <use xlink:href='#i-clock'/>
    </svg>
    <span class='date-format' expr:data-date='data:post.date.iso8601'>
        <b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/>
    </span>
</small>

上のコードを下のコードに置き換えます。

<small class='me-2'>
    <span class="small me-1">Posted</span>
    <span class='date-format' expr:data-date='data:post.date.iso8601'>
        <data:post.date.year/>/
        <b:eval expr='data:post.date.month lt 10 ? &quot;0&quot; + data:post.date.month : data:post.date.month'/>/
        <b:eval expr='data:post.date.day lt 10 ? &quot;0&quot; + data:post.date.day : data:post.date.day'/>
    </span>
</small>

これで終わりです。
時計のアイコンを表示したいという方は、このコードの最初のspanタグで囲まれた範囲を削除して、オリジナルコードのsvgタグに囲まれた範囲に置き換えて頂ければと思います。

どこが日付の表示で、どこが装飾かというのも、コードを見るとなんとなくわかるかと思います。

以上、"FEATURED POST", "LATEST POSTS", "POPULAR POSTS"の投稿日の書式変更でした。

個別記事の投稿日の書式変更と更新日追加

ここからは、個別記事の投稿日の書式変更と更新日の追加について紹介していきたいと思います。要領はトップページの投稿日書式変更と、ほんとど同じです。

まず、<b:includable id='JetPost' var='post'>を探しましょう。このincludableタグの中が個別記事の設定のようで、この中のdata:post.date.iso8601の、あたりから以下のコードを探しましょう。 

<div class='me-3'>
    <svg aria-hidden='true' class='me-1 jt-icon'>
        <use xlink:href='#i-clock'/>
    </svg>
    <span class='date-format' expr:data-date='data:post.date.iso8601'>
        <b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/>
    </span>
</div>

上のコードを下のコードに置き換えます。

<div class='me-3'>
    <span class="small me-1">Posted</span>
    <span class='small date-format' expr:data-date='data:post.date.iso8601'>
        <data:post.date.year/>/
        <b:eval expr='data:post.date.month lt 10 ? &quot;0&quot; + data:post.date.month : data:post.date.month'/>/
        <b:eval expr='data:post.date.day lt 10 ? &quot;0&quot; + data:post.date.day : data:post.date.day'/>
    </span>
    <b:if cond='data:post.date != data:post.lastUpdated'>&amp;nbsp;&amp;nbsp;
        <span class="small me-1">Latest updated</span>
        <span class='small date-format' expr:data-date='data:post.lastUpdated.iso8601'>
            <data:post.lastUpdated.year/>/
            <b:eval expr='data:post.lastUpdated.month lt 10 ? &quot;0&quot; + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/
            <b:eval expr='data:post.lastUpdated.day lt 10 ? &quot;0&quot; + data:post.lastUpdated.day : data:post.lastUpdated.day'/>
        </span>
    </b:if>
</div>

これで終わりです。
先ほど同様に、時計アイコンや更新アイコンを使いたい場合は、Posted, Latest updatedのあたりのコードを修正頂ければと思います。

以上、個別記事の投稿日の書式変更と更新日の追加でした。

個別記事下のRELATED POSTの投稿日の書式変更

これについては、検討中です。

Autherを非表示にして、投稿日の書式変更する方法を検討中です。分かり次第アップしたいと思います。

まとめ

今回は、BloggerのテーマJetThemeのカスタマイズとして、投稿日の書式変更と更新日の追加について紹介してきました。これからもJetThemeのカスタマイズをどんどん紹介していきたいと思います。

今回の記事は、以下のサイトを参考にさせて頂きました。大変ありがとうございました。

最後まで記事を読んでいただきありがとうございました。

Jetthemeカスタマイズは、こちらにまとめてます

- スポンサーリンク -

Next Post Previous Post