「広告」  

QooQ 記事一覧 の 最終更新日付 表示方法1 (document.write 未使用、日付誤表示の不具合対応済み)!

Catch-Image (Redirect)

QooQテーマも含め(投稿)記事ではなく、Blogger 記事一覧(投稿一覧、つまりトップページ)に「更新日付」を表示する方法をまとめました!
document.write() 未使用 かつ 日付誤表示の不具合対応済みで、特に「QooQ list」などリスト表示されているテーマで有効かと思います。 「QooQ」テーマなどのカードタイプでも、トップページに「更新日付」を表示したい方はぜひご利用ください。
 なお、 <data:post.dateHeader/> を投稿日付として表示している「他テーマ」にも応用可能なはずです。

 筆者は 2021年4月 ライブドアブログから Blogger に移行途中で、「QooQ list Version 1.30」をカスタマイズして利用しています。 Blogger 経験が浅いため、誤り等あればコメントでそっと教えて頂けると嬉しいです。 対応コードは「QooQ」テーマで紹介しますので、「他テーマ」の場合は 挿入位置など 少々変更が必要になるかもしれません。

 QooQテーマのXMLソースコード内に唯一残っている document.write() の箇所のコードを書き換えるため、SEO的にも多少は貢献できるかと... 少なくとも、Google「PageSpeed Insights」で注意される箇所が減ります(笑) 「フォロワー」ガジェット内に残っている同コードもそろそろ Googleさんに 対処して欲しいですね。 「ブログのフォロワーボタン」が使えなくなるので、同ガジェットは外せないし... それとも、「ウィジェットバージョン2」のフォロワーガジェットのみ、対処済みなのでしょうか?

 1. Font Awesome 未使用、 2. Font Awesome 対応、 3. 日付の日本語表示対応 サンプル の3パターンに分けて対応コードをご紹介いたします。 1. と 2. に関しては "yyyy/m/d"形式のシンプル表記、 3. に関しては(10回とか一覧表示の明細分繰り返す事になるため)「見栄えを優先する方」向けです。 それでは、行ってみましょう!

おっと、導入される場合 必ずテーマのバックアップを取ってから行って下さいね。

 "yyyy/m/d"形式は 2021年1月1日の場合、 2021/1/1 と表示されます!
まだ、記事一覧ではなく、(投稿)記事に最終更新日を表示していない方は以下のサイトをオススメしますので、先に行っておくと良いでしょう。 テーマ つまり HTML(XML)コード の検索方法や編集・保存方法が詳しく載っているサイトですので、初めてテーマを編集する方は(少なくとも)読んでおいてください

 Font Awesome 未使用 の場合は 以下サイト!

 Font Awesome 対応  の場合は 以下サイト!!


 Font Awesome 未使用 テーマの編集 

My top page Image(Png)

筆者のように、機能だけ満たせば余分な物を組み込みたくない方向けです。 JSファイル組み込み時のオーバーヘッドもあり、サイト表示速度も考慮すると SEO的にはもっとも有利かと思われます。 漢字コードに割り当てられた「いわゆる絵文字」表示のため、Mac、Windows、iPhone、Android で若干異なる絵文字(意味は同じ)が表示されます。 気になる方は「投稿」や「公開」、「更新」など文字表記に置換してください。 外国人の方が類推できるよう、更新日付は()のカッコで括りました。 外国からもよくアクセスされるサイトの方は、 publish or Updated 等の英語表記もアリだと思います。

 「QooQ list」テーマ(リスト型)の場合 

 まずは、「 var jsdate 」で検索。 (「QooQ list Version 1.30」ダウンロード直後のコードで解説) 今日 インライン で設置( </body> 直上にJavaScript組み込み )した highlight.js も機能しているようで、何より...

  <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'>
	  <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'>&#12288;&#9999;&#65039; <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, pub_date2);</script>&#12288;&#65288; 🔄 <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date2);</script> &#65289;</p>


