Blogger関連 コラム

【Blogger】1記事ごとに投稿日付を表示して、かつ記事を分ける方法。

Blogger管理画面より引用させて頂きました。

ということで、今回はBlogger関連のtipsを。
このブログは、Google先生のサービス『Blogger』を使って書かれているのですが、今回ふと、ある方のご指摘を頂きました。

「投稿日付ごとに記事がまとまっていると、どこで記事が区切られているのか分からない」

……確かに、そんな問題はありますね。でも、よく分からなかったのでテンプレートを修正していなかった私。
何しろ、記事をダイジェストにして表示する方法も、どこぞのJavascriptを利用させて頂いていましたからね！　それでもエンジニアですか。

と言うのも、Bloggerの投稿日付って一日に記事を2つ以上アップすると、そもそも変数として入って来ないんですよね。情報が無いから、表示させるのが面倒。
うーむ。なんて思っていた所、以下の記事に参考になる事が書いてありました。



なるほど、Javascriptで変数に保存してしまえばいいのか。情報が無いなら作るべし！
ということで、ちょっとやってみました。

　まずは、記事がまとまらないようにする。

これは、わざわざまとめようとしている機能をコメントアウトすれば良いだけなので、簡単と言えば簡単です。
実際にはこんな感じ。まずは、テンプレートのレイアウト編集で『dateHeader』を探してくださいね。

変更前

  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
      &lt;/div&gt;&lt;/div&gt;
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>

    <b:if cond='data:post.dateHeader'>
   <!-- 2016.11.18 add -->
      <!-- <h2 class='date-header'><span><data:post.dateHeader/></span></h2> -->
      <div class=\'date-header\'><span><data:post.dateHeader/></span></div>
   <!-- 2016.11.18 add end -->
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
      <b:include data='post' name='post'/>
      <b:include cond='data:blog.pageType in 
{&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
    </div>

変更後

  <b:loop values='data:posts' var='post'>
 <!-- 2016.11.25 add comment -->
    <!-- <b:if cond='data:post.isDateStart and not data:post.isFirstPost'> -->
      &lt;/div&gt;&lt;/div&gt;
    <!-- </b:if> -->
    <!-- <b:if cond='data:post.isDateStart'> -->
      &lt;div class=&quot;date-outer&quot;&gt;
    <!-- </b:if> -->

    <b:if cond='data:post.dateHeader'>
   <!-- 2016.11.18 add -->
      <!-- <h2 class='date-header'><span><data:post.dateHeader/></span></h2> -->
      <div class='date-header'><span><data:post.dateHeader/></span></div>
   <!-- 2016.11.18 add end -->
    </b:if>
    <!-- <b:if cond='data:post.isDateStart'> -->
      &lt;div class=&quot;date-posts&quot;&gt;
    <!-- </b:if> -->
 <!-- 2016.11.25 add comment end -->
    <div class='post-outer'>
      <b:include data='post' name='post'/>
      <b:include cond='data:blog.pageType in 
{&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
    </div>

以前、h2タグをdivタグに変更した事があって、その時の記述が残ってしまっていてごめんなさい。

「data:post.isDateStart」という記述が、どうも「日付が始まる最初の記事だったら」というフラグのように見えたので、こちらをコメントアウトに。
そうすると、全ての記事が日付関係無く、別々の記事として分かれて表示されます。

　投稿日付を全ての記事に表示する

しかし、この状態だと日付が表示されません。
「data:post.dateHeader」が投稿日付なのですが……どうもこれは、その日の最初にポストした記事にしか付与されないようなのです。

なので、これを上記記事を参考にして、別変数に格納。

追記

  <b:loop values='data:posts' var='post'>
 <!-- 2016.11.25 add comment -->
    <!-- <b:if cond='data:post.isDateStart and not data:post.isFirstPost'> -->
      &lt;/div&gt;&lt;/div&gt;
    <!-- </b:if> -->
    <!-- <b:if cond='data:post.isDateStart'> -->
      &lt;div class=&quot;date-outer&quot;&gt;
    <!-- </b:if> -->

    <b:if cond='data:post.dateHeader'>
      <script type='text/javascript'>var postDate = "<data:post.dateHeader/>"
</script>
   <!-- 2016.11.18 add -->
      <!-- <h2 class='date-header'><span><data:post.dateHeader/></span></h2> -->
      <!-- <div class='date-header'><span><data:post.dateHeader/></span></div> -->
   <!-- 2016.11.18 add end -->
    </b:if>
 <!-- 2016.11.25 add -->
    <div class='date-header'><span><script type='text/javascript'>
document.write(postDate)</script></span></div>
 <!-- 2016.11.25 add end -->
    <!-- <b:if cond='data:post.isDateStart'> -->
      &lt;div class=&quot;date-posts&quot;&gt;
    <!-- </b:if> -->
 <!-- 2016.11.25 add comment end -->
    <div class='post-outer'>
      <b:include data='post' name='post'/>
      <b:include cond='data:blog.pageType in 
{&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
    </div>

これで、全部の記事に投稿日付が表示されるようになります。
やー、調べながらやると、こういうのって大変ですね。
地味に時間が掛かってしまいましたよ。



何かの参考になれば良いなと思いつつ…………。

スポンサーリンク

スポンサーリンク