QooQ トップページ画像をなんとか表示したい

2023年01月03日 2023年03月11日

むむっ、トップページの一覧の画像が、表示されてなかったりする！！

古いブログなので、きちんとサムネイル画像を貼ってなかったりするのよね。

それでも、動画が貼ってあると、その画像が表示されてたわけで、さてどうする？

高速化のため、動画の埋め込みを回避していた。

音楽関連の記事を書いていたので、ほとんどの記事に動画が埋め込まれていた。

ある日気が付くと、Google Search Consoleのページエクスペリエンスが真っ赤？

高速化しなさい！って怒られてる雰囲気で、最初に、ここから手を付けていた。

こちらの達人に伝授戴いた。。🙏

動画の埋め込みの＜iframe＞に、遅延読み込み（Lazy-load）「loading="lazy"」を

入れる手もあったんですが、ほとんどの投稿のファーストビュー近くに動画が貼ってある。

あまり高速化が期待できそうもないので、埋め込みを断念する方向で検討した。

（こちら、全記事修正しました。。トホホ。。）

その影響もあってか？残念なことに、ホームの画像が表示されてくれなかった。

すべての記事に画像を貼ればいいのだが、1000記事超えてるのよぉ！

最終目標は、画像を貼ることにして、、なんとかならない？？っと調査。

「if cond='data:post.thumbnailUrl'」サムネイルのURLで判定しているところを、

「if cond='data:post.firstImageUrl」投稿記事の最初のイメージのURLに変更した。

＜Before＞

  <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>

＜After＞

  <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.firstImageUrl'>
      <a expr:href='data:post.url'>
        <img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;1: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 + &quot;?max-results=10&quot;'><data:label.name/></a></span>
        </b:loop>
      </p>
    </div>
  </article>

「firstImageUrl」も「thumbnailUrl」も投稿の最初の画像のURLじゃないのかい？

調査してみたが、明確な違いは、よく分からなかった。。多分なんですが、、

「firstImageUrl」には、Blogger（Google）以外の画像のURLも含まれるが、

「thumbnailUrl」は、Blogger（Google）の画像のURLのみの気がしますねぇ。

ああ、、画像が表示されてくれたぁ、よかったなぁ。。しかし、その後ですねぇ、

関連記事を巡って、再度、画像になやまされることになるのである。。その話は、また後日。

ページトップに戻るトップボタン🔘

こちらの達人に伝授戴いた。。🙏

ページの最後に飛ぶパターンもあったんですが、出来ればスクロールして、

覗いて頂けたら嬉しいなっと、トップに戻るボタンのみの導入に決定しました。

ちなみに、、あまりガジェットを追加したくなかったので、、

現在、一番最後のヘッダー３の[HTML / JavaScript] ガジェットの、

リンク＜a＞タグの後に、追記してますが、問題なく動いてるようです。

高速化のため、こちらの方法に変更しました。。2023年 2月 1日　記

QooQ 高速化トップへ戻るボタン【脱jQuery、脱JavaScript】 - Blogger メモ帳月夜ニ君ノ音想フ♪

最終更新日を表示してみよう♪

こちらの達人に伝授戴いた。。🙏

更新日の頭にマークを表示するパターンが多いんですが、（確かにカッコイイしね）

『Font Awesome』を導入するのを辞めてたので、こちらの「更新：」ってのが決め手です。

つまり、『Font Awesome』ロード時間をケチりたかったんですねぇ。。（笑）

追記

既に、2000近い投稿数のブログのメンテナンスとなると、

なんとか、テンプレートの修正だけとか、ちゃちゃっと「JavaScript」でも書いて、

一気に済ませたいところですが、、そんな技量はそもそもないし、

もはや、一括変換するには、恐ろしい量？地道にやりますって感じ。。

（その地道な作業については、後々書きたいと思います。）

まだまだ、技術の革新が目覚しくて、とっととまとめとかないと、、

また仕様の変更の嵐に見舞われそうだ。。ああ、ついて行けてない感じだよ。

Blogger