Blogger:投稿タイトルの下に「年月日 曜日 時刻」を表示させる

https://p--q.blogspot.com/2013/07/blogger_4.html

2013年07月04日17時57分公開
2013年09月03日15時11分更新

ラベル: Bloggerカスタマイズ

日付の形式は日本は「年月日」が一般的ですがヨーロッパでは「日月年」、アメリカでは「月日年」が一般的だそうです。Bloggerではタイムゾーンを東京にしていても「年月日 曜日 時刻」という形式がでてきません。なんとか「年月日 曜日 時刻」としてみてました。

なぜかコメントのタイムスタンプの形式が一番豊富

投稿の日付と時刻の表示形式は、管理画面→設定→言語と形式、から選択します。

コメントのタイムスタンプの形式では「年月日 曜日 時刻」がちゃんと用意されています。

ところが投稿日の形式である日付ヘッダーでは時間を含む形式がありません。

時刻のフォーマットでは以下ような形式しか選択できません。

post.dateHeaderとpost.timestampと組み合わせて「年月日 曜日 時刻」にする

テンプレートHTMLを編集して投稿タイトルの下に「年月日 曜日 時刻」を表示させることにしました。

post.dateHeaderとpost.timestampの形式は、管理画面→レイアウト→ブログの投稿　編集→投稿ページのオプション、で設定します。

ここでそれぞれ「年月日 曜日」と「時刻」としておきます。

管理画面→テンプレート→HTMLの編集、ウィジェットへの移動→Blog1で
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>の中にある
<b:includable id='post' var='post'>の中を見ていきます。

1 2	<div class='post-header-line-1'/> </div>

この<div class='post-header-line-1'/>が投稿タイトルのすぐ下にくる部分です。

post.dateHeaderはBlogger：日付ヘッダーを必ず表示させる方法でみたように最初にでてくる投稿にしか表示されませんのでまずはjavascriptで変数に格納しておきます。

1 2 3

<b:if cond='data:post.dateHeader'>   <script type='text/javascript'>var hiduke = "<data:post.dateHeader/>"</script> </b:if>

これを<div class='post-header-line-1'/>の中にいれます。

これで日付が変数hidukeに格納されます。

次に同じ<b:includable id='post' var='post'>の中にあるpost.timestampの部分をさがして<span class='post-timestamp'>～</span>の部分をカットします。

1 2 3 4 5 6 7 8 9

<span class='post-timestamp'>   <b:if cond='data:top.showTimestamp'>      <data:top.timestampLabel/>      <b:if cond='data:post.url'>         <meta expr:content='data:post.canonicalUrl' itemprop='url'/>         <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>       </b:if>    </b:if> </span>

これを<div class='post-header-line-1'/>の最後にペーストします。

この中の<data:post.timestamp/>が時刻表示部分です。

「年月日 曜日 時刻」とするためにこの前に先に格納した変数hidukeの中身を表示させます。

hidukeの中身は以下のようにして表示させます。

1	<script type='text/javascript'>document.write(hiduke)</script>

以上まとめると<div class='post-header-line-1'/>の中身は以下のようになります。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class='post-header-line-1'/>   <b:if cond='data:post.dateHeader'>      <script type='text/javascript'>var hiduke = "<data:post.dateHeader/>"</script>    </b:if>   <span class='post-timestamp'>      <b:if cond='data:top.showTimestamp'>         <data:top.timestampLabel/>         <b:if cond='data:post.url'>             <meta expr:content='data:post.canonicalUrl' itemprop='url'/>             <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script><data:post.timestamp/></abbr></a>         </b:if>     </b:if>   </span> </div>

投稿タイトルの下に「年月日 曜日 時刻」が表示されていますね。

ラベルの「時刻:」は管理画面→レイアウト→ブログの投稿　編集→投稿ページのオプション、で変更できます。

PR