<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行のコードで置換。( &#9999;&#65039; は、鉛筆の絵文字 )

 ちょっとだけコードを解説! document.currentscript.parentnode で現在実行中の親要素(つまり、pタグ)にHTML要素を追加。  Element.insertAdjacentHTML で追加する詳細位置は、4種類中の "beforeend" を利用して document.write() を代用。 ほかにも Element.insertAdjacentTEXT もあって、用途に合わせて使えそう。 細かくCSS修飾したい場合(idを付加するため)、Element内のコンテンツをまるっと書き換えるだけの innerHTML を利用すれば良いと認識。

<p class='list-item-date'>&#12288;&#9999;&#65039; <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, pub_date2);</script>&#12288;&#65288; 🔄 <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date2);</script> &#65289;</p>

お疲れ様でした! 最後に、テーマを(更新)保存してください。

 トップページを再表示しても最終更新日が表示されない場合は、コメントに 「変更した5〜16行目全て」を貼っていただければ調査いたします。 ただし、貼り付ける前には「エスケープ処理」が必要!
(コード通りで動作確認を行った後に、カスタマイズはお願いします)


ToukouKiji image(Png)

また、以下コードの「5〜11行目」のように編集すれば、(投稿)記事も同様に表示可能です! ( &#9999;&#65039; は、鉛筆の絵文字 )

              </b:if>
              <h1 id='single-header-title'><data:post.title/></h1>
              <b:if cond='data:blog.pageType  == &quot;item&quot;'>

		<script type='text/javascript'>     <!-- 20210519 Add 4-line 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>  20210519 Change 1-line by Ataruchi -->
                <p id='single-header-date'>&#12288;&#9999;&#65039; <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, pub_date1);</script>&#12288;&#65288; 🔄 <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date1);</script> &#65289;</p>
                
                <b:if cond='data:post.labels'>
                  <p id='single-header-category'>
                    <b:loop values='data:post.labels' var='label'>
                      <a class='single-header-category-item' expr:href='data:label.url'><data:label.name/></a>
                    </b:loop>
                  </p>
                </b:if>
                <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
              </b:if>
            </div>
            <div id='ad-1'>
<!-- アドセンス広告1.start -->

 「QooQ」テーマ(カード型)の場合 

筆者のように、機能だけ満たせば余分な物を組み込みたくない方向けです。 コード以外は、「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] の手順を行う必要はありません! 最後に、テーマを(更新)保存してください。

    &lt;b:if cond=&#039;data:post.timestampISO8601&#039;&gt;
	  &lt;script type=&#039;text/javascript&#039;&gt;
		var pub_date2 = new Date(&amp;quot;&lt;data:post.timestampISO8601/&gt;&amp;quot;).toLocaleDateString();
		var up_date2 = new Date(&amp;quot;&lt;data:post.lastUpdatedISO8601/&gt;&amp;quot;).toLocaleDateString();
	  &lt;/script&gt;
    </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'>
      &lt;p class=&#039;list-item-date&#039;&gt;&amp;#12288;&amp;#9999;&amp;#65039; &lt;script&gt;document.currentScript.parentNode.insertAdjacentHTML(&amp;#39;beforeend&amp;#39;, pub_date2);&lt;/script&gt;&amp;#12288;&amp;#65288; 🔄 &lt;script&gt;document.currentScript.parentNode.insertAdjacentHTML(&amp;#39;beforeend&amp;#39;, up_date2);&lt;/script&gt; &amp;#65289;&lt;/p&gt;


<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行目の上記コードを、以下1行のコードで置換。( &#9999;&#65039; は、鉛筆の絵文字 )

<p class='list-item-date'>&#12288;&#9999;&#65039; <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, pub_date2);</script>&#12288;&#65288; 🔄 <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date2);</script> &#65289;</p>

お疲れ様でした! 最後に、テーマを(更新)保存してください。

 トップページを再表示しても最終更新日が表示されない場合は、コメントに 「変更した5〜14行目全て」を貼っていただければ調査いたします。 ただし、貼り付ける前には「エスケープ処理」が必要!
(コード通りで動作確認を行った後に、カスタマイズはお願いします)



また、以下コードの「5〜11行目」のように編集すれば、(投稿)記事も同様に表示可能です! ( &#9999;&#65039; は、鉛筆の絵文字 )

              </b:if>
              <h1 id='single-header-title'><data:post.title/></h1>
              <b:if cond='data:blog.pageType  == &quot;item&quot;'>

		<script type='text/javascript'>     <!-- 20210519 Add 4-line 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>  20210519 Change 1-line by Ataruchi -->
                <p id='single-header-date'>&#12288;&#9999;&#65039; <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, pub_date1);</script>&#12288;&#65288; 🔄 <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date1);</script> &#65289;</p>
        
                <b:if cond='data:post.labels'>
                  <p id='single-header-category'>
                    <b:loop values='data:post.labels' var='label'>
                      <a class='single-header-category-item' expr:href='data:label.url'><data:label.name/></a>
                    </b:loop>
                  </p>
                </b:if>
                <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
              </b:if>
            </div>
            <div id='ad-1'>
<!-- アドセンス広告1.start -->


 Font Awesome 対応  テーマの編集 

  別ページ になりました!

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

  別ページ になりました!





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

Next Post Previous Post
14 Comments
  • 問わず語り
    問わず語り 2021年11月10日 18:05

    初めてコメント差し上げます。
    記事一覧の更新日表示の記事、ありがとうございます。
    質問がございまして、投稿日と更新日が同じ日付の場合、更新日を表示しないようにするには、どうしたらよいでしょうか。
    私はjavascriptは人様のコードを少々使わせていただく程度で、ほとんどわかりません。
    投稿日と更新日を比較して同じ場合は表示しないようにする、と理解はできても、どうコードを書けば良いのかわからないです。if文で、どーすんだろーなーくらいなもんです。
    お忙しいところ恐縮ですが、ご教授いただければと存じます。

  • アタル
    アタル 2021年11月10日 23:42

    問わず語り さん、こんばんは! コメント、ありがとうございます。 気付くのが遅れて、ごめんなさい。

    [d] 14行目の上記コードを、以下1行のコードで置換。( &#9999;&#65039; は、鉛筆の絵文字 )
    の記事部分を参照してください!

    <script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date2);</script>

    の部分を以下 <script> 〜 </script> で 間違えないように置き換えます(コピペ推奨)!


    <script>
    // <![CDATA[
    if(pub_date2 == up_date2){
    // 日付が同じときは出力しない(この行はコメントです)
    }
    else{
    document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date2);
    }
    //]]>
    </script>


    =================================================================================
    以上の対応で何か問題があれば、またコメントして下さいませ!

    (若干 表示に時間がかかるようになるので、 https://developers.google.com/speed/pagespeed/insights/?hl=ja 
    のスコアが下がるかもしれません)
    なお、 🔄 は javascript 外にあるため 消すのが大変なのでご勘弁を...
    (記事本文でも、同一日で 更新アイコンだけ表示されているサイトが多いはずです)

    以上、ご対応下さい。

  • アタル
    アタル 2021年11月10日 23:56

     ちなみに、Font Awesome アイコン利用や「日本語日付(曜日付き)」は、次下の記事で掲載ずみです。

    https://mac-excel-vba.blogspot.com/2021/05/display-qooq-list-lastUpdatedDay-font-awesome.html

    https://mac-excel-vba.blogspot.com/2021/05/display-qooq-list-lastUpdatedDay-toLocaleDateString.html

    以上、ご参考まで!

  • アタル
    アタル 2021年11月11日 3:58

    <script>
    // <![CDATA[
    if(pub_date2 == up_date2){
    // 日付が同じときは出力しない(この行はコメントです)
    }
    else{
    document.currentScript.parentNode.insertAdjacentHTML('beforeend', up_date2);
    }
    //]]>
    </script>


    にて、置き換えをお願いいたします!

  • アタル
    アタル 2021年11月11日 8:49

     補足です。 確認のため、当ブログも一時的に 同一日の場合 更新日の表示を無しに...
    当ブログはコメントがあった場合 更新日の右側にコメント数が表示されるため、すぐに元に戻しますが...

    逆「HTMLエスケープ」されていない箇所がある javaacript コードを「HTMLエスケープ」したため、
    2箇所 「HTMLエスケープ」コードが混入していました。
    シングルコーテーション(アポストロフィー)の箇所です!
    急ぐ時ほど、「逆HTMLエスケープ」ツールを使うべきでした。

    申し訳ありません。 慌てると、ろくなことがありませんね。


    //<![CDATA[ と //]]> で囲んだコード部分は、「HTMLエスケープ」対象外となります。
    (問題が無ければ)1行位だと面倒なので囲みませんが、(javascript)コードが複数行に渡る場合(通常)囲みます!
    可読性も良くなります。

    【参考】CDATAとは? https://techacademy.jp/magazine/22736 

  • アタル
    アタル 2021年11月11日 9:42

    <script>
    //<![CDATA[
    if(pub_date2 == up_date2){
    // 日付が同じときは出力しない(この行はコメントです)
    }
    else{
    document.currentScript.parentNode.insertAdjacentHTML('beforeend', (' ( 更新 ' + up_date2 + ' )'));
    }
    //]]>
    </script>


    ↑ の「置き換え」もありですね! もちろん、現在 HTML表示している ' ( 更新 ' と ' )' の文字は削除します。

     問わず語り さんの場合 文字だけでアイコン表示がないので、表示位置を上手に調整すれば
    ( 更新 2021/11/11 ) 全体を消すようにできるはずですね。(この部分全体を javascript 表示に変更)

    また、 https://www.sakumamatata.com/2018/08/blogger-ssl-https.html 
    の通りにすれば、「常時SSL化(https:〜で始まり、鍵マークが付く)」 できますよ! 簡単そうですが...

    以上です!

  • アタル
    アタル 2021年11月11日 10:44

    おまけです! 今回置き換えた </script> の直後に以下を追加すると、「コメント数」が表示されるかもしれません!
    (コメントが無い場合は、表示されません)
    必ず、「テーマ(XMLファイル)のバックアップ」を行ってから、追加してください。
    ダメなら、XMLファイルから 元に戻せますので...
    今回追加するコードの直後に </p> があれば(つまり pタグを閉じていれば)、多分 大丈夫かと思いますが...


    <b:if cond='data:post.allowComments'>
    <b:if cond='data:post.numComments > 0'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='コメントを表示'>
    <b>&#12288;&#12288;💬 <data:post.numComments/></b>
    </a>
    </b:if>
    </b:if>

    以上です!

  • 問わず語り
    問わず語り 2021年11月12日 0:17

    アタル様、早々に返信と詳細な解説をありがとうございます。
    上手くできました!
    コメント数の吹き出しは、投稿日の後に表示が可能でした。
    </script>の後なら、イケるかな?と思って、入れてみたらできました。
    Macユーザーでもあるアタル様には、大変親近感もございます。
    私も、ずっと林檎ですので。

    ありがとうございました!!

  • アタル
    アタル 2021年11月12日 1:20

    問わず語り さん、お疲れ様です!
    2つ目の /script の後で説明しましたが、どこに入れるかは ご自由にどうぞ!

    「コメント数の吹き出し」は p タグ 内のどこに入れても表示されると思いますので、
    投稿日の前とか 更新日の後とかでもいけます。 (ただし、script タグ外にて)

    記事本文も、同じコードを挿入すれば 「コメント数の吹き出し」が表示されると思いますので、試してみてくださいね。

    お役に立てて、良かったです!

  • 問わず語り
    問わず語り 2021年11月13日 13:36

    なんだか色々と教えていただき、本当にありがとうございます。
    皆さん、交流があるようでコメント読ませていただいて、楽しいです。
    それにしても、朝、早いですね。
    それでは失礼いたします。

  • アタル
    アタル 2021年11月13日 16:15

     問わず語りさん、こんにちは!

    ふじやんさんとは Twitter でもっと頻繁にやり取りさせて頂いてます。
    よろしければ、 2人の Twitter をフォローして下さいね!

    https://fujilogic.blogspot.com/2021/10/QooQ-display-comment-number.html

    の通りにすれば、「記事本文」のコメント吹き出し(アイコンというか、正確には絵文字)に付けてるリンクを
    コメント部分までジャンプ
    できます。(強制スクロール)

    問題が発生したため、今朝アップしたコメント(2つ)は一時削除して、
    再度 コメントアップさせて頂きます!

  • アタル
    アタル 2021年11月13日 21:39

     ふじやんさんの以下の記事変更を取り入れたため、(今朝アップした2コメントを削除し)再コメントさせて頂きます。
    https://fujilogic.blogspot.com/2021/07/quick-edit-icon-on-QooQ.html
    なお、この修正で投稿日の前に表示している「鉛筆の絵文字」は Blogger組込みの「鉛筆アイコン」に変更されます。

     当ブログでは以前から「記事本文」先頭に表示されている「鉛筆」をクリックすると、その記事を編集可能。
    (これは管理者向けの機能で、管理者以外がクリックすると「Google Login」ウィンドウが表示されるため脆弱性は無し)
    ちなみに、ポインタを当てると「投稿を編集」と表示されます。

    今回、「記事一覧」の鉛筆にも上記機能を付けたくて挑戦したけどダメだったので、ふじやんさんに相談したところ
    対応コードを教えて頂いたので その対応コードを お裾分け!
    言わば、「ふじやんさん改」コードで コメント転載をふじやんさん本人が了承ずみ。

    まず、最初に「記事本文」と「記事一覧」の両方から呼び出しされる postQuickEdit 部分を修正します!
    この説明では よく分からないと思う方は、元記事の
    https://fujilogic.blogspot.com/2021/07/quick-edit-icon-on-QooQ.html
    を参照して修正後、もう一度読み返して下さい!


     id='postQuickEdit' を検索し、 <b:includable id='postQuickEdit' var='post'>
    から </b:includable> で囲まれる合計9行を 以下のコードで置き換え(念のため、元コードをコメント化)
    ==================================
    <b:includable id='postQuickEdit' var='post'>
    <!--
    <b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
    <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
    </a>
    </span>
    </b:if>
    -->
    <!-- 20211113 Ataruchi [postQuickEdit] 呼び出し元を 全修正 supported by ふじやん さん -->
    <!-- https://bloggercode-blogconnexion.blogspot.com/2021/10/faq.html -->
    <b:with value='data:view.isPage ? "blog/page/edit/" : "blog/post/edit/"' var='path'>
    <!-- <span expr:class='"item-control " + data:post.adminClass'> -->
    <a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + "/" + data:post.id)' expr:title='data:top.editPostMsg'>
    <img alt='鉛筆アイコン' class='icon-action' height='18' loading='lazy' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
    </a>
    <!-- </span> --> <!-- spanタグなしでも, 管理者以外は Google Login ウィンドウが表示される -->
    </b:with>
    </b:includable>
    ==================================
    ふじやんさんのコードのままだと、管理者以外の読者は「鉛筆アイコン」が表示されなくなるため、 span のタグ2行をコメント化。
    spanタグ無しでも、「管理者以外は Google Login ウィンドウが表示されるため 問題無い」と筆者は考えます。
    管理者のみ2つ「鉛筆」マークが表示されるのも嫌だったので...(小さいスマホだと、更新日が次の行に跨って表示されてしまうことがある)

    「記事本文」と「記事一覧」から上記コードを呼び出しする部分は、それぞれ別のコメントでアップさせて頂きます!

    【注意】コメントだと、行先頭の タブ や [space] コードが削除されるため、適当に補完して下さい。
    (見栄えを気にしなければ、動作上問題はありません)

    今回は、以上となります!

  • アタル
    アタル 2021年11月13日 21:41

     「記事一覧」日付表示行(pタグ)のコードです! コメントがあれば、コメント数も表示されます。
    <b:include data='post' name='postQuickEdit'/> で呼び出しを行い、(リンク付き)鉛筆アイコンを表示。

    ==================================
    <!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> --> <!-- 20210504 Change by Ataruchi for 最終更新日 -->
    <p class='list-item-date'>
    <!-- 20211113, 20210725 Ataruchi [投稿を編集] リンクの追加 supported by ふじやん さん -->
    <!-- https://bloggercode-blogconnexion.blogspot.com/2021/10/faq.html -->
    <b:include data='post' name='postQuickEdit'/> <!-- id='postQuickEdit' [鉛筆アイコン+リンク] を呼び出し -->

    <script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>&#12288;🔄
    <script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', up_date2);</script>

    <!-- 20210605 Ataruchi &#65288;投稿リンク付き&#65289;コメント数の表示 supported by ふじやん さん -->
    <b:if cond='data:post.allowComments'>
    <b:if cond='data:post.numComments > 0'>
    <a alt='comment-link1' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='コメントの表示&投稿'>
    <b>&#12288;&#12288;💬 <data:post.numComments/></b> <!-- [コメント]ポップアップウィンドウを開く -->
    </a>
    </b:if>
    </b:if>
    </p>
    ==================================

    デフォルトでは「吹き出し」の絵文字をクリックすると、コメントのポップアップウィンドウを(別ウィンドウで)開きますが、
    問題があればリンク(aタグ)を修正して下さい。

    【注意】コメントだと、行先頭の タブ や [space] コードが削除されるため、適当に補完して下さい。
    (見栄えを気にしなければ、動作上問題はありません)

    今回は、以上となります!

  • アタル
    アタル 2021年11月13日 21:43

     「記事本文」日付表示行(pタグ)のコードです! コメントがあれば、コメント数も表示されます。
    <b:include data='post' name='postQuickEdit'/> で呼び出しを行い、(リンク付き)鉛筆アイコンを表示。

    ==================================
    <!-- <p id='single-header-date'><data:post.dateHeader/></p> --> <!-- 20210504 Modify by Ataruchi for 最終更新日 -->
    <p id='single-header-date'>
    <!-- 20211113, 20210725 Ataruchi [投稿を編集] リンクの追加 supported by ふじやん さん -->
    <!-- https://bloggercode-blogconnexion.blogspot.com/2021/10/faq.html -->
    <b:include data='post' name='postQuickEdit'/> <!-- id='postQuickEdit' [鉛筆アイコン+リンク] を呼び出し -->

    <script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date1);</script>&#12288;🔄
    <script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', up_date1);</script>

    <!-- 20210605 Ataruchi &#65288;投稿リンク付き&#65289;コメント数の追加表示 supported by ふじやん さん -->
    <b:if cond='data:post.allowComments'>
    <b:if cond='data:post.numComments &gt; 0'>
    <!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='コメントの表示&#65286;投稿'> -->
    <a alt='comment-link1' expr:title='data:post.commentLabelFull' href='#comments'>
    <b>&#12288;&#12288;💬 <data:post.numComments/></b> <!-- [n件のコメント]と表示され&#12289;コメント先頭へJUMP -->
    </a>
    </b:if>
    </b:if>
    </p>
    ==================================

    デフォルトでは「吹き出し」の絵文字をクリックすると、そのページの「コメントの先頭」にジャンプします!
    問題があればリンク(aタグ)を修正して下さい。

    【注意】コメントだと、行先頭の タブ や [space] コードが削除されるため、適当に補完して下さい。
    (見栄えを気にしなければ、動作上問題はありません)

    以上で、修正は終わりです! お疲れ様でした。

Add Comment
comment url
  「広告」