前の関連記事：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("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分");
}
</script>
<div style='float:right;font-size: 0.9em;text-align:right;margin-left: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=?",
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>");
$("#label_hyoji").css('padding-top','15px');
});
</script>
<b:else/><!--アイテムページ以外のとき-->
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var post_dateHeader = "<data:post.dateHeader/>"</script>
</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'>
<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 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=?",//ｊQueryで個別の投稿のフィードを取得。
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：日付ヘッダーを必ず表示させる方法の記事がとても参考になりました。
自分がやったことでも時間が経つとすっかり忘れてしまうのでちゃんと記録に残しておくと役立ちますね。
参考にしたサイト
関数定義のパターンが解説されています。
回り込みのレンダリング
floatの使い方が例つきで解説されておりわかりやすいです。
HTML / XHTMLで使用されるエンティティ文字一覧
Bloggerのテンプレートでは予め置き換えておかないと保存ができないときがあります。
こんにちは。
返信削除更新日時を表示したいと思っていました。
自分で作ろうかと思っていましたが、使わせていただきます。
コードが整理されていてわかりやすかったです。
はじめまして。こちらのテンプレートはQooQでしたでしょうか。先日私、QooQのテンプレートを使用させてもらう事にしたのですが、最終更新日を表示させることが出来なく四苦八苦しておりました。
返信削除こちらのコードをそのまま利用させてもらえれば、最終更新日を表示する事可能でしょうか。その際、どの部分に挿入したらよろしいでしょうか。
ご教授いただけると有難いです。
「旧ブログ」タグの投稿内容はデフォルトテンプレートの「画像ウィンドウ」のものなのでQooQとは合わない部分があるかもしれません。
削除QooQで更新日表示ガジェット-p--q
とりあえず現在QooQで使っているガジェットについての投稿を書きましたのでご利用ください。
ご紹介した記事のガジェットは投稿ページでのみ動作します。
削除インデックスページでは更新日表示には対応していません。
早急にコメントありがとうございます。
削除別ページに投稿しして頂いた対応で解決できました。
丸２日頑張って勉強して対応出来ず、ものの１分で対応可能になるというこの素晴らしい出来事に感動しております。
感謝です。