すたすた式
Blogger Vaster2
recycle_24 2022年1月:2022年版を作りました。
PageSpeed Insightsで測ってみると、以前設置した最終更新日のところで遅延が発生していました。
なので、遅延解消のために、以前調べた時に見つけた<data:post.lastUpdatedISO8601/>を使ったものに変更してみました。
<data:post.lastUpdatedISO8601/>
PageSpeed Insightsでの遅延の指摘がなくなたので、とりあえずは成功かなと思っています。
今回、勉強がてら以下のものをつくってみました。
素人が”動けばいい”という水準でつくったものです。いろいろ過不足があると思いますのでコピペするときは留意してください。
追記 1：JavaScriptを圧縮したところ、今回書いた物だとうまく動きませんでした。
コードの圧縮を利用するかたは、某氏の猫空さんが Bloggerで記事に最終更新日を付ける方法【2018年更新】を公開されていますので、そちらを利用された方がよろしいかと思います。
追記 2：テンプレートについて
使っているテンプレートが「レイアウトバージョン3、ウィジェットバージョン2」の場合、今回使っているデータタグが対応していないため動かないっぽいです。。。
data:posts[i].lastUpdatedISO8601 [widget Blog]
「レイアウトバージョン3、ウィジェットバージョン2」のテンプレートの場合は、下記の方法でいけるようです。
レイアウトバージョン、ウィジェットバージョンの確認のしかたもあり、わかりやすかったです。
Bloggerで記事の公開日/最終更新日を表示してみた | Spoon & Fork
テンプレート Vaster2 の widget version は "1" でした……
HTMLを編集します。必ずバックアップを取ってから作業してください。
日付の区切りは2018/01/09のように"/"(スラッシュ)にしました。
参考サイトのコードは、月が英語表記なので数字にかえ、さらに表示順を"月""日""年"の順から、"年""月""日"の順に変更。
月の表示を英語表記から数字に変更したところ、公開日の数字と桁数が合わなかったので、これを合わせました。
1行目は参考サイトのコードでも問題なく動きましたが、少し短く書き換えました。
<span id='lastupdatedinfo' itemprop='dateModified'> <!-- ここに表示される --> </span> <script type="text/javascript"> var datalud = "<data:post.lastUpdatedISO8601/>" var udate = new Date(datalud); var month = ("0"+(udate.getMonth() + 1)).slice(-2); //月の表示を2桁にする var date = ("0"+udate.getDate()).slice(-2); //日の表示を2桁にする document.getElementById("lastupdatedinfo").innerHTML = "最終更新日" + udate.getFullYear() + "/" + month + "/" + date; </script>
日付表示が"年","月","日"の場合は、参考サイトのコードの英語表記の部分、"January","February","March"...を"1","2","3"...のように数字に置き換え。
<span id='lastupdatedinfo' itemprop='dateModified'> <!-- ここに表示される --> </span> <script type="text/javascript"> var datalud = "<data:post.lastUpdatedISO8601/>" var udate = new Date(datalud); var months = ["1","2","3","4","5","6","7","8","9","10","11","12"]; document.getElementById("lastupdatedinfo").innerHTML = "最終更新日" + udate.getFullYear() + "年" + months[udate.getMonth()] + "月" + udate.getDate() + "日" ; </script>
または、こちらでも
<span id='lastupdatedinfo' itemprop='dateModified'> <!-- ここに表示される --> </span> <script type="text/javascript"> var datalud = "<data:post.lastUpdatedISO8601/>" var udate = new Date(datalud); var month = udate.getMonth() +1; document.getElementById("lastupdatedinfo").innerHTML = "最終更新日" + udate.getFullYear() + "年" + month + "月" + udate.getDate() + "日" ; </script>
<!-- ここに追加 --> <span id='lastupdatedinfo' itemprop='dateModified'>
ここまでのコードの直上(<span id='lastupdatedinfo' itemprop='dateModified'>の上)に下記のコードを追加するとを記号 マーク付けることができます。
<span id='lastupdatedinfo' itemprop='dateModified'>
Font Awesome 4
<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em'/>
Font Awesome 5 にしたので下記に変更しました
<i aria-hidden='true' class='fas fa-sync-alt fa-fw' style='margin-left:0.5em;'/>
style='margin-left:0.5em'で左に間隔をつくりました。
style='margin-left:0.5em'
<span id='lastupdatedinfo' itemprop='dateModified'> <!-- ここに表示される --> </span> <script type="text/javascript"> /* 最終更新日を取得 */ var datapostlud = "<data:post.lastUpdatedISO8601/>" var udate = new Date(datapostlud); var year = udate.getFullYear(); var month = ("0"+(udate.getMonth() + 1)).slice(-2); //月の表示を2桁にする var date = ("0"+udate.getDate()).slice(-2); //日の表示を2桁にする /* 公開日を取得 */ var datapostts ="<data:post.timestampISO8601/>" var datets = new Date(datapostts); var yearts = datets.getFullYear(); var monthts = datets.getMonth() +1; var datets = datets.getDate(); /* 最終更新日と公開日をくらべる */ if(year == yearts && month == monthts && date == datets) {} else{ document.getElementById("lastupdatedinfo").innerHTML = "<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em; margin-right:0.5em'/>" + "最終更新日" + year + "/" + month + "/" + date; } </script>
"<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em; margin-right:0.5em'/>" +
これはFont AwesomeのSVGアイコンを追加するときのものです。
Font Awesome 5にしたので下記に変更しました。
if(year == yearts && month == monthts && date == datets)
の部分は、可読性のためにCDATAセクションを設けてもOK
//<![CDATA[ if(year == yearts && month == monthts && date == datets) //]]>
<data:post.lastupdatedISO8601/>と<data:post.timestampISO8601/>の後ろにセミコロン";"をつけても動きました
<data:post.lastupdatedISO8601/>
<data:post.timestampISO8601/>
"<data:post.lastupdatedISO8601/>"; "<data:post.timestampISO8601/>";
上記いずれのコードも<b:if cond='data:blog.pageType == "item"'></b:if>ではさめば個別記事のみで表示されます。
<b:if cond='data:blog.pageType == "item"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'> 最終更新日を表示するコード </b:if>
デフォルトのテンプレートVaster2でいうと、1391行目の</span>の直上に設置しました。class='post-timestamp'が効くので投稿した日付と同じCSSが適用されます。
</span>
class='post-timestamp'
class='post-timestamp'を効かせたくないようでしたら、 1391行目の</span>の直下に設置すればclass='post-timestamp'が効かなくなります。
その際には適宜<span id='lastupdatedinfo' itemprop='dateModified'>のなかにclassを書いて 好みのCSSを適用させてください。
<!--記事ページの時--> <div class="post-body entry-content" expr:id='"post-body-" + data:post.id' itemprop="articleBody"> <div class="top-meta"> <p class="kousin"> <span class="post-timestamp"> <!-- ←これが効く --> <i aria-hidden="true" class="fa fa-clock-o"></i> <if cond="data:post.dateHeader"> <script type="text/javascript"> var hiduke = "<data:post.dateHeader/>" </script> </if> <if cond="data:top.showTimestamp"> <if cond="data:post.url"> <meta expr:content="data:post.canonicalUrl" itemprop="url"> <abbr class="published" expr:title="data:post.timestampISO8601" itemprop="datePublished"> <script type="text/javascript"> document.write(hiduke) </script> </abbr> </if> </if> <!-- ここに最終更新日を表示するコードを貼り付け --> </span> <span class="post-tag"> </span> </p> </div> </div>
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
ここに設置しました
返信削除とありますが、入れた後の画像をアップしてくれると助かります。
素人なので、結局何を設置したのかが、よくわかりません
コメント管理を怠っていたため、確認が遅れました。申し訳ありません。
削除すでに解決なさっているかもしれませんが、入れた後の画像をアップロードします。
なお画像は、「公開日と最終更新日が同じ場合に最終更新日を表示しないもの」かつ
「Font Awesome 5」のときのものです。
また、「ここに設置しました」の文言を「ここに最終更新日を表示するコードを貼り付け」
に変更しました。
公開日と最終更新日が同じ場合に最終更新日を表示しないもの
返信削除のコードを使用し、リフレッシュマークを貼り付けると、公開日と最終更新日が同じでもリフレッシュマークだけは表示されてしまうのですが、公開日と最終更新日が違う場合のみ表示されるようにする方法を教えてください。
コメント管理を怠っていたため、確認が遅れました。申し訳ありません。
削除すでに解決なさっているかもしれませんが、分かる範囲でお返事いたします。
「公開日と最終更新日が同じ場合に最終更新日を表示しないもの」
のコードのなかにすでに、リフレッシュマークを表示する部分が入っているので、
新たにリフレッシュマークを貼り付ける必要はないと思われます。
ちなみに、
"<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.5em; margin-right:0.5em'/>"
の部分がリフレッシュマークを表示する部分です。
style='margin-left:0.5em; margin-right:0.5em の数字でリフレッシュマークの左右の間隔を調整しています。