QooQ 記事一覧 の 最終更新日付 表示方法２ （ Font Awesome 対応 QooQテーマの編集 ）！
前回の続きで、今回は「Font Awesome 対応 QooQテーマの編集」となります！
Font Awesome は WordPress ユーザーが重宝している「アイコン集」ですが、もちろん Blogger でも利用可能です！
既に Font Awesome を利用している方と、今回から利用される方向けの記事となります。
初めてテーマを編集する方で 前回の記事 を読んでいない場合は 先にお読みください！
前回と同様、「QooQ list」 or 「QooQ」テーマ Version 1.30 ダウンロード直後のコード で解説いたします。 "yyyy/m/d" 形式利用で 2021年1月1日の場合、 2021/1/1 と表示されます！
念のため fontawesome で検索し 検索結果行に link rel='stylesheet' が含まれていた場合、既に「Font Awesome」が導入済みです。 以下の１行を埋め込む必要はありません。
筆者と同じく、初めて Font Awesome を利用する方は 以下サイトがオススメ！
「６」はまだ Alpha Version で、「５」の最新版は 2021/05/20現在 Version 5.15.3
5.13以降、「COVID-19」のアイコンも追加とか...
上記サイトのオススメどおり「"CDN"を使ってFont Awesome 5を使う方法（CSS）」を選択したため、以下のコードを <head> から </head> の間に埋め込みます。
よく分からない方は、 </head> 直前が無難かと... "CDN"を選択すると、（サーバーにファイルを配置する必要が無く）HTMLにタグを貼り付けるだけなので導入がとても簡単とのことです！
<!-- Font Awesome 5 CDN -->
<link rel='stylesheet' href='//use.fontawesome.com/releases/v5.15.3/css/all.css'/>
おっと 導入される場合、テーマのバックアップも忘れずに！
//]]>
</script>
<!-- 20210520 Font Awesome CDN version 5.15.3 by Ataruchi -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"/>
<b:include data='blog' name='google-analytics'/>
</head>
<body>
<div id='navigation'>
<div class='container'>
<label for='navigation-button' id='navigation-label'>=</label>
<input id='navigation-button' type='checkbox'/>
<div id='navigation-content'>
<b:section id='ナビゲーション' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='true' title='ページ' type='PageList' version='1'>
Font Awesome 未使用 テーマの編集
別ページ になりました！
Font Awesome 対応 テーマの編集
軽量ソースコード＋デザインにも拘りがある方向けです。 既に Font Awesome 導入済みなら、これ一択かと...
「QooQ list」テーマ（リスト型）の場合
まずは、「 var jsdate 」で検索！ （「QooQ list Version 1.30」ダウンロード直後のコードで解説）
<div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
<article class='list-item'>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var jsdate = "<data:post.dateHeader/>"</script>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<div class='list-item-img-box'>
<a expr:href='data:post.url'>
<img class='list-item-img' expr:src='data:post.thumbnailUrl'/>
</a>
</div>
</b:if>
<div class='list-item-inner'>
<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<p class='list-item-category'>
<b:loop values='data:post.labels' var='label'>
<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
</b:loop>
</p>
</div>
</article>
上記ソースコードの6行目が検索されるはずで、今回は 5〜16行目（ <b:if cond= から </p> まで ）の一部を置換。
[0] 上記ソースコードで 5〜16行目を一度も変更したことが無ければ、 5〜16行目（ <b:if cond= から </p> まで ）を 以下のコードで一括置換が可能。
下記 [a] 〜 [d] の手順を行う必要はありません！ 最後に、テーマを（更新）保存してください。
<b:if cond='data:post.timestampISO8601'> <!-- 20210520 Edit Start -->
<script type='text/javascript'>
var pub_date2 = new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date2 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<div class='list-item-img-box'>
<a expr:href='data:post.url'>
<img class='list-item-img' expr:src='data:post.thumbnailUrl'/>
</a>
</div>
</b:if>
<div class='list-item-inner'>
<!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> -->
<p class='list-item-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if(pub_date2 == up_date2){
// 日付が同じときは出力しない
}
else{
var updated_dd = ""+ up_date2 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210520 Edit end -->
<b:if cond='data:post.dateHeader'>
[a] 5行目の上記コードを、以下コードで置換。 'data:post.dateHeader' に不正な日付がセットされる場合があるため、「 iso8601形式の 投稿日」（世界標準時 2014-04-27T13:10:02+09:00 みたいなの）を利用。
この不具合対応に三日間を費やしました！ 現状、iso8601形式の「投稿日」に不正な日付がセットされることは無いようですが、もしも遭遇した場合はコメント等でお知らせくださいませ。
<b:if cond='data:post.timestampISO8601'>'data:post.dateHeader' の問題点は、以下のサイトが分かり易いです！
<script type='text/javascript'>var jsdate = "<data:post.dateHeader/>"</script>
[b] 6行目全体を、以下4行のコードで置換。 変数 jsdate を利用せず、「 iso8601 形式の投稿日と最終更新日」を "yyyy/m/d"表示して、それぞれ変数に格納。 （変数1は、「（投稿）記事用の最終更新日付」表示に利用済み）
<script type='text/javascript'>
var pub_date2 = new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date2 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
[c] この2つの変数を数行あとで利用。（ pub_date2 が投稿日、 up_date2 が最終更新日 )
<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
[d] 上の16行目の1行を、以下20行のコードで置換。（ 置換前の16行目はコメント化して、残しておいた方が良い ）
ちょっとだけコードを解説！ document.currentscript.parentnode で現在実行中の親要素（つまり、pタグ）にHTML要素を追加。 Element.insertAdjacentHTML で追加する詳細位置は、4種類中の "beforeend" を利用して document.write() を代用。 ほかにも Element.insertAdjacentTEXT もあって、用途に合わせて使えそう。 細かくCSS修飾したい場合（idを付加するため）、Element内のコンテンツをまるっと書き換えるだけの innerHTML を利用すれば良いと認識。
<!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> -->
<p class='list-item-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if(pub_date2 == up_date2){
// 日付が同じときは出力しない
}
else{
var updated_dd = ""+ up_date2 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210520 Edit end -->
お疲れ様でした！ 最後に、テーマを（更新）保存してください。
トップページを再表示しても最終更新日が表示されない場合は、コメントに 「変更した5〜16行目全て」を貼っていただければ調査いたします。
ただし、貼り付ける前には「エスケープ処理」が必要！
（コード通りで動作確認を行った後に、カスタマイズはお願いします）
また、以下コードの「4〜28行目」のように編集すれば、（投稿）記事も同様に表示可能です！
<h1 id='single-header-title'><data:post.title/></h1>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'> <!-- 20210520 Edit start by Ataruchi -->
var pub_date1 = new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date1 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
<!-- <p id='single-header-date'><data:post.dateHeader/></p> -->
<p id='single-header-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date1);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if(pub_date1 == up_date1){
// 日付が同じときは出力しない
}
else{
var updated_dd = ""+ up_date1 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210520 Edit end by Ataruchi -->
<b:if cond='data:post.labels'>
<p id='single-header-category'>
<b:loop values='data:post.labels' var='label'>
「QooQ」テーマ（カード型）の場合
軽量ソースコード＋デザインにも拘りがある方向けです。 既に Font Awesome 導入済みなら、これ一択かと...
コード以外は、「QooQ list」テーマ（リスト型）の場合を ご参照ください！
まずは、「 var jsdate 」で検索。 （「QooQ Version 1.30」ダウンロード直後のコードで解説）
<div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
<article class='list-item'>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var jsdate = "<data:post.dateHeader/>"</script>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")'/>
</a>
</b:if>
<div class='list-item-inner'>
<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<p class='list-item-category'>
<b:loop values='data:post.labels' var='label'>
<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
</b:loop>
</p>
</div>
</article>
上記ソースコードの6行目が検索されるはずで、今回は 5〜14行目（ <b:if cond= から </p> まで ）の一部を置換。
[0] 上記ソースコードで 5〜14行目を一度も変更したことが無ければ、 5〜14行目（ <b:if cond= から </p> まで ）を 以下のコードで一括置換が可能。
下記 [a] 〜 [d] の手順を行う必要はありません！ 最後に、テーマを（更新）保存してください。
<b:if cond='data:post.timestampISO8601'> <!-- 20210520 Edit Start -->
<script type='text/javascript'>
var pub_date2 = new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date2 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")'/>
</a>
</b:if>
<div class='list-item-inner'>
<!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> -->
<p class='list-item-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if(pub_date2 == up_date2){
// 日付が同じときは出力しない
}
else{
var updated_dd = ""+ up_date2 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210520 Edit end -->
<b:if cond='data:post.dateHeader'>
[a] 5行目の上記コードを、以下コードで置換。 'data:post.dateHeader' に不正な日付がセットされる場合があるため、「 iso8601形式の 投稿日」（世界標準時 2014-04-27T13:10:02+09:00 みたいなの）を利用。
この不具合対応に三日間を費やしました！ 現状、iso8601形式の「投稿日」に不正な日付がセットされることは無いようですが、もしも遭遇した場合はコメント等でお知らせくださいませ。
<b:if cond='data:post.timestampISO8601'> <script type='text/javascript'>var jsdate = "<data:post.dateHeader/>"</script>
[b] 6行目全体を、以下4行のコードで置換。 変数 jsdate を利用せず、「 iso8601 形式の投稿日と最終更新日」を "yyyy/m/d"表示して、それぞれ変数に格納。 （変数1は、「（投稿）記事用の最終更新日付」表示に利用済み）
<script type='text/javascript'>
var pub_date2 = new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date2 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
[c] この2つの変数を数行あとで利用。（ pub_date2 が投稿日、 up_date2 が最終更新日 )
<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>[d] 14行目の上記コードを、以下20行のコードで置換。（ 置換前の14行目はコメント化して、残しておいた方が良い ）
<!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> -->
<p class='list-item-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if(pub_date2 == up_date2){
// 日付が同じときは出力しない
}
else{
var updated_dd = ""+ up_date2 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210520 Edit end -->
お疲れ様でした！ 最後に、テーマを（更新）保存してください。
トップページを再表示しても最終更新日が表示されない場合は、コメントに 「変更した5〜14行目全て」を貼っていただければ調査いたします。
ただし、貼り付ける前には「エスケープ処理」が必要！
（コード通りで動作確認を行った後に、カスタマイズはお願いします）
また、以下コードの「5〜29行目」のように編集すれば、（投稿）記事も同様に表示可能です！
<h1 id='single-header-title'><data:post.title/></h1>
<b:if cond='data:blog.pageType == "item"'>
<!--<p id='single-header-date'><data:post.dateHeader/></p> -->
<script type='text/javascript'> <!-- 20210520 Edit start by Ataruchi -->
var pub_date1 = new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date1 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
<!-- <p id='single-header-date'><data:post.dateHeader/></p> -->
<p id='single-header-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date1);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if(pub_date1 == up_date1){
// 日付が同じときは出力しない
}
else{
var updated_dd = ""+ up_date1 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210520 Edit end by Ataruchi -->
<b:if cond='data:post.labels'>
<p id='single-header-category'>
<b:loop values='data:post.labels' var='label'>
日付の日本語表示対応 サンプル
別ページ になりました！
// アタル
