Blogger:レイアウト編集(9)各投稿の更新日時の表示をする(成功編)

前の関連記事:Blogger:レイアウト編集(8)各投稿の更新日時の表示をする(失敗編)


ようやく更新日時を表示をすることができました。ついでにタイトル下の部分も改造しました。
(2016.11.27追記Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その4でdocument.write()とjQueryを使わない方法に変更しました。)

ついでにタイトル下のレイアウトも変更



アイテムページでは右詰めで公開日時、更新日時、投稿者名がでるようにしました。

 ラベルは左詰めで、上のタイトルとは少し空間をあけて表示されるようにしました。


インデックスページでの更新日時の表示は今回はしていません。

URLをみて表示されている投稿を探して、全投稿のフィードからそれらの投稿の更新日時を抽出して配列に格納して、それをさらに<b:loop values='data:posts' var='post'>のループでカウンタをまわして配列から取り出せばできそうです、、、また必要に迫られたら挑戦したいと思います。

<div class='post-header-line-1'>のなかに入れたのですが、投稿本文との間に大きな空白が入っていました。

そのためさらに外側にある<div class='post-header'>のCSSがpadding: 0 0 1.5em;となっていたのをpadding: 0;としました。
.post-header {
  margin: 0 0 1.5em ;
  color: $(post.footer.text.color);
  line-height: 1.6;
}
つまり<b:skin>の中の.post-headerの部分を以下に書き変えました。
.post-header {
  margin: 0;
  color: $(post.footer.text.color);
  line-height: 1.6;
}

投稿タイトル下に更新日時を表示する方法


<div class='post-header-line-1'>にいれたコードを書き出してみました。

jQueryを使っているので事前にjQueryをロードしておく必要があります。

管理画面→設定→言語と形式、フォーマットで日付ヘッダーフォーマットを「2013-08-01」の形式に、時刻のフォーマットを「13:05」の形式にしておかないとインデックスページでの公開日時の整形ができません。

アイテムページの公開日時はフィードから得ているのでこれらの形式は関係ありません。
  <div class='post-header-line-1'>
<!--公開更新日時の表示 開始-->
  <script>
    function date_shoshiki(feed_date){
        return feed_date.slice(0,17).replace(&quot;-&quot;,&quot;年&quot;).replace(&quot;-&quot;,&quot;月&quot;).replace(&quot;T&quot;,&quot;日&quot;).replace(&quot;:&quot;,&quot;時&quot;).replace(&quot;:&quot;,&quot;分&quot;);
    }
  </script>
  <div style='float:right;font-size: 0.9em;text-align:right;margin-left:20px'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'><!--アイテムページのとき-->
    <div id='toko_nitiji'/>
    <script>
      $.getJSON(&quot;http://&quot;+location.hostname+&quot;/atom.xml?path=&quot;+location.pathname+&quot;&amp;alt=json-in-script&amp;callback=?&quot;,
        function(json){
          var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);
          var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);
          $(&quot;#toko_nitiji&quot;).html(kokaibi+&quot;公開&quot;+&quot;&lt;br&gt;&quot;+koshinbi+&quot;更新&quot;+&quot;&lt;br&gt;&quot;);
          $("#label_hyoji").css('padding-top','15px');
      });
    </script>
  <b:else/><!--アイテムページ以外のとき-->
    <b:if cond='data:post.dateHeader'> 
      <script type='text/javascript'>var post_dateHeader = &quot;<data:post.dateHeader/>&quot;</script> 
    </b:if> 
    <script>
      var feed_date=post_dateHeader+&quot;T&quot;+&quot;<data:post.timestamp/>&quot;+&quot;:&quot;;
      var kokaibi=date_shoshiki(feed_date);
      document.write(kokaibi+&quot;公開&quot;+&quot;&lt;br&gt;&quot;);
    </script>  
  </b:if>
    <data:top.authorLabel/> <data:post.author/>
