Blogger:日付ヘッダーを必ず表示させる方法


投稿日は日付ヘッダーに表示されますがインデックスページやアーカイブページなど複数の投稿を同時に表示させているページの場合、同じ投稿日の投稿の日付ヘッダーは先頭の投稿以外では省略されていしまいます。
これを必ず表示させるようにします。

日付ヘッダー<data:post.dateHeader/>の値は最初に表示される投稿にしか存在しない



投稿日は日付ヘッダー<data:post.dateHeader/>で表示されますが同じ日付の投稿では上のように最初に表示される投稿以外では日付ヘッダーが省略されてしまいます。
dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.    Layouts Data Tags - Blogger Help   
この公式ヘルプの文言から解釈するとこのdateHeaderは表示が省略されるのではなく、同じ日付の投稿の最初に表示される投稿(新しい投稿が上に表示されるので投稿時間からみるとその日付の最後の投稿ということになります、ああややこし)にのみデータが存在するということになります。

最初は表示が省略されるだけと思っていたので<b:if cond='data:post.isDateStart'>で場合分けできないのか四苦八苦してしまいました。

<data:post.dateHeader/>をjavascriptの変数に保存して再利用する


ということで全ての投稿で日付を表示させるにはdateHeaderが存在する投稿のときにそのデータを保存しておいてそれを再利用すればよいことになります。

データの保存場所にはjavascriptの変数が利用できます。

管理画面→テンプレート→HTMLの編集、でテンプレートのHTMLを見ます。

ウィジェットへの移動→Blog1、で「ブログの投稿」ウィジェットの中を見ます。

<b:includable id='main' var='top'>の中に以下の部分があります。
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
これを以下のように書き換えます。
<b:if cond='data:post.dateHeader'>  
  <script type='text/javascript'>var hiduke = "<data:post.dateHeader/>"</script>  
</b:if>  
<h2 class='date-header'><span><script type='text/javascript'>document.write(hiduke)</script></span></h2> 
post.dateHeaderが存在するときにjavascriptの変数hidukeにpost.dateHeaderを代入し、それを表示させています。

この部分は<b:loop values='data:posts' var='post'>で投稿が存在する限りループされるのでpost.dateHeaderが存在しないpostではhidukeに保存されている、その前に表示されたpostのpost.dateHeaderを表示することになります。

真ん中の投稿にも日付ヘッダーが表示されるようになりましたね。

参考にしたサイト


Bloggerの投稿日付をすべての記事に入れる方法 【dateHeader,1日複数記事対応】 | 某氏の猫空
javascriptの変数を利用する方法を参考にさせて頂きました

Layouts Data Tags - Blogger Help
dateHeaderの公式ヘルプ
PR

0 件のコメント:

コメントを投稿