前の関連記事：Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その3
（へ）Blogger：レイアウト編集(9)各投稿の更新日時の表示をする（成功編）
Blogger：レイアウト編集(9)各投稿の更新日時の表示をする（成功編）
まずウェブバージョンの部分について現在使っているコードを抽出します。
テンプレートのHTMLの編集でウィジェットへ移動→Blog1。
このBlog1ウィジェットの中のpostインクルードの中の公開更新日時の表示部分を抜き出します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div class='post-header-line-1'><!--公開更新日時の表示 開始--> <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+ "?max-results=10"' 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;'/> </div> |
5 6 7 8 9 10 11 12 13 14 |
<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> |
関数data_shoshiki()は他でも使っているのでテンプレートのHTMLの</head>の上にもっていっています。
1 2 3 4 5 |
<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> |
11 |
$("#toko_nitiji").html(kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>");// <div id='toko_nitiji'/>に代入。 |
11 |
document.getElementById("toko_nitiji").innerHTML = kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>";// <div id='toko_nitiji'/>に代入。 |
12 |
$("#label_hyoji").css('padding-top','15px');//ラベル表示の上に15px空間を空ける。 |
12 |
document.getElementById("label_hyoji").style.paddingTop = "15px";//ラベル表示の上に15px空間を空ける。 |
なのでBlogger:ページ番号付ページナビ(8)Paginavi_Bloggerモジュールの導入のPageNavi_Blogger/pagenavi.js at master · p--q/PageNavi_Blogger · GitHubで作った関数writeScript()を使うことにしました。
1 2 3 4 5 6 |
function writeScript(url) { // document.write()の代替。URLを読み込む。 var newInclude = document.createElement('script'); newInclude.type = 'text/javascript'; newInclude.setAttribute("src", url); document.getElementsByTagName('head')[0].appendChild(newInclude);}; |
appendChild vs insertBefore | High Performance Web Sitesを読んでheadタグはすべてのページにあるわけではないので他の方法にしようと思った記憶がありますがどうしようと思ったのか忘れてしまいました。
モバイルバージョンでも使う関数toko()もheadタグに書くことにしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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(":","分"); } function writeScript(url) { // document.write()の代替。URLを読み込む。 var newInclude = document.createElement('script'); newInclude.type = 'text/javascript'; newInclude.setAttribute("src", url); document.getElementsByTagName('head')[0].appendChild(newInclude); } function toko(json){ var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);//フィードから公開日時を得て整形。 var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);//フィードから更新日時を得て整形。 document.getElementById("toko_nitiji").innerHTML = kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>";// <div id='toko_nitiji'/>に代入。 }</script> |
5 6 7 8 9 |
<div id='toko_nitiji'/><script> var url = "https://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=toko"; writeScript(url);</script> |
ということでテンプレートのHTMLは書き換えたのはまず</head>の上に以下を挿入しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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(":","分"); } function writeScript(url) { // document.write()の代替。URLを読み込む。 var newInclude = document.createElement('script'); newInclude.type = 'text/javascript'; newInclude.setAttribute("src", url); document.getElementsByTagName('head')[0].appendChild(newInclude); } function toko(json){ var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);//フィードから公開日時を得て整形。 var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);//フィードから更新日時を得て整形。 document.getElementById("toko_nitiji").innerHTML = kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>"; }</script> |
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id='toko_nitiji'/> <script> var url = "https://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=toko"; writeScript(url); </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 style="padding-top: 15px"><!--ラベル表示の上に15px空間を空ける。--> |
（ト）Blogger:モバイルサイト(6)更新日時の表示などヘッダーの改造
Blogger:モバイルサイト(6)更新日時の表示などヘッダーの改造
mobile-postインクルードもpostインクルードと同様に書き換えます。
1 2 3 4 5 6 7 8 9 10 11 |
<!--公開更新日時の表示 開始--> <div id='toko_nitiji' style='font-size: 0.9em;text-align: right;padding-bottom: 5px'/> <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>"); }); </script><!--公開更新日時の表示 終了--> |
1 2 3 4 5 6 7 8 9 |
<b:if cond="data:blog.pageType == "item""><!--アイテムページのとき--><!--公開更新日時の表示 開始--> <div id='toko_nitiji' style='font-size: 0.9em;text-align: right;padding-bottom: 5px'/> <script> var url = "https://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=toko"; writeScript(url); </script><!--公開更新日時の表示 終了--></b:if> |
(2016.12.1追記。静的ページのフィードが取得できずエラーになるのでアイテムページに限定するif文を追加しました。）
（リ）Blogger:投稿タイトルの下に「年月日 曜日 時刻」を表示させる
Blogger:投稿タイトルの下に「年月日 曜日 時刻」を表示させる
16 17 18 19 20 21 22 23 |
<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> |
レイアウト画面で「ブログの投稿」ガジェットの日付と時刻表示はBlogger:投稿タイトルの下に「年月日 曜日 時刻」を表示させるのときと違ってこのようにしておかないと関数date_shoshiki()でうまく処理できません。
16 17 18 19 20 21 |
<div id='kokai_nitiji'/><script> var post_dateHeader = "<data:post.dateHeader/>"||post_dateHeader var kokaibi=date_shoshiki(post_dateHeader+"T"+"<data:post.timestamp/>"+":"); document.getElementById("kokai_nitiji").textContent = kokaibi+"公開";</script> |
インデックスページでは複数の投稿が表示されるために同じidの要素が表示されてしまうために、一番上の投稿だけに一番下の投稿の公開日時が表示されてしまいました。
そこで書き換えた要素のidはelement.idを使って書き換えてしまうことにしました。
16 17 18 19 20 21 22 23 |
<div id='kokai_nitiji'/><script> var post_dateHeader = "<data:post.dateHeader/>"||post_dateHeader var kokaibi=date_shoshiki(post_dateHeader+"T"+"<data:post.timestamp/>"+":"); var elem = document.getElementById("kokai_nitiji"); elem.textContent = kokaibi+"公開"; elem.id = "kokai_nitiji_sumi";</script> |
この投稿で変更したところのまとめ
結局最初に掲げたテンプレートのHTMLの編集でウィジェットへ移動→Blog1で、このBlog1ウィジェットの中のpostインクルードの中の公開更新日時の表示部分を抜き出した部分は以下のようになりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class='post-header-line-1'><!--公開更新日時の表示 開始--> <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> var url = "https://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=toko"; writeScript(url); </script> <b:else/><!--アイテムページ以外のとき--><div id='kokai_nitiji'/><script> var post_dateHeader = "<data:post.dateHeader/>"||post_dateHeader; if(post_dateHeader){ var kokaibi=date_shoshiki(post_dateHeader+"T"+"<data:post.timestamp/>"+":"); var elem = document.getElementById("kokai_nitiji"); elem.textContent = kokaibi+"公開"; elem.id = "kokai_nitiji_sumi"; }</script> </b:if> <data:top.authorLabel/> <data:post.author/></div><!--公開更新日時の表示 終了--> <div style='padding-top: 15px'><!--ラベル表示の上に15px空間を空ける。--><b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ "?max-results=10"' 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;'/> </div> |
(2016.12.1追記。 静的ページでは<data:post.dateHeader/>がundefinedになってしまっていたので、日付情報があるときのみ公開日が表示されるように変更しました。上記コードは変更済です。）
テンプレートのHTMLの</head>の上に以下を挿入しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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(":","分"); } function writeScript(url) { // document.write()の代替。URLを読み込む。 var newInclude = document.createElement('script'); newInclude.type = 'text/javascript'; newInclude.setAttribute("src", url); document.getElementsByTagName('head')[0].appendChild(newInclude); } function toko(json){ var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);//フィードから公開日時を得て整形。 var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);//フィードから更新日時を得て整形。 document.getElementById("toko_nitiji").innerHTML = kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>"; }</script> |
モバイルバージョンについては上記（ト）で変更した部分と、（リ）に対応した変更部分は、mobile-index-postインクルードの部分を変更しました。
1 2 3 4 5 6 7 8 9 10 |
<div class='post-header' style='font-size: 0.9em;text-align: right;padding-bottom: 5px;padding-right: 30px'><div id='kokai_nitiji'/><script> var post_dateHeader = "<data:post.dateHeader/>"||post_dateHeader var kokaibi=date_shoshiki(post_dateHeader+"T"+"<data:post.timestamp/>"+":"); var elem = document.getElementById("kokai_nitiji"); elem.textContent = kokaibi+"公開"; elem.id = "kokai_nitiji_sumi";</script> </div> |
参考にしたサイト
脱jQuery .html() .text() .val() | q-Az
htmlはelement.innerHTML、htmlタグのないテキストはNode.textContentで書き換えました。
脱jQuery .css() | q-Az
element.styleで書き換えました。
脱jQuery $.getJSON() | q-Az
XMLHttpRequestで書き換えていますがよくわからなかったのでappendChildを使う方法で書き換えました。
appendChild vs insertBefore | High Performance Web Sites
headタグは常に存在するわけでないことも考慮する必要があるとのことです。
0 件のコメント:
コメントを投稿