「広告」  

QooQ 記事一覧 の 最終更新日付 表示方法2 ( Font Awesome 対応 QooQテーマの編集 )!

Awesome_top image(Png)

 前回の続きで、今回は「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」が導入済みです。 以下の1行を埋め込む必要はありません。

筆者と同じく、初めて Font Awesome を利用する方は 以下サイトがオススメ!
「6」はまだ Alpha Version で、「5」の最新版は 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 = &quot;<data:post.dateHeader/>&quot;</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(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
        var up_date2 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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(&#39;beforeend&#39;, pub_date2);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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 = &quot;<data:post.dateHeader/>&quot;</script>

 [b] 6行目全体を、以下4行のコードで置換。 変数 jsdate を利用せず、「 iso8601 形式の投稿日と最終更新日」を "yyyy/m/d"表示して、それぞれ変数に格納。 (変数1は、「(投稿)記事用の最終更新日付」表示に利用済み)

	  <script type='text/javascript'>
		var pub_date2 = new Date(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
		var up_date2 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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(&#39;beforeend&#39;, pub_date2);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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行目全て」を貼っていただければ調査いたします。 ただし、貼り付ける前には「エスケープ処理」が必要!
(コード通りで動作確認を行った後に、カスタマイズはお願いします)



ToukouKiji image(Png)

また、以下コードの「4〜28行目」のように編集すれば、(投稿)記事も同様に表示可能です!

              <h1 id='single-header-title'><data:post.title/></h1>
              <b:if cond='data:blog.pageType  == &quot;item&quot;'>
              
	  <script type='text/javascript'>   <!-- 20210520 Edit start by Ataruchi    -->
		var pub_date1 = new Date(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
        var up_date1 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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(&#39;beforeend&#39;, pub_date1);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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」テーマ(カード型)の場合 

Awesome_Card_image(Png)

軽量ソースコード+デザインにも拘りがある方向けです。 既に 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 = &quot;<data:post.dateHeader/>&quot;</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, &quot;2:1&quot;)'/>
      </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(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
        var up_date2 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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, &quot;2:1&quot;)'/>
      </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(&#39;beforeend&#39;, pub_date2);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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 = &quot;<data:post.dateHeader/>&quot;</script>

 [b] 6行目全体を、以下4行のコードで置換。 変数 jsdate を利用せず、「 iso8601 形式の投稿日と最終更新日」を "yyyy/m/d"表示して、それぞれ変数に格納。 (変数1は、「(投稿)記事用の最終更新日付」表示に利用済み)

	  <script type='text/javascript'>
		var pub_date2 = new Date(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
		var up_date2 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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(&#39;beforeend&#39;, pub_date2);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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  == &quot;item&quot;'>
              
  <!--<p id='single-header-date'><data:post.dateHeader/></p>  -->
	  <script type='text/javascript'>   <!-- 20210520 Edit start by Ataruchi    -->
		var pub_date1 = new Date(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
 		var up_date1 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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(&#39;beforeend&#39;, pub_date1);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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'>
Awesome_kiji_image(Png)


 日付の日本語表示対応 サンプル 

  別ページ になりました!





Macブログ ランキング アイコン
最後まで読んでいただき、ありがとうございます。 また、お越しくださいませ。
// アタル
For follow LINE Reader Group!Subscribe to this blog on Feedly!

Next Post Previous Post
No Comment
Add Comment
comment url
  「広告」