</div>
<!--公開更新日時の表示 終了-->
    <div id='label_hyoji'>
<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
</b:if> 
</div>
  </div>
<div style='clear: both;'/> 
HTMLエンティティを戻して見やすくしたのが以下です。
  <div class='post-header-line-1'>//テンプレートにもともとある投稿ヘッダー1行目のdiv
<!--公開更新日時の表示 開始-->
  <script>
    function date_shoshiki(feed_date){//「2013-08-29T22:07:」を「2013年08月29日22時07分」に整形する関数。
        return feed_date.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分");
    }
  </script>
  <div style='float:right;font-size: 0.9em;text-align:right;margin-left:20px'>//右寄せにしてフォント少し小さくして左との境界に幅を20pxあける。
  <b:if cond='data:blog.pageType == "item"'><!--アイテムページのとき-->
    <div id='toko_nitiji'/>//ここに書き込まれる。
    <script>
      $.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",//jQueryで個別の投稿のフィードを取得。
        function(json){
          var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);//フィードから公開日時を得て整形。
          var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);//フィードから更新日時を得て整形。
          $("#toko_nitiji").html(kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>");// <div id='toko_nitiji'/>に代入。
          $("#label_hyoji").css('padding-top','15px');//ラベル表示の上に15px空間を空ける。
      });
    </script>
  <b:else/><!--アイテムページ以外のとき-->
    <b:if cond='data:post.dateHeader'> //その日の1番目の投稿のとき
      <script type='text/javascript'>var post_dateHeader = "<data:post.dateHeader/>"</script> //post_dateHeaderに日付を取得。
    </b:if>
    <script>
      var feed_date=post_dateHeader+"T"+"<data:post.timestamp/>"+":";//日時をフィードと同じ形式に整形。
      var kokaibi=date_shoshiki(feed_date);//日時の表記を整形。
      document.write(kokaibi+"公開"+"<br>");//ここに書き込む。
    </script>
  </b:if>
    <data:top.authorLabel/> <data:post.author/>//投稿者の表示。
</div>
<!--公開更新日時の表示 終了-->
    <div id='label_hyoji'>//ラベル表示の部分にid='label_hyoji'をつける。
<b:if cond='data:post.labels'>//ラベル表示。
  <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
</b:if>
</div>
  </div>//<div class='post-header-line-1'>はここまで。
<div style='clear: both;'/> //字の回りこみ設定を解除。
手間取ったのはインデックスページで表示される各投稿の公開日を得るところですね。

フィードから公開日時を得るとBlogger:レイアウト編集(8)各投稿の更新日時の表示をする(失敗編)でみたようにインデックスページではすべて同じ公開日時になってしまいます。

そのため22行目でわざわざBloggerタグの"<data:post.dateHeader/>"から日付を得ています。

このタグは同じ日の続く投稿では空になっているのでまずはpost_dateHeaderという変数に保存しています。

27行目でdocument.write()で各投稿ごとに公開日時を書き出しています。

Blogger:日付ヘッダーを必ず表示させる方法の記事がとても参考になりました。

自分がやったことでも時間が経つとすっかり忘れてしまうのでちゃんと記録に残しておくと役立ちますね。

参考にしたサイト


連載:Ajax時代のJavaScriptプログラミング再入門:第2回 JavaScriptの関数をマスターしよう (1/4) - @IT
関数定義のパターンが解説されています。

回り込みのレンダリング
floatの使い方が例つきで解説されておりわかりやすいです。

HTML / XHTMLで使用されるエンティティ文字一覧
Bloggerのテンプレートでは予め置き換えておかないと保存ができないときがあります。

次の関連記事:Blogger:レイアウト編集(10)ウィジェットのIDを確認する方法

PR

1 件のコメント:

  1. こんにちは。
    更新日時を表示したいと思っていました。
    自分で作ろうかと思っていましたが、使わせていただきます。
    コードが整理されていてわかりやすかったです。

    返信削除